One of the biggest things I see people try to do with Thesis is get a clickable banner image in their header (instead of just the text / tagline). And understandably so, people are a bit apprehensive about writing functions and using filters (although they shouldn’t be. But that’s for another tutorial).
However, it doesn’t have to be that hard. You can get your own image in there with just a few lines of CSS. Here is what you need to do:
- Get an image (make note of the dimensions of the image. It’ll matter later)
- Upload the image into your /custom/images folder within your Thesis theme (preferred) or into your uploads folder
- Copy the code below into you custom.css file, with a few modifications
Here’s the code
.custom #header {
height:180px;
padding:0;
background:none;
margin:0 auto;
}
.custom #header #logo a {
text-align:center;
display: block;
height: 180px; /* Must match the height given in the previous area */
width: 600px; /* Not required, but will allow the image to be centered)*/
background: url(images/FILENAME.PNG) no-repeat;
outline: none;
}
.custom #header #logo, .custom #header #tagline {
text-indent: -9999px;
}
Things To Keep In Mind
- If you put the image anywhere other than the custom/images/ folder, you need to put in the entire URL of the image in line 13.
- Make sure to put in the height of the image in both places (line 2 and line 11)
That’s really all there is to it. Problems? Feel free to comment.
{ 11 comments… read them below or add one }
I’ve been told that using the -999 trick wasn’t the best way to go. Is that accurate or do you disagree?
I’ve heard it both ways. I’m by no means an SEO expert, so I can’t say one way or the other. I just know this is easy. People like easy.
As long as you are presenting the same information through your image as you are through the text you’ve positioned off the page, you’ll be fine.
It’s when you start using the hidden text deceptively that you’ll run into serious problems. So, for example the “This is Where Awesome Happens” tagline text which is positioned off the page here exactly matches the content of the image that is visible.
They really should just get over their fears and use custom functions.
The code nerd in me agrees with you 110%, but the fact remains that folks are afraid. And keep in mind a lot of people bought Thesis because they didn’t WANT to mess with any code.
That being said, 1.8 is gonna have a header image uploader, so all of this is probably for naught.
I hope 1.8 is slick because honestly I’ve been doing way to much coding lately.
Nice style, I love it!
Whet I like about Thesis Theme so far is that you can control almost every little bit of it!
How did you put that on top of the background image?
The header image itself is a .png image. With a .png, you can save it with a transparent background. Assuming you’ve set the background image itself in the body class, it should overlay just fine.
this is hair splitting really.
you can also use a span and set to display none.
google page rank isn’t that particular about such things.
even when it is it’s negligible. there is a lot of stuff in front end web dev with multiple solutions. it is up to the developer to choose his/her preferred methodology.
don’t blackhat, and concentrate on inbound links. that’s the ticket.
this is even more true now that the whole validation b.s. has hit its peak and its usefulness has been put into better perspective.
html5 is making that a hella lot less important as we speak.
relax, do what works for you. keep the code light and semantically relevant. everything else will take care of itself.
and while i’m being know it all on my time off pot benzo stupor, it is good to add ‘overflow: hidden’ when using the the text-indent: -9999px text hide method. keeps the active outline from going off the page and lets you use margins as expected. top margins push the header away from the parent container in some browsers. add that to get all the major browsers to reset to an identical layout behavior.