Wearing the chapeau of web developer I have several tools that I use regularly. Besides the obvious ones like Adobe Dreamweaver CS4, I use a little coding application from Panic called Coda.

I use Coda regularly. As they say on their website “text editor + file transfer + svn + css + terminal + books + more = whoah.” I don’t know if I could have explained it better. It’s a text/code editor, with full color formatting to make code snippets more easily identifiable, and readable. It’s allows me to save every site I’m working on as it’s own file within Coda. So when I want to work on my eMac blog I double click, and Coda will FTP to my eMac blog folder on my hosts server & I’m ready to go. This allows me to edit code live. If there are minor changes I need to make to my WordPress theme, I can do it live.

Whether it’s editing a index.php file or a CSS file I make the change in Coda, hit save, go to my browser hit refresh and I see the changes I just made to my page. If it still needs more tweaks. I repeat the steps until It looks the way I want it to look. Live editing is not for the newbie, or the fain of heart. I also use Coda to SSH into my hacked & cracked iPhone when I need to add files or make changes there too.

One of my favorite features in Coda is its CSS editor. It’s so good I wish Adobe would take cues from Panic or license the interface. But until that time I set up Dreamweaver to open a CSS file into Coda when it’s double-clicked. In Coda I can look at my CSS code in one of several ways. Of course as text, but their multi column setup is so intuitive. I can view my CSS code in Visual Mode, Text Mode, or any combination of both.

I’m sure I could go on and on … go check Coda out for yourself.

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.