Dave's Serendipity themes are all completely free
Monday, May 1. 2006
Changing the RSS icon
A Serendipity web journal user recently asked me how to change the 
XML icon on their blog to one of the new 
'Feed icons' that have been adopted across the web. Firefox users will have noticed an orange 'feed icon' in their browsers navigation toolbar when a page has an RSS feed and many of the new Serendipity themes, including my own, use the new icon. Most notably, Microsoft have adopted 'Feed Icons' as their future standard, so you know you'll be seeing them all over the web in no time.
First thing you need to do is get the new 'Feed Icons'. Carl Galloway has a zip on his site that he has recoloured in various shades that you can download. Or why not download the complete set from the Feed Icons website.
Now you've got your 'Feed icons' read on to find out what to do with them.
XML icon on their blog to one of the new 'Feed icons' that have been adopted across the web. Firefox users will have noticed an orange 'feed icon' in their browsers navigation toolbar when a page has an RSS feed and many of the new Serendipity themes, including my own, use the new icon. Most notably, Microsoft have adopted 'Feed Icons' as their future standard, so you know you'll be seeing them all over the web in no time.First thing you need to do is get the new 'Feed Icons'. Carl Galloway has a zip on his site that he has recoloured in various shades that you can download. Or why not download the complete set from the Feed Icons website.
Now you've got your 'Feed icons' read on to find out what to do with them.
If you downloaded Carl's icons, all you need to do is choose which colour you want on your blog, open the 12x12 icon in your image editing program, save it as a gif naming the file xml.gif. Then upload your saved file to templates/your_blog_theme/img/. If there is already a file named 'xml.gif' overwrite it.
If you downloaded the full set of Feed icons you'll find the zip contained icons in various sizes and formats. If you just want to upload the default orange Feed icon you'll find it inside the folder feed-icon/default/images/gif-dark or gif-light depending on the background colour of your blog. The file you want is feed-icon-12x12.gif . You should duplicate the file, naming the copy xml.gif and upload this file to templates/your_blog_theme/img/. If there is already a file named 'xml.gif' overwrite it.
Now, when you go back to your weblog your theme will have the new feed icon you just uploaded. If it doesn't you might need to refresh the page a couple of times before the new Feed icon loads.
If you want to create a Feed icon in a particular colour yourself, the designers have provided simple instructions for Photoshop users which I've amended and reproduced below.
Instructions for Photoshop method:
Wasn’t that easy?
I've found that using a blend mode of 'overlay' produces a flatter colour icon with more intensity and 'multiply' an interesting dark variation.
Upload your xml.gif to templates/your_blog_theme/img/. If there is already a file named 'xml.gif' overwrite it.
And that's it, I hope some of you have found this guide useful.
If you downloaded the full set of Feed icons you'll find the zip contained icons in various sizes and formats. If you just want to upload the default orange Feed icon you'll find it inside the folder feed-icon/default/images/gif-dark or gif-light depending on the background colour of your blog. The file you want is feed-icon-12x12.gif . You should duplicate the file, naming the copy xml.gif and upload this file to templates/your_blog_theme/img/. If there is already a file named 'xml.gif' overwrite it.
Now, when you go back to your weblog your theme will have the new feed icon you just uploaded. If it doesn't you might need to refresh the page a couple of times before the new Feed icon loads.
If you want to create a Feed icon in a particular colour yourself, the designers have provided simple instructions for Photoshop users which I've amended and reproduced below.
Instructions for Photoshop method:
- 1. Go into the grayscale folder and open whichever size you would like.
For instance, if you want to add a 12 pixel icon to your site, open feed-icon-12x12.psd.
2. Right-click on the “feed icon” layer in your layers palette. Press F7 if it’s not already visible.
3. Select “Blending Options” from the menu that appears.
4. Click on “Colour Overlay”. This will apply Colour Overlay and if you have Preview selected, you will see the icon is now solid red.
5. Change the “Blend Mode” to Colour.
6. Click on the colour swatch to change the overlay from red to your preference.
7. Click ok once you’ve settled on a colour.
8. “Save For Web” as xml.gif and you’re done!
Wasn’t that easy?
I've found that using a blend mode of 'overlay' produces a flatter colour icon with more intensity and 'multiply' an interesting dark variation.
Upload your xml.gif to templates/your_blog_theme/img/. If there is already a file named 'xml.gif' overwrite it.
And that's it, I hope some of you have found this guide useful.
Trackbacks
Trackback specific URI for this entry
No Trackbacks
