I’ve noticed that customising the your blog’s header is one of the best and simplest ways to make your blog unique. I’ve also noticed that folks not too familiar with CSS are are not too sure about the best way to go about it. They find tutorials that sound like what they need, but there might be a simpler solution.
This post is a summary of the best ways to go about header customisations using CSS. By using CSS in a custom file or a child theme, you can isolate the changes you’ve made to the theme. This helps you to keep track of changes and future-proofs your site in case a new version of your theme is released.
The instructions here are specific to the Thesis theme (and the CSS goes in your custom.css file in the custom folder), but the principles can be applied to other themes too. For example, the Copyblogger theme, which I used to use, has some of the same element selectors (IDs and classes), and I’ve also been working with a child theme for Hybrid and used one of the following techniques.
Full-width headers
I’ve already written a tutorial on full-width headers for Thesis. It’s the most complicated technique for modifying the header, because of the need (or want) to separate the nav and header with different colours or backgrounds.
Clickable headers
Rick did a tutorial on the thesis forum a while ago on clickable header images.
This technique is most useful for someone who wants to replace their whole header area, including the title and tagline, with an image, but still make it link to the home page. For example, the header at Anxiety, Panic & Health.
Update 6th March 2009: I was recently made aware of a header section in Sugarrae’s hooks tutorial that might suit some of you for a clickable header as well.
Replacing the title with a logo
If all you want to do is replace the title with a clickable logo rather than the whole header, we can use the same principle as Rick’s tutorial, but it’s even simpler.
In Thesis, the blog title has an ID of logo. To replace the text with an image, such as the one on Simon Preacher.com, use:
.custom #logo a { display:block; height:150px; width:300px; background:url(images/logo.png) center no-repeat; text-indent:-9999px; }All of that says: show the title link as a block of a certain size (change the dimensions to suit your image), with a background image (change the name and location of your image accordingly), the image is in the centre of the link block and doesn’t repeat, and the text of the links is pushed way off to the left so that we can’t see it any more.
The result is something like:
Creating a header background & keeping the title text
If you have a decorative (and subtle image) to put in your header, but it doesn’t have your site’s title on it, you might want to keep the title link and tagline in your header. To do that, the solution is, again, simpler than the clickable header.
Make the image a background of #header.
.custom #header { height:150px; background:transparent url(images/header.png) center no-repeat; }You can give the header a height so that your image doesn’t get cut off on the top or bottom. If there’s a predominant colour in your image and your image doesn’t take up the whole width of the header, you can replace transparent with the colour in your image (e.g., #f00 for bright red or #000 for black). Speaking of widths, if you’re not sure how wide your header image should be, check out the Thesis user manual for optimal header image widths.
A great example of using a background image and still using text for the title is The Firke Files:
I reckon that’s about it. Those are the four main ways I’ve seen people trying (and sometimes struggling) to change their headers. Take the path of least resistance!
I’m helping a friend with her wordpress site and she bought Thesis. I have helped her load her header onto the site but in the default position it sits too low. How can we change this starting it at the top of the page (we thought moving the nav below would help but it did not.) Also, where can we add our own featured image and why does it default to below the text? We want to move that big featured image up and have text below on a static page. On other pages we don’t want that large featured pic on the page. I cannot even find where there is a spot to change it. Help, please?
Vanessa — I’d need to see the site you’re talking about to fully understand what you mean and see what’s needed to fix it.
Vanessa — Have you been editing layout.css directly? On line 25 it has
padding-top:8.8em;, which is what is causing the space.Kristarella,
Never mind, it seems when I installed Thesis 1.8.2, it actually fixed itself on it’s own. I found that very interesting. Thanks for trying to help though. If I have any further questions I will definitely call upon you. Thanks.
If you ever have a chance, come and visit me in El Paso, Texas. I’ll give you a personal tour of the entire county. We have some very interesting sites, entertainment and some excellent Mexican restaurants, not to mention an excellent view from the Wyler Aerial Tram that goes to the top of the Franklin mountains. Hope to see you around.
Here’s To Exploring Your County,
Adam Garcia
Wonderful resource! I am 3 days old with WP! So pardon my ignorance.
In the example given, of The Firke Files, – how is the *span* tag wrapped around *The*?
Thanks.
Jehangir Larry
Jehangir — To do that you need to replace the header contents. An example of the code is in the user manual.
For some reason I can’t get the header image to center using the methods on here and in the comments. It’s slightly to the left (same as nav bar) would like to center them both :-)
If you can’t change anything via CSS, then you’re pasting it in the wrong place, or there’s an error further up in the CSS file. Apart from that I can’t tell you what’s wrong without seeing the site.
Wow, thanks for the reply so quick! I was able to center the nav bar just not the header image. Ideally, the nav bar would be directly under the header image not above it (with both being centered). Its an adult site so not sure I should post the link?
SS — Here’s a reference for CSS backgrounds , assuming that is the method you are using. Maybe that will help you. Apart from that I’m not really sure how to help you without seeing it… if you’re subscribed to the comment emails you can probably reply straight to that email with the link and it will go to my inbox, if you think that is better. Or you can try pasting your CSS and the source code for the header.
Firstly thanks mate appreciate it. This is one a a very small number of thesis sites that I have book marked — I come back to this site again and again, thank you for all your hard work.
Secondly I am using a skin from thesis themes and therefore have no idea on how to adjust the function php and do it that way i.e. by creating a custom page template — because the skin uses a custom page template for a “portfolio style” page.
That being said would you recommend another way — and why would removing the sidebars via css NOT be optimal ?
Appreciate your help
Anuj — You would probably have to ask Thesis Themes how to do it: they have their own support section, and I’m not very familiar with their non-standard way of doing things.
Built in to Thesis is a No Sidebars template, so you should be able to use that to remove sidebars on specific pages.
Removing them via CSS is not optimal because the content is still in the HTML and viewable by search engines, also you will have to do extra CSS changes to fix up the page widths, not only hide the sidebars. If that doesn’t bother you, then go ahead and use CSS.
Hi Kristarella,
I’ve been reading the posts here and it seems like you have quite a handle on the blog world. I am starting one for a book I had published, and have taken an existing template and modified all the graphics to suit the subject matter. However, I have two issues I’ve run into and figure you are the one to ask based on what I’ve read.
1. I have a transparent image instead of a title so I can have more consistency with the publication cover. However, the graphic seems to be centered on the page. Ideally, I’d like it to be flush to the left side, in line with the paper. I’ve tried creating a different sized GIF with more space on the right… but didn’t seem to do the trick. Any ideas?
2. The original template had it’s own CSS and now when I create a post and try to change the type styles (such as bolding, size, etc) they all seem to revert to the built in CSS styles and don’t adapt to my edits. Any easy way to modify this?
Also, I’m using Blogger, not WordPress.
Cheers,
Dave
Dave — Your header image has the CSS
#header img {
margin-left:auto;
margin-right:auto;
}
applied to it. If you remove that it will go to the left.
I have no idea about the second part. That could be Blogger stripping styles for some reason, or the template might have something else weird going on. I can’t see any CSS for the post content that would cause that. Perhaps you can check your Blogger writing settings and make sure there’s no setting to strip HTML from the posts or something like that.
I have a Problem with ie 7 and older versions. In Firefox it Looks great but in ie the Header is destroyed. What can i do? Can you help me, please?
Stefan — Try adding
.custom #tagline {clear:right;}to your CSS. That might fix it. If not, try rearranging your header’s CSS using positioning rather than floats; it tends to behave a bit more consistently in IE & other browsers.I can’t figure out the best way to fix my header. The text is blending too much into the text. I would place the title AFTER the image, but I can’t figure out how to do that, as blogger only gives 3 options and I don’t know how to make the custom code. Any help is appreciated!!!
Andrea — I haven’t used Blogger for many years. Last time I used it you could manipulate the HTML and CSS of the template any way you like… It looks like you still can do that. If you go to Template from the Blogger dashboard you can click the Customize button then Advanced, which allows you to change the colour of your blog title (maybe another colour would be more visible). Or you can edit the HTML of your template, which allows you to edit the CSS or the HTML of the site, so you could move the title down, or give it a white background like this:
I can’t tell you exactly where to do those things because I’m not entirely sure what the template code looks like, but there might be a part of your template that looks like
<h1 class="title" style="background: transparent; border-width: 0px">and if so, changing “transparent” to “#fff” will make the heading background white.Thank you so much for your speedy reply. I really appreciate you taking the time to help, even though you don’t use Blogger anymore. I am HTML/CSS illiterate! I spent a long time trying to work on it and this is the best I came up with, but I still am not crazy about it. Although I prefer other locations for the title on the picture, there are too many colors in the background to find a suitable color. I couldn’t figure out how to do as you showed in the picture. I ended up placing the text over the elephant as that’s the darkest point, but not sure if it takes away from the picture and/or the text color fits. I’d very much appreciate if you could check it out and offer any advice or design criticism. Thanks again!
The CSS looks like this (don’t know if this helps you at all)
.Header h1 {
margin:0 0 .25em;
color:$titlecolor;
font: $pagetitlefont; font-variant: small-caps ;
text-align: right;
position: absolute;
bottom: 40px;
right: 84px;
width: 100%;
height: 18px
;
}
Andrea — I think what you’ve done is a lot more readable I don’t think it detracts from the image.
If you wanted to do what I showed in my screenshot, the CSS would be something like:
.Header h1 { margin: 0 0 .25em; color: #000; font: $pagetitlefont; font-variant: small-caps; text-align: right; width: 100%; background:#fff !important; }