Retro theme tutorials (part II): How to replace the text main site name with a simple PNG file?

After v2.0 update, this theme got a little “boost”. I get a lot of questions about modifying “particular” sections of theme layout, so this tutorials will answer one of those questions.

How do I replace the text main site name with a simple PNG file?

There are two ways to do this.  You can replace text with the png file or you can set png in background leaving the code intact and SEO friendly. I think this is a much better way then just replacing text with image.  Everything you need to do i to open “style.css” file and replace this section:


#logo h1
{
font: normal 3.6em/125% Georgia, "Times New Roman", Times, serif;
color: #f3efe9;
width: 400px;
float: left;
text-align: center;
padding: 15px 0px 0px 75px;
}

#logo h1 span
{
font: italic 0.4em Georgia, "Times New Roman", Times, serif;
color: #d0d1c0;
display: block;
}

with this:


#logo h1
{
display: block;
width: 400px;
height: 80px;
text-indent: -9999px;
float: left;
background: url("image_path/image_name.png") no-repeat 0% 0%;
padding: 0px;
}

I put some “dummy” values in this code, which should be replaced with your own. Enter your own width (image width), height (image height) and image itself (path and image name).