CSS Custom Headers

2 February 2009 in Tutorials

tagged with , , , , ,

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.

kristarella.com Header

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.

Anxiety Panic & Health Header

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.

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:
Simon Preacher Header

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:

The Firke Files Header

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!

{ 6 trackbacks }

A Collection of Thesis Theme Reviews — rikin on the web
16 February 2009 at 10:04
links for 2009-03-27 | girliegeek
27 March 2009 at 18:02
Hello world! —Sugaree sclark-projects.com
26 June 2009 at 06:14
List of Wordpress Thesis Theme Tutorials, Tips and Hacks - EzyBlogger
25 July 2009 at 03:02
List of Wordpress Thesis Theme Tutorials, Tips and Hacks | Choose 4 Me
2 August 2009 at 16:12
Page Specific Headers in Thesis — Thesis Press Visual Guides
2 September 2009 at 00:09

{ 69 comments… read them below or add one }

1 andrew 3 February 2009 at 08:44

This is awesome, thanks. And so is your use of the word “reckon.”

2 Kim 3 February 2009 at 08:57

Most excellent. I now can make headers. And Andrew’s post forced me to go back and find ‘reckon’. ; )

3 Missy 3 February 2009 at 08:59

I plan to get the Thesis soon and will want to sport a groovy header. These are awesome tuts. Am saving this for future ref. Thx a billion!!!

Missy.

4 Paul Gilster 3 February 2009 at 10:07

Helpful indeed! One question: Having set up a header background while keeping the title text, as in your last example above, how do I move the text to center it? My title appears flush left. Thanks for any help on this.

Paul

5 kristarella 3 February 2009 at 10:17

Paul — Good question. I didn’t address any of the extra styling, but hoped people would ask if needed. Try .custom #header {text-align:center;}.

6 Paul Gilster 4 February 2009 at 12:40

Many thanks! Will give this a go.

Paul

7 Amy 4 February 2009 at 17:30

This is great and is working. However, there is an indent that makes my header graphic off-centered at top. How do I lose that extra indent? (http://www.mindylockard.com/blog)

8 kristarella 4 February 2009 at 18:18

Andrew — glad you liked the post! I guess the use of “reckon” is a bit Australian: good to add a bit of flavour in my writing. ;-)

Kim — hope you weren’t looking too long since it was right at the end!

Missy — there will be more, so make sure you come back when you need to find some Thesis help!

Amy — I can’t really see the problem that you’re talking about, unless it’s off-centre by one pixel, in which case you might need the image to be 959px wide. Did you figure it out already?

9 Paul Gilster 5 February 2009 at 07:22

kristarella, what about vertical movement? My title and tagline are now centered but my title is at the very top of my header image, while my tagline is at the very bottom. I’d like to bring them into the middle somewhere. Can you tell me if there is a list of the functions I can use to move the text around? Thanks!

10 kristarella 5 February 2009 at 10:28

Paul — You can give w3 Schools CSS a go for finding the things you need, but I don’t know how helpful it will be because certain attributes apply to all elements on the page, not just text. For what you’re trying to do I would suggest giving the title padding at the top. That could push the tagline down further though. So, you might want to use Firebug to see if there’s any padding or margins you should remove.

11 Paul Gilster 5 February 2009 at 11:58

Excellent thought, Kristarella. Thanks so much — I’ll play around with the padding idea. And thanks to you, I downloaded Firebug today. Appreciated your pointer to it!

12 dinu 28 February 2009 at 14:27

thanks for the tutorial :) I will try it out
btw, where did you get these background images from,I love that one with red and black .. did you design them ? or is it from any other source ? can I use it ?

13 kristarella 28 February 2009 at 17:09

dinu, I got the textures from BittBox. I placed the images over a black background and set the layer to screen, overlay, dodge or burn, or whatever layer style I liked best.

14 Digg the beginners guide 2 March 2009 at 09:21

Thanks a ton…
It is easy…
I’m waiting for your post on footer

15 kristarella 2 March 2009 at 09:34

Den — I have done one tutorial on footers, but not a round up like this one.

p.s. I would prefer you use something resembling a name when commenting. Thanks! Draws to my attention that my comment policy isn’t linked to near the commenting area, so I won’t edit you name this time.

16 Jeremy LeRay 5 March 2009 at 13:19

I always thought of “reckon” as a “Southern” expression. I am in North Carolina, but you can’t get much more southern than you guys. I enjoy your site and tweets. Thanks!

17 Sampson 31 March 2009 at 21:34

