RSS & Mail IconsI recently changed my WordPress theme to a free theme called WordPress Christmas v1.1, designed by the benevolent and creative folks at InstantShift.com. You might be thinking … hmm … doesn’t look too Christmas-like. Yes with some basic Photoshop & CSS skills it was easy to change the design to make it work for me. With a little skill & help from me … you can too.

This little tutorial will help you change the images used for the RSS icon & the Mail icon and their position on your page. It’s up to you whether you work with the file live. It’s not brain surgery, but as always … back up any files you may alter before you start.

We will be working with these files:

style-one.css (or)
style-two.css
header.php
index.php

To move the RSS & The Mail Icons to the positions I have them in … open either the style-one.css or the style-two.css file depending on which you are using. What you need to change are around lines 79 & 80 in the CSS file.

Find:
img#rss-link{position:absolute;top:172px;left:-105px;}
img#contact-link{position:absolute;top:275px;left:-140px;}

Change to:
img#rss-link{position:absolute;top: 210px;left: 800px;}
img#contact-link{position:absolute;top: 280px;left: 825px;}

This will put the icons in the position I have them. But if you play with the top and left positions you can put them wherever you like.

contactcontactrssrss1

To change the icons to other images as I did, find icons you like, there are plenty of free ones on the web. Open the header.php file go to this section:

<– RSS Link –>
<a href=”<?php bloginfo(‘rss2_url’); ?>”><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/rss.png” border=”0″ id=”rss-link” class=”correct-png” alt=”RSS” /></a>
<a href=”mailto:contact@instantshift.com”><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/contact.jpg” border=”0″ id=”contact-link” alt=”Contact” /></a>

Change:
mailto:contact@instantshift.com
to
mailto:youreMailAddress@YourDomain.com

And as in my case I changed both icons to images that I wanted and they were both .png files. Of course if you name your icon files to something other than rss.png or contact.jpg you will also need to change the corresponding file paths in the RSS Link section (above) … i.e.: /images/contact.jpg  to /images/myfilename.jpg

Also remeber to keep backups of any changed or added files. If InstantShift updates this theme, you will have to make these changes all over again … or just re-upload your changed file after the update.

Hope this helps. :)