How to: Clickable Header Images

[courage]

Thanks Rick! It actually worked for me on the first go round!

— SallyGirl

Thanks again!

[kingdomgeek]

alda, courage: You're both welcome!

[brockriggs]

Thanks, Rick. Easy to follow and it worked like a charm.

[sergevc]

Rick,

This code also worked for me, although only partly.

1. How can I change the colour of the site name? My header is black and the site name tag is also black so the site name isn't visible.

2. My design is wider dan 960px, so my header is only covering about 85% of the table. Is there a way to fix this?

Thanks for your help!

[kingdomgeek]

Using the above tutorial, the site name shouldn't be visible at all. To change it's color, though, add this to your custom.css file:

.custom #header #logo { color: #ff0000; }

Adjust the hex code to whatever color value you want (the example is red).

To have your header be wider, just upload a larger image and change the width specified in the CSS in the above tutorial.

[sergevc]

Rick,

It works but the space between the blog title and the nav bar has become
too narrow. And the tag line falls outside the header table. See
printscreen. (Unfortunately this is another printscreen from my localhost,
because the Thesis theme is not yet implemented on my online blog.)

This is the code I use in the custom.css

/* This line sets up our clickable background image based on the site title's link */
/* DIY: Adjust the height & width attributes to reflect the actual size of your image */
/* DIY: Change the filename of your image to reflect the actual header's file name */
.custom #header #logo a { color: #ffffff; display: block; height: 200px; width: 960px; background: url('images/header.jpg') no-repeat; outline: none; }
/* This line gets rid of the site title & tagline by casting them out to far left field */
.custom #header #logo { color: #ffffff; }, .custom #header #tagline { color: #ffffff; text-indent: -9999px; }
/* This line collapses the vertical space of the tagline so that there isn't unnecessary white space after the header image */
/* This is a bit of a kludge, but it seems to work. */
.custom #header #tagline { height: 0; margin-top: -8px; }
/* This line removes the padding from the header so that the background image sits close to the nav menu, the bottom border of the header, and the sides of the content */
.custom #header { padding: 0; }

[denko]

Hi Rick,

I've been struggling with this all afternoon. I seem to have a white space the size and shape of the image, and it links to the home page, but the image itself - header.jpg - does not show up. The site is Mockup site — Gerbil Voodoo I've tried different images and checked and re-checked the code in custom.css and config.php. Any suggestions about what I might try next?

Thanks.

Dan

Mockup site — Gerbil Voodoo

[phoenixreguy]

Originally Posted by denko

I seem to have a white space the size and shape of the image, and it links to the home page, but the image itself - header.jpg - does not show up.

Dan - I was having EXACTLY that same problem last night and finally found a small typo in the URL to the image. For me, the image URL was case sensitive as well, which I thought was odd... Don't know if htat's your problem, but might want to look *carefully* at that image URL.

[kingdomgeek]

sergevc: Are you wanting to display the header & tagline on top of the image? If so, try this code:

/* This line sets up our clickable background image based on the site title's link */
/* DIY: Adjust the height & width attributes to reflect the actual size of your image */
/* DIY: Change the filename of your image to reflect the actual header's file name */
.custom #header #logo a { color: #ffffff; display: block; height: 200px; width: 960px; background: url('images/header.jpg') no-repeat; outline: none; }
.custom #header #tagline { color: #ffffff; }
/* This line collapses the vertical space of the tagline so that there isn't unnecessary white space after the header image */
/* This is a bit of a kludge, but it seems to work. */
.custom #header #tagline { margin-top: -20px; }
/* This line removes the padding from the header so that the background image sits close to the nav menu, the bottom border of the header, and the sides of the content */
.custom #header { padding: 0; }

denko, where did you upload your header image? It should be in the /wp-content/themes/thesis/custom/images/ folder. If so, remove the first / from the address of the image in your code. You have url('/images/header.jpg') and it should be url('images/header.jpg')

[jaymyers]

How would I go about adding alt attrib the way I have it set up on my site, which is a little different than the directions here, I found this way to work with IE 6, which there are still some corps out there using it believe it or not.

About — Jay Myers - Realtor