13 Aug 2008

Customise the default RSS icon in iWeb

4 Comments Tutorials

Take a look around the internet at any site that allows you to subscribe to an RSS feed and you will no doubt notice a little orange icon decorated with a few curved white lines.  Obviously this has become the ‘icon of choice’ for web designers the world-over when it comes to adding RSS functionality to their sites.  Apple on the other hand seem to want to go against the grain when it comes to iWeb and has stuck to their guns with the little blue icon.

One of the reasons web-sites use the orange RSS icon (although some may not realise it) is an accessibility issue.  Imagine you visit a new blog for the first time and find the articles really interesting and you think to yourself ‘I want to be kept up-to-date with what is happening on this site’, what is the first thing you would look for?  That little orange bundle of joy that is recognised internet wide, or a little blue icon that only appears on iWeb made web-sites?

Don’t get me wrong, there is nothing bad about the Apple icon, far from it.  It does describe exactly what it does…RSS, but just take a look upwards towards your toolbar of your browser and do you see an orange icon or a blue icon built into your browser?  Okay, that may be a bad example but most popular and modern browsers with built in RSS readers use the orange one.

By remaining with the little blue RSS badge, Apple have taken away, perhaps not on purpose, an iWeb users ability to build and maintain standard compliant web-sites.  So in my first ‘proper’ tutorial post to you all I am going to show you how to change the standard iWeb RSS icon for a customised RSS icon thus that visitors to your site know where and how to subscribe to your RSS feeds.

To start with you will need to find an standard orange icon that you are happy with.  You can find loads of free ones on the web, but here is a short list of some of the better ones.

Hongkiat

BittBox

ProBlogDesign

Once you have found your icon of choice, you need to open your favourite image editor and create a new graphic 109 by 36 px and with a transparent canvas.

Next, insert your chosen icon, followed by some text such as ‘Subscribe’ or ‘Subscribe to our feed’. Then all you have to do is save the image as RSS.tiff. (You should now repeat this step using white text rather than black and save the image as RSS-white.tiff).

Now you have to open Finder and right-click (or Ctrl-Click) on the iWeb 08 icon.  From the menu that appears select ‘Show Package Contents’.

Click on the ‘Contents’ folder, then the ‘Resources’ folder and then finally the ‘English.Iproj’ folder (you may have to scroll a bit).  You will now see a selection of images and other objects that are used as a default across the iWeb themes.

Scroll down until you see ‘RSS.tiff’ (and RSS_white.tiff).  These are the files you will be replacing.

Before we go any further, a point to remember is that this will change the default icon for all your web-sites from now on.  You are going to change the image that iWeb uses for its RSS feeds.  It will have the same path-name but when iWeb loads the page, it will load your new image instead.

If you like, rather than delete these 2 files you can simply rename them (eg. RSS2.tiff and RSS_white2.tiff).  That way they will still be there if you change your mind and all you have to do delete the custom images and rename the old ones back again.

It is now a simple case of drag/drop or cut/paste the new images into this folder.

You can now open iWeb and create a new blog. Below is an example using the Doodles theme.  You can see my example under the search bar.

Why not add your blog page to the comments so we can all take a look at your handy-work.

Tags: ,
written by
AllAboutiWeb (AAi) is your one stop shop for everything iWeb. We provide tips, tricks and more to get the most out of your iWeb website. Follow us in twitter at @allaboutiweb
Related Posts

4 Responses to “Customise the default RSS icon in iWeb”

  1. Reply Alex says:

    Hey thanks for the guide; it worked for me… partly. The language of my RSS button somehow got changed when I chose to change my computer’s language to Swedish. I have now changed the language back to English. I wanted to make a new button anyway, so I followed the guide and it works, but only on a new blog. The existing blog that I need it for still gives me the old swedish button when I press insert RSS button. iWeb seems to look in the Swedish folder only for this button on this blog… any suggestions?

  2. Reply All About iWeb says:

    Alex,

    Thanks for the comment, I’m glad you found it useful. The only thing I can think of you can do is add the button manually to your page as an image and then add the RSS link as a standard hyperlink through Inspector. Let me know how you get on.

    Tim

  3. Reply Alex says:

    Hey, got it to work now… simply adding the image to the Swedish folder as well solved the problem. Still kind of weird how it’s stuck using the Swedish language folder, but hey, as long as it works =)

    Thanks! Great site!

    Alex

  4. Reply Hyeon Yu says:

    I got to find your site from the search engine and added it to my favorites for further reference. Thank you for all the great information you published on your website.
    One thing, I would like to ask for is that, I cannot see all the images regarding snapshot supporting your explanation on this page. Can you just tell me the reason for this problem?
    Thanks!!

Leave a Reply