I would like to start off by saying that many people think that the header must be purged of text before an image can be properly displayed. Well, those people are wrong. I therefore cannot stress enough that all Thesis users must fill in their Blog Title and Tagline. Blog Title and Tagline are found from the WordPress Dashboard. Go to Settings⇒General. Then just fill them both in.
Now I can show you how to fix up that header. I generally recommend that you remove the header border, but that is totally your call. I will remove the border in the following lesson. If you want the border to stay, just take that part out of the CSS. Also, I am going to assume that the image you have is the exact same size as your header area. If you are unsure, ask me. I’ll check it out for ya. All you have to do in return is follow me on twitter. Hey, c’mon. It’s free advice.
Anyway, here we go:
- Open custom.css in an editor AND open the folder labeled images, which is found in the same folder as custom.css and custom_functions.php.
- ****VERY IMPORTANT**** You must now load the header graphic on your server in the images folder.
- Enter the following in the custom.css file:
.custom #header { background: url('images/your_image.gif') no-repeat; text-indent: -9999px; border-bottom: none; }
Now, I bet you have a gorgeous custom header for your site.
{ 8 comments… read them below or add one }
Question for you!
When adding a logo banner at the top of the page, there is a space between the logo and the top of the page. I guess this is because, in full-width framework, the logo goes in the ‘header’ id and not in the ‘header-area’. Is there a way to have the logo image to be directly at the top of the page (i.e., no space between the image and the top of the page)?
Thanks for this great site!
I would have to see what you are talking about. Send your url to thesistutor[at]gmail[dot]com. I would be more than happy to help!
Hello, I have a custom header image, however, I’d like to add a Google Voice Widget as well (into the header). Do you think this is possible?
Hey Matt it’s me again.
I’ve been looking for this for a long time, but no tutorials seem to work for me, my header image just doesn’t show up.
There was this one tut. in yutuub, but it used sandbox page, and placed “header image” above header area. Atleast it worked.
But maybe you can tell why it ain’t showing up?
I’m wondering if you know how to put a custom header image in, but also have the nav menu in the top right of the header.
I’ve used your code for my custom headers on all my sites…
and the following for the one site I DONT have a custom header, but the nav in the top right…
/* Top Nav bar */
.custom ul#topnav {
border-style: none;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
background:#dddddd none repeat scroll 0 0;
width: 100%;
float: left;
}
.custom ul#topnav li { float: right; padding: 0px 10px 0px 0px; }
.custom ul#topnav li a { font-size: 1.5em; color: #0000ff; font-weight: bold}
.custom ul#topnav li a:hover { text-decoration: underline; }
any idea how I can have both?
Matt,
First of all, great site -very informative. I have a question concerning the this header tutorial; how do I link the image or the header area to my home page??
Hey Matt, thanks for your blog, I’m having trouble loading an image as a header…I’ve done the 3 steps you’ve advised in your blog: (and I uploaded my image into my images folder via file manager in host gator)
# Open custom.css in an editor AND open the folder labeled images, which is found in the same folder as custom.css and custom_functions.php.
# ****VERY IMPORTANT**** You must now load the header graphic on your server in the images folder.
# Enter the following in the custom.css file:
Except I’m not sure where the “images” folder is, because it’s not in the same folder as custom.css and custom functions.php that I can see?
By the way, here is my version below of step 3: (my image is named “header” and it’s a .jpg file)
.custom #header { background: url(‘images/header.jpg’) no-repeat; text-indent: -9999px; border-bottom: none; }
I’ll wait to hear back, thanks again. And following you on twitter
just one state below you in Tennessee…
Dean
Thanks for this, it really helped me!!