Thanks

18 Benjamin Ficker 27 April 2009 at 16:02

Hey, I’m trying to add the click-able logo like your simonpreacher.com/blog example. You can see my site here: http://www.thephoenixrealestateguide.com
The image I am trying to use as my header is here: http://thephoenixrealestategui.....er-pic.jpg
My custom.css code looks like this: .custom #logo a { display:block; height:215px; width:960px; background:url(wp-content/uploads/phoenix-header-pic.jpg) center no-repeat; text-indent:-9999px; }
I tried changing the background:url part to the direct url, but no dice. Any hlp would be greatly appreciated. Thanks.

19 kristarella 29 April 2009 at 11:39

Benjamin, sorry, your comment got caught by Akismet because of the links… try the following for the CSS
.custom #logo a { display:block; height:215px; width:960px; background:url(/wp-content/uploads/phoenix-header-pic.jpg) center no-repeat; text-indent:-9999px; }

20 Benjamin Ficker 30 April 2009 at 13:28

Awesome how I can struggle for hours and never notice a missing /. Thanks for your help.

21 Jenna 2 May 2009 at 06:57

Hi Kristarella–This is a great tutorial. I’ll get it in time. Because I don’t understand the css structure or what elements Thesis provides internal, I have been struggling to add additional text or text box to my header and position it, while still maintaining the logo and tagline.

I’m sure I could extrapolate from what you’ve done here if I wasn’t such a noob. Could you help me figure out how to add a new class for some text I want to position close to the bottom right of the header?? I’ve wasted a lot of time on it and am getting nowhere except frutstrated. Sorry for my ignorance, but glad you are a resource for me to educate myself over time.

22 Jenna 2 May 2009 at 13:32

Well, I was able to ad a whole new section definition and use the sidebar class like you do in your footer tutorial, in order to keep continuity with the look of the site. It’s may not be the best, but I’ve managed to get a welcome block of text inside my header, as I wanted. My test folder is at http://www.ichallengeme.com/Testblog.

23 kristarella 2 May 2009 at 14:20

Jenna — to add new stuff to the header you need to use a hook. The only thing CSS will have to do with it is positioning.
In custom_functions.php

function header_stuff() {
	echo '<p id="in_header">This is some extra text for the header</p>';
}
add_action('thesis_hook_after_title','header_stuff');

In custom.css

.custom #header {position:relative;}
.custom #header #in_header {width:200px; position:absolute; bottom:0; right:0;}

(Didn’t see your most recent comment before posting this, but hopefully this CSS will be useful anyway.)

24 brenda 14 May 2009 at 05:23

Hello!
This is awesome! Love this! But question. I am playing around with putting a pic in my header, but then depending on the pic I need to change the color of the font of my title (White font might work better on a blue header background than black). How do I do this? Thanks! :)

brenda

25 brenda 14 May 2009 at 05:26

Also, how do I vertically center or move down my title?

26 Susan 10 July 2009 at 01:40

Hi Kristarella–How do I get the RSS feed exactly like The Firke Flies on the bottom right using a custom header image?
My CSS code is:
.custom #header {
height:110px;
background: url(images/header.png) no-repeat;
border-bottom: 2px solid #333;
width: 890px;
position: relative;
left: -20px;
}

Thanks

27 kristarella 10 July 2009 at 10:39

Susan — it looks like The Firke Files is actually using the normal RSS tab in the nav bar, without the border styling that is around the other nav tabs. So, you would just need to select the option to show the subscribe link in the nav.

Alternatively, if your nav isn’t in the same place you could use something like the following in custom_functions.php,

function rss_link() {
	echo '<p class="rss"><a href="' . thesis_feed_url() . '">Subscribe</a></p>';
}
add_action('thesis_hook_after_title','rss_link');

The main bit of CSS you’d need to go with that is .custom #header p.rss {position:absolute; right:0; bottom:0;}, but you may need more to add the rss icon and tweak it all to your liking.

28 Susan 10 July 2009 at 11:14

Thanks for the code! It’s always exciting to see the results.

The subscribe is in the right place now (bottom left of header). Where do I find the code to customize the “subscribe” font and add the icon (the subscribe and icon are already on my site, they are just in the wrong place, so I want to customize the new Subscribe to look the same)

29 kristarella 10 July 2009 at 12:05

