My second task was to try to break away from making “yet another black website”. The last website, and gee … the website before that were all black backgrounds. Very dark and brooding … but colorful and exciting in their own way. So we went for the polar opposite, white. I also tried to keep the color pallet to green, blue & gray. I think this really made the boat images pop.

For the individual yacht information pages, I kept things sparse and clean. All photos, videos, etc were triggered by sliding menu items and shown in a shadow box. Nice effect, keeping the focus on what is being shown. Also one of the ways I like to see photos these days. A victim of the times? Maybe. But I still like it.

I also reworked their WordPress blog, so it looked more integrated with the rest of the website. I of course chose the WordPress Christmas v1.1 theme from the creative folks at InstantShift.com again. I really like how clean it looks. Once I stripped everything down to white with 1 px green outlines, and shrunk its width to the same size as the rest of the site … you wouldn’t know it was the same theme. It’s clean and slick, and really displays images well too with the articles (again after some CSS tweeking).

I realy like the end result, and so does the client. That is certainly a win win!

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.

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.