Tutorials

Extreme IE customization ñ Graphical Favorites

Page: 1/2
By: Jon Gales

Although very few people will admit to being a fan of Internet Explorer, most Mac users will come in contact with it quite frequently. Although OmniWeb and Chimera are good browsers, IE still has more compatibility. I recently found a way to make Explorer a little nicer ñ graphical favorites:



The trick makes your "must have" sites more visible while giving them a nicer appearance.

The first step is to make the graphic. Go to the site that you want to have the graphical link to and look for a logo. In my case I went to MacMerc (big surprise!) and found our logo. To save this to your desktop you can either click on it and drag it to your desktop or control-click on it and choose "Download Image To Disk". It's your call but control clicking might be a little easier if you've never dragged an image to the desktop before.

Once you have it saved to your computer you need to resize it. Although IE will try to automatically resize it, the result will look like trash. I used Photoshop [screen shot] but any basic image editor with resizing capability will work – even iPhoto! If you are using Photoshop and the logo is a gif (like it is in MacMerc's case) the mode needs to be switched to RGB [screen shot] Once the image has been resized it needs to be cropped [screen shot]. I saved off my image as 'logo.gif' and put it on my desktop.

Now open up a text editor and type in the following code. If you are using TextEdit type Command-
shift-T before starting to type anything (switches to text mode). To save some typing download (control-click and choose Download Link To Disk) this file and open it in TextEdit (no preference hacking needed). Whichever way you chose your file should be as follows [screen shot]:

<a href="http://www.macmerc.com"><img src="logo.gif" alt="MacMerc"></a>

The image (logo.gif) will link to http://www.macmerc.com and it's title (underneath the image) will be "MacMerc". You can obviously change these if you are doing another site. If you want to do several sites at once feel free to keep adding code – you don't have to delete the first line before adding a second. Download a transparent gif of the logo if you can. Otherwise it may look a little funny on your tool bar! You can always make a logo transparent in Photoshop if need be but most of the times you should be able to find one. If you can't make out the logo at the small size either make up a new one in Photoshop or find a new site! Not all sites have logos that fit well in the little space.

Put the text file, and image in a folder (you can call it anything you like). Place this folder someplace that it won't be moved (/Users/username/Documents is a good place). If it does get moved your bookmark will bust! Open the text file in Internet Explorer by dragging in into a blank browser window, dragging it to the Dock icon or choosing open in IE. Once the file is open you should see the logo you lovingly prepared. If not go over what you did... If you're still having trouble email or IM [AIM: jonknee41] me and I'll walk you through it. If you want to add MacMerc I have posted the graphic I used here.

Once you have the logo just drag it to the top tool bar [screen shot], the logo should "stick" afterwards. If you need to delete it or just want to see the text/image control-click in the top menu bar [screen shot] and choose the appropriate option. [screen shot of graphics only] [screen shot of text only]

Most people will want to add Google (as well as MacMerc...) and I have one more trick that will save you even MORE time. Instead of linking to http://www.google.com use this URL:

javascript:void(q=prompt('',''));if(q)void(location.href='http://www.google.com/search?q='+escape(q))

The code for the page will look like this:

<a href="javascript:void(q=prompt('',''));if(q)void(location.href='http://www.google.com/search?q='+escape(q))"> <img src="logo.gif" alt="Google!"></a>

What it will do is pop up a box in IE that you type your query into. Hit return and you're taken to the results page of Google! No need to hit the front page! You can easily customize this javascript to work with a bunch of search sites like dictionaries, and image search engines. It's quite a time saver!

If you find any cool tricks that stem from this idea please send them to me and I'll let the rest of the world know (and also credit your name of course). Also, if you go wild with this and want to send me a screen shot of your tool bar go ahead! I'd love to see/post what everyone has done.

   Next Page (2/2)


All personal comments should be sent to the author. All other discussion should be done in the Forums

[ Back to Tutorials | Sections Index ]