Brenda — sorry for the delayed response, not sure how your questions fell through the cracks. In case you or anyone else are still wondering:
Change title colour with .custom #header #logo a {color:#f00;}
Vertically positioning stuff is a matter of trial and error as CSS doesn’t quite calculate it the same way as horizontal dimensions. Use .custom #header #logo {margin-top:2em;} and play with the number until it looks right.

30 John O. 28 August 2009 at 02:40

Kristarella,
I have my Home page graphic in place, but it shows on each subsequent page (About, Contact, etc.). What I am asking is how can I change out the header graphic for each page?

Thank you!

31 kristarella 28 August 2009 at 10:34

John — you can use the classes assigned to the body of each page (if each page you want to change has a body class). For example, the About page would use .about #header {relevant styles} instead of .custom #header {relevant styles}. You can right click on your page and view the source code to see what the unique class for the current page is.

If there are pages that don’t have a unique class assigned to the body you can use a function to filter the body class, in conjunction with conditional tags to assign relevant classes to the pages you want to add a different header to.

Or you can use a non-CSS method with conditional tags to add different images to page headers.

32 John O. 28 August 2009 at 11:19

You have to forgive me Kristarella, I am a total newbie to all of this, especially PHP. Is there a step-by-step process you can send me for doing this? I’ve been beating my brain trying to figure this all out, and have tried several methods that have failed, so any help would be greatly appreciated.

Thank you!

John

33 kristarella 28 August 2009 at 18:20

Hey John, you inspired me to write a post about it. Hope it’s helpful.
http://www.kristarella.com/200.....in-thesis/

34 Ignacio 9 September 2009 at 10:03

I’m building a blogsite for my wife – I’m not a techkie (not even close – I haven’t even heard of “css” until a couple of weeks ago), but I’m a quick learner… Anyway, I used the code below to build a custom banner using Thesis. When I look at the site using Firefox it looks ok; using Opera it looks bad; and using IE8 it doesn’t even show. What did I do wrong? Thank you very much.

Added the following code to custom.css:
.custom #header { border-bottom:none;height:200px;padding-top:0;padding-bottom:0;background:url(http://www.howyouarematters.com/wp-content/themes/thesis/custom/images/banner1.jpg)center left no-repeat; }

35 kristarella 9 September 2009 at 10:09

Ignacio — try putting a space between the url and the position, i.e., banner1.jpg) center.

36 Ignacio 9 September 2009 at 13:22

It worked!!!
Many, many, many thanks.
Ignacio

37 John 16 September 2009 at 12:38

Hey, can the css in layoutstyle.css be changed using the custom style sheet, or only style.css?

(I’m talking about the thesis theme)

Thanks,
John

38 kristarella 16 September 2009 at 15:38

John — Yes, custom.css overrides both styles.css and layout.css.

39 Ellie Walsh 10 October 2009 at 10:27

Hi Kristarella…

I have a test site with a full width and nav bar with image –
I set this up awhile ago – and used info from you — It looks great in 1280×1024
but a horror in 1024×768 ?? It has a scroll – which I don’t want … and when you
do scroll – the header and nav bar are off ??

Site is here: http://elwalsh.com/special

Any ideas how to fix this?

Thanks for all your tutorials – Very Helpful!!
Ellie

40 kristarella 11 October 2009 at 09:45

Ellie — It’s not the header that is causing the scroll at 1024 wide, the whole site content adds up to more than 1024 (sidebars are huge): when putting widths in the Design Options you need to consider that there is also padding around those widths. 600px for content and 300px for sidebars is a good starting point if you want to fit within 1024px. Then you can experiment and see how wide you can get without exceeding 1024.

41 Ellie Walsh 11 October 2009 at 10:40

Ahhhh Kristarella You are Perfect!! I changed dimensions and everything is AOK!! I had some images I didn’t want to redesign – so there is a tiny scroll at 1024 but it really is irrelevant… I changed to body –
550 – sidebar 1 – 180 – sidebar 2 – 165 and everything is good now.. Big, Big Thanks to You!! I need to direct the dyi forum to this post!!

42 Adam 26 October 2009 at 08:41

Hi,
I’ve received a lot of help from your tutorials. I have constructed a clickable header as an image map. This apparently doesn’t sit well with IE. Ive been in the forums looking for help, but to no avail. Do yo uhave any tips on fixing this or how to construct a header with multiple clickable images that isn’t an image map?

Thanks again for all your great advice and willingness to share.

43 kristarella 26 October 2009 at 09:37

Adam — Do you have a live example I can view? If I can’t see the HTML/CSS involved I can’t say why IE would be disliking it or what would be a better solution.

