Replace text logo with a linkable image

Author Message
RJ
Posted: 5/6/2009
Quote message 

Artisteer's normal output, which is fine for a text logo, follows:

<h1 id="name-text" class="logo-name"><a href="<?php echo $baseUrl; ?>/">My Design Revolution</a></h1>

The CSS class in the style sheet is: ".logo-name"

The font I use in my header, Papyrus, was not installed on some Mac OS browsers when I tested at CrossBrowserTesting.com. Moreover, I also had a conflict with my script handling the header image transitions and the IE6 style sheet that corrected for IE6's lack of .png support.

So I made an image in Gimp and modified the style sheet and index.php, while making it linkable as well.

It's pretty straight forward, and I'm posting it so that anyone who wants to add a linkable header background image has an alternative.

HTML document modification:

<div class="logo"><a href="<?php echo $baseUrl; ?>/"><img src="<?php echo $templateUrl; ?>/images/spacer.gif" width="1" height="1" border="0" alt="" id="logo"></a></div>

Style Sheet modification:

.logo
{
display : block;
position: absolute;
left: 93px;
top: 71px;
width: 472px;
height: 61px;
background-image: url('../images/logo.png');
background-repeat: no-repeat;
background-position: 0 0;
}

#logo {
width: 472px;
height: 61px;
}


Pros: Image has very subtle background definition. Works in IE6 and 7.
Cons: Can't beat the low overhead of text.

http://mydesignrevolution.com
 
RJ
Posted: 5/6/2009
Quote message 

If interested, I wrote it up.

http://firemydesigner.com/tips/19-replace-artisteers-text-logo
 
Jonathan
Posted: 11/5/2009
Quote message 

Thanks for the tip. This is exactly what I was trying to do. However, it seems the code that artisteer outputs has changed a bit since your post. I replaced this in the index.php: 

<div class="art-Header">     <div class="art-Header-jpeg"></div> <div class="art-Logo">     <h1 id="name-text" class="art-Logo-name">         <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>     <div id="slogan-text" class="art-Logo-text">         <?php bloginfo('description'); ?></div> </div>


With this: 

<div class="art-Header">     <div class="art-Header-jpeg"></div> <div class="art-Logo"> <a href="<?php echo $baseUrl; ?>/"><img src="<?php echo $templateUrl; ?>/images/spacer.gif" width="1" height="1" border="0" alt="" id="logo"></a></div>  </div>


I also changed the style .css thusly: 

.art-Logo { 	display : block; 	position: absolute; 	left: 9px; 	top: 77px; 	width: 878px; 	background-image: url('../images/Header.jpg'); 	background-repeat: no-repeat; 	background-position: 0 0; }


It did get rid of the text, which is great, but the image is not a link back to my main page. Any other tips?
 
Don
Posted: 11/5/2009
Quote message 

Very nice site. Like the pop out for

http://www.firemydesigner.com/images/stories/rock-star-sm2.jpg