In my post, 5 Ways To Smarten Up A Boring WordPress Theme, I talked about using RSS icons to spiffy up the look of your blog. It just so happens that I stumbled across this post shortly after I wrote that which lists a ton of different resources if you’re looking for something free. There are some extremely cool RSS icons in that list.
When you find something you’d like in your own theme, it’s time to get your hands a tad dirty. Here’s how to replace the existing RSS icon in your theme with a new one:
Download the free RSS icon to your computer and unzip it.
Open your FTP program and navigate to your theme folder which is in the “wp-content” folder. (If you have trouble with this part, let me know in the comments.)
In your stylesheet, locate the bit of CSS for RSS. Each stylesheet is a bit different, but if you use the Find feature (hit Ctrl+F) and search for “rss” you should find it no problem. I’m using the Copyblogger theme by Chris Pearson on this particular blog so I’ll be using that code for my examples.
Here was my original code with the boring orange RSS icon:
#rss { width: 20em; height: 70px; margin: 0 0 1.0em 0; background: url('images/rss.gif') 50% 0 no-repeat; text-align: center; }
#rss a { display: block; width: 48px; height: 48px; margin: 0 auto; }
Here is what I changed it to:
#rss { width: 20em; height: 128px; margin: 0 0 1.0em 0; background: url('custom/rss.gif') 50% 0 no-repeat; text-align: center; }
#rss a { display: block; width: 128px; height: 128px; margin: 0 auto; }
You’ll need to know the width and height of your new RSS icon to put in the new values. My new RSS icon was 128×128 so I changed the height of 70px to 128 to make sure there was enough space.
This pushed down my sidebar a bit so if you’re not willing to have changes like this, choose a new RSS icon that is the same size as the existing one, or resize it in an image editing program.
You’ll also need to rename your new RSS icon and replace the old RSS icon with the new one. I did this by dragging it into my images folder via my FTP program and rewriting over the old one.
My particular theme uses a custom stylesheet and custom images folder (any new images or graphics I put in my theme all go into the custom folder) so I had to rename the ‘images/rss.gif’ part to ‘custom/rss.gift’.
Now my new RSS icon is displaying perfectly, but I want to add a little something extra. In Fireworks (you can use GIMP for a free alternative image editing program) I copied the RSS icon and made the copy a different color. I named it “rss_hover.gif” and dragged it into my custom folder. Then I added this bit of css into my custom stylesheet:
#rss a:hover { background: url('custom/rss_hover.gif'); }
Now when you hover over the RSS icon, it changes color.
And there you have it. A fairly simple change that makes a pretty big difference. If there are any CSS masters out there who have an easier way, I’d love to hear it!
10 comments ↓
[...] customized. One simple thing you can do to spice it up a little is simply change out the RSS icon. How to change your RSS icon to a new snazzy one in WordPress walks you through the steps of how to change it. It’s pretty simple. Possibly related posts: [...]
Hey Cassie,
Thanks for the input, I learn a lot from your blog. I have tried to use a better RSS icon, but it didn’t turn out the way I wanted. I will try this ASAP.
Anna’s last blog post..It is difficult to change your career
Thanks Anna – You’ll have to come back and link to the finished product when you’re done!
Hi Anna, Thanks for the great tips. I just have a little problem…I changed my rss icon, the size for it to fit in & everything, but now that I have this cool new icon there, it screwed up everything below it on my theme. Everything is aligned to the right, and my 125×125 ads are no longer in 2 nice little neat rows.
At my wits end…any suggestions? I use the WP_010 theme.
Thanks,
Coree
.-= Coree Silvera´s last blog ..10 Blog Traffic Tips =-.
darn it…I meant “Cassie”…sorry. Anna was the last name I had seen & it stuck. *blushing*
.-= Coree Silvera´s last blog ..10 Blog Traffic Tips =-.
Hey Coree, no worries.
I took a peek at your code. That’s quite the stylesheet! I’m wondering if there isn’t a missing div tag somewhere in your index.html file. My head is full of cold and flu germs right now and I can’t think clearly. Would you be able to send me the code you changed to get that image in there? You can shoot it to me through my contact form and I can take a look.
Hey Cassie…I couldn’t stand it anymore. I changed my theme all together. You’re right, it was overwhelming and I kept trying to customize it to make it something I liked, but it was too much work.
The kicker was when I checked IE6 and it was completely messed up! Ugh. It’s 3am and I finally have my blog to a point where it looks decent at least.
Thanks for all your tips here. Great easy to follow tips!
Coree
.-= Coree Silvera´s last blog ..10 Blog Traffic Tips =-.
Hey Coree, it looks great! The funny thing is I was going to suggest the Neoclassical theme for you. I’ve modded that for a few blogs myself and had a lot of fun with it.
Don’t you just love IE6? Or Any IE! I’m better now but I sometimes forgot about testing on different browsers and I went for a whole year with one of my websites looking like utter crap in IE even though it was perfect in Firefox.
I’m glad you like all these tips. It’s good to know they’re coming in useful.
good thing I stumbled on your post mama, this’ll surely help me out on my new blog. Thank you.
.-= Maiku´s last blog ..Oh and Here I go. =-.
Thanks Maiku! Good luck with your new blog.
Leave a Comment