44 Adam 26 October 2009 at 09:57

Sorry. I forgot to include that.

http://www.woodworkersjourney.com

Also do you need copies of CSS and PHP?

45 kristarella 26 October 2009 at 13:52

Adam — Ah ok, I looked at that site from your comment author info, but didn’t realise that was the header you were talking about. I’m afraid I have no idea what is wrong. It might help to apply z-indexes to the elements to make sure they stack the right way and I’m not sure it’s a good idea to have no content at all inside the links. However, changing those things didn’t have any effect when I tried it locally, but still something to play with I think.

46 Adam 27 October 2009 at 01:09

Yeah, I’ve stumped others with this. Forgive my ignorance I’m fairly new to coding, but what does it mean to have no content at all inside the links?

This little glitch has delayed the site launch for a while and I think the best thing to do right now is to drop the RSS/email image down into a sidebar widget and call it good.

BTW, do you have any info on creating headers with multiple clickable images without using an image map in case I do this again?

I can’t thank you enough for all your wonderful help!

47 kristarella 27 October 2009 at 08:24

Adam — To have no content in the links means that you have something that looks like <a href="http://www.example.com"></a> whereas a link should normally contain text or an image <a href="http://www.example.com">Check me out!</a>.

You could change from an image map to links containing images and see if it works. You would only need to cut up the header image and put it inside the links you already have there. If that doesn’t work there is something else rather wrong with IE and it’s probably worth finding.

p.s. Where did you get instructions for making an image map with an unordered list?

48 Adam 27 October 2009 at 12:52

Well, I got it from Thesis Hacker. (here’s the link: http://www.thesishacker.com/ho.....ap-header)

So, what does it do to have a link contain text as in your example? Check me out!.

And are there tutorials for changing the image map to links containing images?

49 kristarella 27 October 2009 at 14:12

Adam — Ok. I was just curious about the image map tutorial because I’ve never read a tutorial on it, but using an unordered list wouldn’t be my first choice of elements to use. No reason that I can see that you shouldn’t use a list though.

Generally an element (that is a div, or link, or list or list item etc) that doesn’t contain anything will, by default, have no size. So, it might not be enough to give it a width & height, you might also have to set display:block; on it, or something like that, to get it to display properly in some browsers. However, if the page were rendered without CSS for any reason (or read by a search engine robot), the element would then become meaningless because you can’t see the image that was supposed to be there and the element would have no size.

I don’t know that there are any tutorials for creating linked images. It is fairly simple XHTML. You can see a whole list of the XHTML element tags on the w3 Schools website, which is quite good for tutorials too. The one you want is the <img> tag. You would put it inside the links you already have and the CSS would almost be the same regarding positioning within the header.

Did you ask the author of the tutorial if he had experienced a similar problem with IE? It seems like it would be useful to know if he even tested it in IE, lots of tutorial authors don’t.

50 Adam 29 October 2009 at 04:58

Interestingly enough I check the author’s site in IE and his image map is broken!! Should hve done that in the first place!

Thanks so much for all of your help and info. I will rework things this weekend and see if that gets me where I need to be. You’re the best!!

51 Ginger Mudd 12 November 2009 at 03:02

I’m using your cappucino skin (thank you very much)…I want to put a tiny bit of line space between the Blog Title and the tagline because my tagline is long and it bumps right up against the blog title… I want to move the tagline down just a tad). How would I do that?
I’ve tried using

.custom #tagline

to set a margin or padding or border…with no impact what so ever.

Can you please tell me how to do that?

Thank you.

52 kristarella 12 November 2009 at 08:19

Ginger Mudd — There is a line in the custom.css file that says .custom #header #tagline {text-align:right; position:absolute; bottom:1em; right:0;} If you change bottom:1em; to bottom:0.5em; or bottom:0.25em; it should be ok.

53 Martin 20 November 2009 at 20:00

hello Kristarella … thanks for wonderful tips it helped me so much , I have a small problem may be you can help me I can’t change the color of the logo ( title ) on the header i used .custom #header #logo a {color:#f00;} what you mentioned before but it do nothing :( ,.

54 kristarella 20 November 2009 at 21:10

Martin — If you’re using Thesis 1.6, the best thing is to change the Header colour in the Design Options.
I can’t see that line of code in your custom.css though, I only see .custom #header #logo {!important; color: #E9AB17; margin-top:1em;} (that !important; is not doing anything, just so you know). If you change it to .custom #header #logo a {color: #E9AB17; margin-top:1em;} it should work.

55 niceyfemme 23 November 2009 at 20:00

hello there! i can see youre good at this.. and i am your opposite… can i please ask for some help? my blogsite’s design(?) got messed up… the header and sidebar are now found at the bottom of the page… i was trying to paste a google adsense code then i deleted it then it looked that way…..

i was also trying to transfer the left sidebar to right for those people with no widescreen i wonder how?

please help? i would so appreciate this/…. thank you………

56 kristarella 27 November 2009 at 11:00

niceyfemme — If it’s related to the link you left when making a comment: those things look fine to me now. If it’s Thesis related, the best thing is to ask the forum at DIYthemes.

57 Ani 31 December 2009 at 17:33

Thanks a ton… It is easy… you were a great help. Thanks again.

58 Ernie 2 January 2010 at 08:53

Hi Kristarella, I’ve looked at your site before, and you were one of the contributing factors with my decision to go with Thesis. In any case, if you look at my site (www.ndisb.com), you will see what looks like a clickable header image. While I have succeeded in removing the link on the entire image to my home page, I am at a loss as to where to put the code for my image map. I have already mapped the image, I just don’t know where to put the code. Thanks for your help.

59 kristarella 3 January 2010 at 10:04

Ernie — The HTML for the image map should go in custom_functions.php. Have a look at the DIYthemes article on hooks and also this other good hooks guide for how to wrap the HTML in a function and insert it in the header.

60 Ernie 6 January 2010 at 04:16

Since I don’t work with code often, I had to play with things a bit, but thanks to you, I was able to get my image map working on my site. Thanks!

61 Lee 7 January 2010 at 03:14

Hi Kristarella,

Thank you so much for your great tutorials and your follow up comments. Eons ago, I knew HTML inside out and backwards, but got out of webpage design just as CSS was making a splash. I’m trying to add a photo to the right side of my header.

I used the code you provided from the Firke entry. Specifically
.custom #header {text-align:left; height:155px; background:transparent url(images/header.png) right right no-repeat; }
The header expands to make room for the image, but the image does not show, in any browser (FF, Chrome for Mac or Safari).

Given my history with past programming, I’m sure I’ve missed at bracket or a ;. but I’ll be darned if I can find it.

The site is thisnhlife.com

Thanks for any input.

Lee

62 kristarella 8 January 2010 at 23:38

Lee — Looks like you have it fixed?

63 Lee 12 January 2010 at 02:01

Yes, thanks sorry it took so long to get back. It was a rookie coding mistake (relative path when the photo was in a different folder DUH!). Thanks! Great site. Now I’m going in search of your footer tutorial.

64 Justin 17 January 2010 at 11:01

I’ve been looking at Thesis for awhile and I think I’m set. With your explanation, I like my options, but the flash header I have is doing to be interesting to try to integrate into Thesis properly. Things that make you go hm..

Good write up though, always like people that describe neat ways to do things. Keep up the good work!

65 kristarella 17 January 2010 at 11:16

Justin — These headers are all CSS only methods, but you should be able to integrate your flash header very simply by using custom_functions.php instead of CSS.

function my_custom_header() {
?>
FLASH EMBED HERE
<?php
}
remove_action('thesis_hook_header','thesis_default_header');
add_action('thesis_hook_header','my_custom_header');
66 Justin 17 January 2010 at 11:18

Very cool. I figured it would be a custom hook, but didn’t think it’d be that easy. Thanks!

67 Peter 31 January 2010 at 23:30

Thank you! I’ll have been browsing and surfing for hours, trying different things to get my swf header up, but been unsuccessful until now :D

Your tiny little piece of code for a custom function just worked! Ok, I’ll admit I am still trying to get my swf to line up in a sensible way, any hint on that ? At present it is showing a bit under! my navbar and aligning (even though it is the full width of my page (using full width framwork)) to much to the right.

68 kristarella 2 February 2010 at 14:54

Peter — Without seeing the problem I have no idea what might be causing misalignment, possibly padding in the header.

69 Peter 2 February 2010 at 18:10

Yeah, I understand, sorry but I cannot post a link to my dev site. But after fiddeling around at random with the swf size settings (in both the html embed code and the custom css I got it to work!) I’ve got to retrace my steps at some point to understand what I did :) Right now, I have no clue as to which setting did what, they seem to override each other in strange ways.

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Want to show PHP or XHTML code in your comment? Encode it first so that WordPress doesn't strip it away.

Read the comment policy.

Previous post:

Next post: