• Skip to primary navigation
  • Skip to main content
  • Skip to footer
  • Home
  • About
  • My Blogs
    • Photoblog
    • Knots
    • WP.com tips
kristarella.com

kristarella.com

Happiness Engineer at Automattic, lover of knitting, crochet, sci-fi and more

  • Presentations
  • Plugins
    • Exifography
  • Contact
You are here: Home / Blogging / CSS Custom Headers

CSS Custom Headers

2 February 2009 by kristarella

Contents
  1. Full-width headers
  2. Clickable headers
  3. Replacing the title with a logo
  4. Creating a header background & keeping the title text

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.

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:
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!

Share this:

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X
  • Click to share on Pocket (Opens in new window) Pocket

Like this:

Like Loading...

Related

Filed Under: Blogging, Design, Graphics, Thesis, Tutorials Tagged With: CSS

Reader Interactions

Comments

  1. andrew says

    3 February 2009 at 08:44

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

  2. Kim says

    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 says

    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 says

    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 says

    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 says

    4 February 2009 at 12:40

    Many thanks! Will give this a go.

    Paul

  7. Amy says

    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 says

    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 says

    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 says

    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 says

    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 says

    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 says

    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 says

    2 March 2009 at 09:21

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

  15. kristarella says

    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 says

    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 says

    31 March 2009 at 21:34

    Thanks

  18. Benjamin Ficker says

    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 says

    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 says

    30 April 2009 at 13:28

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

  21. Jenna says

    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 says

    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 says

    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 says

    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 says

    14 May 2009 at 05:26

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

  26. Susan says

    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 says

    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 says

    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 says

    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. says

    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 says

    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. says

    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 says

    28 August 2009 at 18:20

    Hey John, you inspired me to write a post about it. Hope it’s helpful.
    https:\/\/”www.”kristarella.com/2009/08/page-specific-headers-in-thesis/

  34. Ignacio says

    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.co.....anner1.jpg)center left no-repeat; }

  35. kristarella says

    9 September 2009 at 10:09

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

  36. Ignacio says

    9 September 2009 at 13:22

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

  37. John says

    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 says

    16 September 2009 at 15:38

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

  39. Ellie Walsh says

    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 says

    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 says

    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 says

    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 says

    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 says

    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 says

    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 says

    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 says

    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 says

    27 October 2009 at 12:52

    Well, I got it from Thesis Hacker. (here’s the link: http://www.thesishacker.com/ho.....map-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 says

    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 says

    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 says

    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 says

    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 says

    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 says

    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 says

    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 says

    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 says

    31 December 2009 at 17:33

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

  58. Ernie says

    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 says

    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 says

    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 says

    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 says

    8 January 2010 at 23:38

    Lee — Looks like you have it fixed?

  63. Lee says

    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 says

    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 says

    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 says

    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 says

    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 😀

    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 says

    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 says

    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.

  70. Dave says

    3 March 2010 at 12:18

    Thanks for the help! This site is a great resource…

    Odd question–is there a way to use the clickable header to link somewhere besides “home”? Is it possible to link outside of yr site?
    thanks

  71. kristarella says

    3 March 2010 at 12:26

    Dave — It’s possible, but not using CSS. I.e., you wouldn’t bother with the CSS image replacement method if you want to do that. You would replace the contents of the header using something like the following in custom_functions.php.

    function custom_header() {
    ?>
    <a href="EXTERNAL LINK HERE"><img src="<?php echo THESIS_CUSTOM_FOLDER; ?>/images/header.jpg" alt="TEXT INCASE IMAGE DOESN'T SHOW" /></a>
    <?php
    }
    remove_action('thesis_hook_header','thesis_default_header');
    add_action('thesis_hook_header','custom_header');

    You would need to be pretty clear as to where it was linking as I think most people expect the header to link to the home page of the current site.

  72. Whatley says

    8 March 2010 at 10:54

    I’m trying to add an iframe header to my site this is what i have Here is the target for the iframe:

    http://www.uberrealty.com/main.mvc/embeddedsearch

    Code is:

    It should look like this header http://accessc21ri.com/

  73. kristarella says

    8 March 2010 at 11:16

    Whatley — iframes are not related to CSS headers (see comment above for the code similar to what you would need in custom_functions.php). You need to encode your HTML before commenting if you want me to see it (link below the comment box). Without seeing your code or knowing what the issue is, I can’t say much more than that.

  74. Whatley says

    11 March 2010 at 04:16

    Is this what you mean Here is the target for the iframe:http://www.uberrealty.com/main.....searchCode is:<iframe width="100%" height="100" frameborder="0" scrolling="no" src="http://www.uberrealty.com/main.....ch&gt; </iframe>

  75. kristarella says

    11 March 2010 at 08:25

    Whatley — Yes, so try

    function custom_header() {
    ?>
    <iframe width="100%" height="100" frameborder="0" scrolling="no" src="http://www.uberrealty.com/main.mvc/embeddedsearch>
    <?php
    }
    add_action('thesis_hook_header','custom_header');

    You’ll probably need to float or position it to the right with CSS when it’s showing up.

  76. Whatley says

    11 March 2010 at 09:16

    thank you , if you come to he gulf coast I will cook you what ever you want.

  77. Whatley says

    15 March 2010 at 06:52

    Thanks for the help but i keep doing something wrong it crashes the whole page.

  78. kristarella says

    15 March 2010 at 08:09

    Whatley — your code was missing a quote and mine was missing </iframe>. This this:

    function custom_header() {
    ?>
    <iframe width="100%" height="100" frameborder="0" scrolling="no" src="http://www.uberrealty.com/main.mvc/embeddedsearch"></iframe>
    <?php
    }
    add_action('thesis_hook_header','custom_header');
  79. Whatley says

    15 March 2010 at 08:33

    Thanks, I like the new pic, but other was funny.

  80. eslam melegy says

    18 March 2010 at 05:57

    I like this post very much , but I also want to add text links at the header and centering all the header data like blog title tag line and the text links
    please waiting foe your replay

  81. kristarella says

    18 March 2010 at 07:08

    eslam — .custom #header {text-align:center;}

  82. John says

    20 March 2010 at 11:22

    Ok, I have a question about this.

    I’m need to remove a line of code from layout.css. Originially I just modified it with custom.css to be what I want, but now that I’m adding bits to my site it would be better if I just didn’t specify it at all. So for example, in my custom.css I have:

    .custom .format_text input, #commentform input, #commentform textarea { width: 20px; padding: 0.214em; border-width: 0.071em 0.071em 0.071em 0.071em; }

    The width is originally 45% but now its 20px, but I’ve decided that I want to remove it all together. But when I remove it from custom.css it just reverts back to the 45% from the original layout.css. How do I tell it to not call it at all? Or do I just have to remove it from layout.css?

    Thanks,
    John

  83. kristarella says

    20 March 2010 at 22:00

    John — There is no point deleting it from layout.css because it gets rewritten when the design options are saved again. What are you using this CSS for and why do you want to get rid of it? If I understand the reason perhaps I can suggest another solution.

  84. John says

    22 March 2010 at 05:47

    Well, when I create a web form, the 45% seems to dictate the size of both the text boxes and the “submit” button. I was able to change this and then manually dictate the size of the text boxes and submit button in my code.

    But now I have infusionsoft which creates my webforms for me, but niether the 45% or the 20px cut it. The submit button is huge. In firebug, when I simply get rid of the “width” component all together, everything defaults really nicely.

    Hope this helps,
    Thanks.
    John

  85. Troy says

    22 March 2010 at 07:06

    Works great! Thanks!

  86. kristarella says

    22 March 2010 at 09:17

    John — It might make a difference to just use .custom .format_text input, .custom #commentform input, .custom #commentform textarea {width:auto;}. It’s hard to know without testing it in different cases since it depends what code and CSS the form uses too.

    Quite frankly I would rather the blanket form styles were not in there as well, but I still think there’s no point trying to delete anything from layout.css as it will get rewritten when the design options are changed. More reliable to continue to override the styles.

    If that doesn’t work for that form, I don’t think I could suggest any other options without seeing it in action.

  87. John says

    22 March 2010 at 16:17

    Sweet! that worked.

    Thanks,
    John

  88. eslam melegy says

    23 March 2010 at 00:41

    thank you very much , It works great

  89. Joshua says

    27 March 2010 at 02:11

    Hi Krista, I am working on header. I am wondering how can I make header image auto re-sizable based on the header size. Is there a way to do that?

  90. kristarella says

    27 March 2010 at 11:04

    Joshua — If you create one image at the largest size you’ll need it and insert it as HTML using the hook method (like in comment 71), rather than CSS image replacement then you can set the width to “100%” and height to “auto”. It will be the size of the header, whatever size that happens to be.

  91. Mike says

    29 March 2010 at 03:58

    Kristarella,
    Your tutorials have been exceptionally helpful and I’m blown away by the level of dedication you have to answering the questions… You’re really a rare breed of bloggers.

    Of course, now, I have my own questions. I’m getting a border of background color above and below my header image (which is full width, and has a repeating gradient next to it). I’ve got the settings in the Thesis options turned to 0.0 for the top padding… but can’t quite figure out why it’s adding up there.

    http://www.yourcampusconnections.com/worcester/

    There’s the link, I’m still really working on the page so there’s a chance that I could figure it out by the time you answer, but if not, I really appreciate the help. The page is changing pretty often… And I just started it yesterday so, it should look very rough around the edges.

    Thanks again,
    Mike

  92. Mike says

    29 March 2010 at 04:35

    I should have logged in so that I can edit that comment: but I should add.

    It seems like the image is repeating on the top and the bottom of it… the header area is set to 300px and the image itself is 300px tall… so I’m not sure why there is that ~10 pixel of repeating area at the top, and 10px at the bottom. Lemme copy out my custom.css (almost identical to what you’ve provided, with a few changes):

    .custom #header_area {background:url(--path--/images/HeaderRepeat.gif) left repeat;}
    .custom #header_area .page {background:transparent;}
    .custom #header {border-bottom:0; border-top:0;}

    .custom #logo a { display:block; height:300px; width:960px; background:url(--path--/images/BannerTurtleBoy.png) center no-repeat; text-indent:-9999px; border:none;}

    (I cut out the path because my URL is going to change soon)

  93. Mike says

    29 March 2010 at 04:54

    Aaah, I got it. Sorry to waste your time if you did.

    Here’s the deal, with the #logo image replacement technique, it still maintains the header padding set by default in the layout.css file which is:

    #header { padding-top: 2.2em; padding-bottom: 2.2em; }

    So, I added this line to my custom.css:

    .custom #header { padding-top: 0em; padding-bottom: 0em; }

    And voila. The issue with the “Extra space” was being caused by the header logo, 300px in height, being shoved down 2.2em and the page being shoved down 2.2em… so the repeating image making the background:url of the header_area was compensating for that 4.4em of total extra space. Removed the padding, removed the extra space… made everything flush.

    Thanks for these tuts, they’ve been very helpful!

  94. kristarella says

    29 March 2010 at 08:05

    Mike — I was asleep for your whole CSS battle 😉 Glad you found the solution.

  95. Sean says

    17 April 2010 at 08:34

    Great Tutorial!

    I’m having issues with http://slowmack.com header. I need page padding for readability, but the header image is cropping and making it too narrow…I’m stuck.

    I’m sure this is an easy one, too.

    Thanks for the help.

    Sean

  96. kristarella says

    17 April 2010 at 13:06

    Sean — If you apply the background image to .custom #header_area .page instead of #header it will take up that whole area properly (if it’s the right size to).

  97. zim says

    21 April 2010 at 10:18

    After the #logo, what is the “a” for in this code:

    .custom #logo a { disp…

    Thanks, Z

  98. kristarella says

    21 April 2010 at 10:23

    zim — An a refers to a link, or more formally, an anchor tag.

  99. Mezzo says

    24 May 2010 at 11:31

    Hi Kristarella. Great information. I am new to WP, Thesis, and CSS. I put a custom header on my site and want to use both the custom header and the text header and tagline from Thesis. I need to change the top margin for the text and not for the custom header. I tried the things you mentioned above, but both things moved. I need only the text to move down to be in the white area.

    I am also trying to put a custom footer on my page. i will continue to research this. If when you view my website, you don’t see a picture there, then I still need direction on that as well. Thanks for your help.

  100. Mezzo says

    24 May 2010 at 11:35

    I apologize, I forgot to ask, how to I create a wrap around effect? On your footer page, the sprig coming out of the soil seems to wrap around so that the content can be close to the footer (ignoring the white space). how can I do this with both my header and footer? Thanks.

  101. kristarella says

    24 May 2010 at 14:56

    Mezzo — For your header alignment, try adding .custom #header #logo {padding-top:120px;} to your CSS to push the title down. Then you’ll need to change the colour in the Design Options so that it is not white on white.

    Check out my full-width framework video. You’ll need the full-width framework to get headers and footers that span the whole browser. And my Thesis footers post will give you a bit of info about adding content to your footer, if needed, but you already have the background image happening there.

  102. Mezzo says

    24 May 2010 at 15:28

    Thank you very much. I was looking for this info for two days. Blessings.

  103. Rhonda Mason says

    27 May 2010 at 19:36

    Hi Kristarella,

    Thank you for your great blog and for your willingness and the time you put into answering everybody’s questions!

    Before coming across this post of yours, I found another tutorial site which helped me get my custom header up and running. It looks perfect on Safari but I checked it on IE8 today and not only is my header invisible, but my nav bar has also been pushed back to the left (I had right-aligned it, and it looks perfect on Safari).

    Can you shed any light? URL is http://www.pinkronnie.com

    Thanks,
    Rhonda

  104. kristarella says

    28 May 2010 at 10:44

    Rhonda — To get a nav to properly go to the right in IE you need to use the method in my nav positioning post, or even if using float:right; you probably need to add width:auto; to the styles for .custom .menu and add the line .custom ul.menu li.rss {float:left;}, reasons are mentioned in that post.

    From my experiment just now, fixing the nav will fix the title in IE8.

  105. Rhonda Mason says

    29 May 2010 at 16:41

    Thanks Kristanella.

    I added width:auto; and also the extra line to the .custom .menu, which seems to have fixed the right alignment.

    However, the logo header is still missing from IE7 and IE8, though it is visible in IE6…

    Thanks,
    Rhonda

  106. kristarella says

    31 May 2010 at 10:55

    Rhonda — Try removing float:left; from the header title link.

    p.s. I really like your site design!

  107. Rhonda Mason says

    1 June 2010 at 19:11

    Hi Kristanella,

    I managed to fix it by using your coding for replacing the title with a logo – which I should’ve done from the start!

    And thank you, I’m really glad you like my site design. I wanted to keep it as minimalist as possible, to draw the focus on the content.

    So now onto the fun part – actually blogging!

    I will be sure to come back to read your other tutorials.

    Thanks again,
    Rhonda

  108. Bruno says

    14 July 2010 at 05:32

    I see many examples on many sites showing how to replace the header with a user header or a title like in the code shown above :
    .custom #logo a { display:block; height:150px; width:300px; background:url(images/logo.png) center no-repeat; text-indent:-9999px; }

    and the same for header :
    .custom #header_area, etc etc

    Why is it necessary to add the word “.custom” at the beginning? All the sites I see, including this one, tell you to just write it without explaining this mysterious .custom at the beginning. Is there anyone who knows what this .custom is and why does it have to be appended at the beginning of headers, logos, navigation fields, etc.
    Thank you.

  109. kristarella says

    14 July 2010 at 17:30

    Bruno — The .custom has to do with CSS specificity. “custom” is a class applied to the body of the HTML generated by Thesis and the more IDs or classes you have in your CSS makes it more specific (i.e., will be prioritised over other CSS declarations that could apply to that element as well). By adding the custom class to our CSS makes it more specific than the CSS in the Thesis stylesheets, allowing us to override default styles. It won’t always be necessary to use it (when there’s no style for an element already, it doesn’t need to be overridden), but getting into the habit of using it is easier than figuring out if it’s needed every time. I’ve written a more detailed post about that for DIYthemes. Hopefully they’ll publish it soon!

  110. mohdisa says

    7 August 2010 at 02:55

    hello, can u help me. i want centered my logo, i has try to many time, but still cannot. this my coding.

    .custom #logo {background-image: url(‘myimage’); background-repeat: no-repeat; width: 800px; height: 80px; text-indent: -9999px; }
    .custom #logo a {width: 800px; height: 80px; display: block; outline: none;}

  111. kristarella says

    9 August 2010 at 12:30

    Mohdisa — The CSS in the post probably would have done the trick. You need to add a background-position property to your CSS. You you can use the shortened version of the background CSS, including the background-position.

    .custom #logo {background: url('myimage') center center no-repeat; width: 800px; height: 80px; text-indent: -9999px; }
  112. Dave Knadler says

    4 October 2010 at 05:16

    Hey K.,

    I promise this will be my last question. Can you look at this site: http://mendingplace.org/ and explain why my custom logo isn’t appearing?

    It works fine on my localhost, so I copied the code and changed the paths, but now the logo doesn’t appear. Firebug doesn’t even show a box for the logo. What bonehead mistake have I made now?

    Many thanks,

    Dave

  113. Dave Knadler says

    4 October 2010 at 06:09

    OK, I figured it out. Never mind. But this stuff isn’t exactly intuitive, is it?

    • kristarella says

      4 October 2010 at 10:15

      Dave,

      Glad you figured it out.

      Without knowing what the problem was I can’t comment on it too much, but no. I don’t think web and computer languages were designed to be intuitive, they’re something that need to be learned, just like human languages. It’s worked for many years, but now that everyone wants/needs a website quickly and sometimes cheaply, it can be a bit of a problem.

  114. Sean Denard says

    6 October 2010 at 13:56

    Hi Thanks for the tutorial I would like to add some rotating images to my header. I have no tbeen able to figure how to do it. Thanks

  115. kristarella says

    6 October 2010 at 14:01

    Sean — If you’re not already using the images in the rotator folder in the multimedia box, try this tutorial. Or if you mean rotating while the page is static try jQuery Cycle or SlideDeck WordPress plugin.

  116. sean denard says

    6 October 2010 at 15:04

    Thanks I have followed the tutorial but I have problem http://seandjdenard.com/ As you can see I have no image but also I would like the header to be WAY bigger any help Kristarella?

  117. kristarella says

    6 October 2010 at 15:09

    Sean — Don’t use spaces in your file names. That should pretty much fix it. You’ll need to crop images to the suitable size.

  118. Sean says

    7 October 2010 at 04:32

    Oh Kristarella I am getting sooo close thank you sooooo much but only problem is my images are not rotating on there own I new to refreash in order for them to do so? Boy am I happy I found you!!!

  119. kristarella says

    7 October 2010 at 09:09

    Sean — Yes, that technique only rotates on reload. To rotate continually (i.e., while the page is static) you need to use one of the other two methods.

  120. sean says

    7 October 2010 at 15:55

    Kristella I am a little discouraged again. I think I like the JQuery best but the installation and instructions are over my head a little can you point me in a direction that will help with the process?

  121. kristarella says

    7 October 2010 at 16:08

    Sean — I wrote out instructions for someone else in the forum, so check that out if you can. If you’re not using OpenHook as they were and can’t figure out how to translate it into code suitable for custom_functions.php let me know.

  122. kristarella says

    7 October 2010 at 16:10

    Sean — Actually I just realised those instructions were for jCarousel, not the cycle plugin, but the instructions are almost the same, so they might help you understand the cycle stuff.

  123. Vu says

    26 October 2010 at 02:53

    Hi Kristarella,

    Love the tut and appreciate you sharing your knowledge. I just have a simple problem that I hope you can help me with. If you have a look at my banner in my header it’s a bit to the right at the moment. How do I get it to be more centered? my site is http://onegrape.com

    Thanks

  124. Dave Knadler says

    26 October 2010 at 05:22

    I’ve had the same problem trying to use a one-piece full-width banner as opposed to a repeating tile in the full-width framework. The banner stubbornly aligns with the left of the content, but the repeating tile goes all the way across just fine. Would love to solve this problem, since I have a design for which a repeating tile doesn’t work.

  125. kristarella says

    26 October 2010 at 07:21

    Vu — You need to increase the size of #header_area .page, not just #header because the page element is still only the width of your content and centered on the page, making the header extend only to the right when you make it 1500px wide.

    Dave — I can’t give you any specific advise without a link, but hopefully the above observation fixes yours too.

  126. Dave Knadler says

    26 October 2010 at 07:37

    Ah. So a line in custom css, such as:

    .custom #header_area .page {width: 1500px}

    would resolve the problem in Vu’s case? That sounds like just what I need, too. I’m going to try it now. As I always, I so appreciate your quick and expert reply.

  127. Vu says

    26 October 2010 at 16:35

    Sweet! That worked 🙂

    Getting to understand CSS abit more now. Thanks so much for your help Kristarella. 🙂

  128. mark says

    15 November 2010 at 14:54

    Hi,

    Great post, and really valuable follow-up tips and troubleshooting in the comments!

    Some advice you gave to a commenter above put me on the right track to solving a problem I was having for a while…stacking elements by utilizing the z-axis in my header to inset a leaderboard ad.

    However, while it looks fine in Firefox and IE, the leaderboard ad displays *above* the header in Safari and Chrome, rather than "inside" of it. I searched for issues with z-axis and Webkit, but I think the problem might be poor coding by me somewhere in there. 😉 Would you mind taking a look?

    http://tinyurl.com/28lfmfq

    function add_header_image () {
    echo ‘<div id=topbanner>’;
    echo adrotate_banner(2,11);
    echo ‘</div>’;
    echo "<a href=\"http://www…/\" title=\"TITLE\" style=\"border:0px\">
    <img src=\"/wp-content/themes/thesis_16/custom/images/POV_header_tall1.jpg\" alt=\"TITLE\" style=\"position:relative; z-index:1; border:0px;\" /></a>";
    }
    add_action(‘thesis_hook_before_title’, ‘add_header_image’);

    I got the ad to inset by messing with the absolute/relative position and z-index.
    Here is the ad code that is inserted into AdRotate:

    <a href="http://www…"><object width="728" height="90">
    <param name="movie" value="/wp-content/themes/thesis_16/custom/images/10_UWY_02_Homewalk_728x90_06.swf">
    <embed src="/thesis_16/custom/images/10_UWY_02_Homewalk_728x90_06.swf" width="728" height="90" style="position:absolute; margin: 0px 126px 100px 126px; z-index:2;">
    </embed>
    </object></a>

    Thanks for any help!

  129. kristarella says

    15 November 2010 at 15:05

    Mark — I think you need the following CSS:

    .custom #header {position:relative;}
    .custom #topbanner {position:absolute; top:1em; right:1em;}
  130. mark says

    15 November 2010 at 15:36

    Thanks for the speedy reply, which came with the solution to my problem!

    Your CSS suggestion for #topbanner was key.
    I had to add z-index and margin to get it exactly right:

    .custom #header { position: relative; border-width: 0 0 1px; padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0; z-index: 1; }

    .custom #topbanner { position: absolute; margin: 0px 126px 100px 126px; z-index: 2; }

    Thanks again!!!

  131. jerel barnes says

    8 January 2011 at 11:10

    Hi,
    Great website and write up. I am a little confused on what I am doing wrong, I am placing this code here in my custom css and I am getting the white screen of death,

    .custom #header { height:150px; background:transparent url(images/header.png) center no-repeat; }

    Am i not using the right code? And also how do I go about styling and moving the text around? Thanks in advance.

    • kristarella says

      9 January 2011 at 11:16

      Jerel — changing CSS shouldn’t cause a white screen: that is normally a PHP error.

      You can style the text with the #logo, #logo a and #tagline selectors.

  132. Mezzo says

    10 January 2011 at 03:38

    Hi Kristarella. I have two websites with header/footer issues.

    1. http://www.healthyrelationshipsconference.com – the footer image is no longer visible since upgrading wp and thesis a little while ago. I have used the footer tool, but the image is no longer visible.
    2. http://www.hrclive.net – the header image and footer image are not visible. I used the header tool and input the image. It created the space for the image, but the image is not visible. Please assist. Thank you for your willingness to help us Thesis/WP newbies.

  133. jerel barnes says

    11 January 2011 at 03:33

    Hey,
    I figured out what I was doing wrong and fixed it. But if you check my site what I am trying to do is move the picture over to the left in order to eliminate all of that empty white space and make the text bigger. Can you please explain how I go about doing this.

  134. kristarella says

    13 January 2011 at 19:48

    Mezzo — Did you forget to copy over your custom folder with your images and CSS over to the new version of Thesis? Or did you delete some images from your upload folder? The header image for the second site no longer seems to be on the server.

    Jerel — In your CSS for #header, try changing background:url(...) center no-repeat; to background:url(...) left center no-repeat; padding-left:20em;
    That should get your where you want.

  135. Emma Robinson says

    27 January 2011 at 03:14

    Hello Kristarella

    I am wondering if you can help… I have a wordpress site based on the thesis theme 1.7. I have made a header with my own image, inserted using Thesis hooks. It shows fine in Firefox but does not display at all in Internet Explorer 8. Any ideas??? (I don’t have access to the custom file editor)
    best wishes
    Emma

  136. kristarella says

    8 February 2011 at 12:17

    Emma — I’m not sure why the image wouldn’t be showing, but IE is more sensitive to HTML errors than any other browser, so that could be the reason. If you can fix up someof the errors shown by the W3 Markup Validator it might fix things.

    Also, upgrading to Thesis 1.8 will fix the custom file editor errors with WordPress 3.0 and above.

  137. Emma says

    8 February 2011 at 18:50

    thanks Kristarella! I managed to fix the header problem but I have still have problems with IE8, so I will try the Markp Validator and upgrading to thesis 1.8.
    I discovered that IE8 did not recognise the header image as a jpeg, although it was a jpeg! It turned out the jpeg was in CMYK but when I changed it to RGB it was fine.
    IE8 is very strange… over the last week, my webpage has been showing left aligned in IE8 and today although I’ve made no changes it is now in the centre of the page as intended.

  138. GRIT & GLAMOUR says

    19 February 2011 at 02:28

    Your site is so helpful…but I’ve tried to figure this out and can’t. On my blog, can you tell me how on earth I can remove the grey line that appears above my header image? I’ve tried this and it didn’t seem to work:

    .custom .menu {border=bottom:0;}

    Thanks much!
    ~V

  139. kristarella says

    21 February 2011 at 10:09

    V — Try disabling the feature box in the design options; it doesn’t seem to have anything in it and it’s causing the border. If you are using it on other pages then try .custom #feature_box {border:0;}.

  140. GRIT & GLAMOUR says

    21 February 2011 at 14:25

    OMG…it WAS the feature box! Thank you so much for responding to my comment/question. That line was driving me crazy. You’re brilliant!

    ••V••
    http://www.gritandglamour.com
    @gritandglamour

  141. Ian says

    3 March 2011 at 08:49

    .custom #logo a { display:block; height:200px; width:757px; background:url(/wp-content/uploads/stephenson%20logo-final2.png) center no-repeat; text-indent:-9999px; }

    …No idea what I’m doing wrong

  142. kristarella says

    3 March 2011 at 10:34

    Ian — I would suggest that the CSS doesn’t like having a space in the filename of the image.

  143. Justine says

    16 March 2011 at 13:14

    Hi I am having difficulty getting a image to display for my header. I started following your tutorial at “full-width headers” for thesis 1.5″, and it worked fine for a plain background color, but I wanted an image. Aftre a couple hours reading comments here and at your other tutorial, I conclude I cannot understand the process. can you tell me if there is another tutorial for what I want to do? Or if i have missed steps, point the step out out to me?

    if you want to see the site, let me know i have a maintenance plug in up.

    So far this is what I have done:

    1.chose full width in the file design options
    2. inserted this code into custom.css file:

    .custom #header_area {background:transparent;}
    .custom #header_area .page {background:transparent;}
    .custom #header {border-bottom:0;}

    3. inserted this code for the nav menu in my custom_functions.php file:
    function full_width_nav() { ?>
    <div id="nav_area" class="full_width">
    <div class="page">
    <?php thesis_nav_menu(); ?>
    </div>
    </div>
    <?php }
    remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
    add_action(‘thesis_hook_before_content_area’, ‘full_width_nav’);

    The nav menu moved properly, and the header space is left transparent (page background color shows through). If I add a color to the “.custom #header_area” line it works to show that color.

    Because I wanted to use a header image rather than a plain color, I have tried to copy .css code other commenters here have used in the custom.css, but nothing I do works. Most recently I tried to modify the custom.css like this, again with no success:

    /*custom header */
    .custom #header_area {height:200px; width: 1080px; background:url(http://www.aligngeneralcounsel.....ader2.jpeg) center no-repeat;}
    .custom #header_area .page {background:transparent;}
    .custom #header {height:200px; width: 1080px; background: transparent border-bottom:0; border-top:0;}

    I am obviously missing a step or two and probably have totally messed up the custom.css code, can you help? How do I place an image in the header, in full width mode?

    (I use thesis 1.8, WP 3.1) thank you for helping me!

  144. kristarella says

    16 March 2011 at 15:17

    Justine — Don’t set a width for header_area; that will break the whole full-width thing. Also you’re missing a semi-colon after the header background CSS. Also, see this comment for more details on image headers.

  145. Justine says

    17 March 2011 at 13:03

    Wow you are fast! thank you for being so amazingly responsive. I made your corrections with the width and semi colon, and I checked comment 77 (on the other post) as recommended. From that I took away that I needed two things to make a header work in CSS:

    1. a repeating background image in #header_area. So I made a jpeg and used that;
    2. a custom logo.

    It did not work. My css code looks like this:

    /*custom header */
    .custom #header_area {height:200px; background:url(http://www.aligngeneralcounsel.....epeat.jpeg); repeat;}
    .custom #header_area .page {background:transparent;}
    .custom #header {height:200px; background:transparent; border-bottom:0; border-top:0;}
    /*customlogoheader*/

    .custom #logo a { display:block; height:200px; width:1070px; background:urlhttp://www.aligngeneralcounsel.com/wp-content/themes/thesis_18/thesis_18/custom/images/header2.jpeg); center no-repeat; text-indent:-9999px; }

    any ideas?

  146. asiapundits says

    28 April 2011 at 02:44

    Hi would you look at this.

    /* HEADER ZONE */

    .custom #header_area {background:url(http://www.asiapundits.com/ima.....header.png) center top no-repeat;}

    .custom #header_area .page {background:transparent; padding:0;}

    .custom #header {padding:0;}

    .custom #header #logo a {display:block; width:751px; height:166px; text-indent:-9999px;}

    /* NAVBAR ZONE */

    .custom #nav_area { background: #F4F2F5; }

    .custom #nav_area .page { background: #ffffff; }

    .custom .menu { background: #ffffff; border: 0; }

    .custom .menu li.tab a, li.tab { border: 0; }

    /* CONTENT ZONE */

    .custom #content_area { background: #F4F2F5; }

    .custom #content_area .page { background: #F4F2F5; }

    .custom #content_box { background: #ffffff; }

    /* FOOTER ZONE */

    .custom #footer_area { background: #F4F2F5; }

    .custom #footer_area .page { background: #F4F2F5; }

    .custom #footer { border: 0; background: #F4F2F5; }

    /* BEHIND EVERYTHING */

    body.custom { background: #ffffff; }
    .custom #sidebar_1 {background:#FFFFff none repeat scroll 0 0;}
    .custom .sidebar h3 {font-weight: bold; color: #000000 padding: 0px 5px; background: #ffffff;

    .custom .menu .rss a { padding-right: 16px; margin-bottom: -10px; background: url(‘images/rss.png’) 100% 50% no-repeat; border: none; width: 95px; height: 60px; }
    .custom .menu .rss a:hover { padding-right: 16px; margin-bottom: -10px; background: url(‘images/rss2.png’) 100% 50% no-repeat; border: none; width: 95px; height: 60px; }.custom .menu .rss a { padding-right: 16px; margin-bottom: -10px; background: url(‘images/rss.png’) 100% 50% no-repeat; border: none; width: 95px; height: 60px; }
    .custom .menu .rss a:hover { padding-right: 16px; margin-bottom: -10px; background: url(‘images/rss2.png’) 100% 50% no-repeat; border: none; width: 95px; height: 60px; }

    */

    I want my logo to match up up the sides of the site. I am not sure what I am doing wrong. Also the categories look weird with the grey line and off center front page. I am wondering if you could pretty pretty please help me to fix this. Thank you so much for this site. It’s so helpful. I really enjoy learning more about Thesis from you.

  147. kristarella says

    28 April 2011 at 15:02

    Justine — In what way did it not work?

  148. web dizajn says

    19 June 2011 at 15:36

    Nice thing i can change now very easy title text transform from cyr to lat…and keep design in header still great, thx a lot 😉

  149. Adam Garcia says

    26 June 2011 at 08:10

    Hi,
    I was wondering how you could center a header when inputting it into the header section of thesis 1.8.1? BTW, your link to “clickable header images” is now a 404 Error. Thought you might want to know.
    Thanks.

  150. kristarella says

    26 June 2011 at 14:22

    Adam — Thanks; the forums changed their link structure, I’ve found the correct link.

    Centering depends on how you add the image… which method are you using?

  151. Vanessa says

    13 November 2011 at 06:57

    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?

    • kristarella says

      13 November 2011 at 08:20

      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.

  152. kristarella says

    13 November 2011 at 09:17

    Vanessa — Have you been editing layout.css directly? On line 25 it has padding-top:8.8em;, which is what is causing the space.

  153. Adam Garcia says

    21 November 2011 at 14:19

    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

  154. Jehangir Larry says

    10 December 2011 at 23:53

    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

  155. kristarella says

    12 December 2011 at 16:57

    Jehangir — To do that you need to replace the header contents. An example of the code is in the user manual.

  156. Sluttystars says

    6 January 2012 at 11:13

    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 🙂

  157. kristarella says

    6 January 2012 at 12:13

    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.

  158. SS says

    6 January 2012 at 12:38

    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?

  159. kristarella says

    6 January 2012 at 17:58

    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.

  160. Anuj@improve google pagerank says

    12 January 2012 at 18:44

    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

  161. kristarella says

    13 January 2012 at 09:21

    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.

  162. Dave says

    22 January 2012 at 04:02

    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

  163. kristarella says

    25 January 2012 at 08:49

    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.

  164. Stefan says

    1 February 2012 at 06:29

    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?

  165. kristarella says

    1 February 2012 at 09:55

    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.

  166. Andrea says

    13 July 2012 at 15:23

    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!!!

  167. kristarella says

    13 July 2012 at 17:26

    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:
    header example

    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.

  168. Andrea says

    13 July 2012 at 22:04

    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
    ;
    }

  169. kristarella says

    16 July 2012 at 19:34

    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;
    }
A triptych of baubles. These are very satisfying t A triptych of baubles. These are very satisfying to paint ❤️💚💙

#watercolor #watercolour #christmas
I have really enjoyed this Christmassy painting! S I have really enjoyed this Christmassy painting! So glad my friend asked me to make some cards for our church helpers, because it set me on a roll!
#watercolor #watercolour #christmas #christmascards #watercolorcards
Had a great Saturday at the GKR Karate State Title Had a great Saturday at the GKR Karate State Titles! I was a sub for @jamesxuereb.me in the Blue Flame Dragons thanks to his sprained ankle; we won first round and came fourth overall!
I did a bunch of judging and officiating, which was really good.
I didn’t place in my individual events, but had a very fun final round of kumite (sparring).

#gkrkarate #karate
More stamping tonight. Even better than last night More stamping tonight. Even better than last night’s!
Did some stamping this evening. Love it! I wish I’d done some pages in other ink colours before I dismantled the stamps 😂
Had an appointment in the city, so I got to visit Had an appointment in the city, so I got to visit the @legocertifiedstores_anz Wicked display!
#wicked #lego #afol #sydney
A little book I made from Bunnings paint sample ca A little book I made from Bunnings paint sample cards. It’s going to be for mini paintings and collages. Sometimes it’s nice to start with a colour rather than a blank white page!
A little while ago I did some swatching of Daniel A little while ago I did some swatching of Daniel Smith and Schminke Horodam watercolours. So soothing! I love some of the granulating colours!
#watercolours
Follow on Instagram

Footer

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Top Posts & Pages

  • Home
    Home
  • Edit EPS files in Inkscape on Mac
    Edit EPS files in Inkscape on Mac
  • Contact Me
    Contact Me
  • About
    About
  • Wooden yarn swift
    Wooden yarn swift
  • Aimee Mann
    Aimee Mann

Follow Me On…

  • Instagram
  • X
  • GitHub
  • LinkedIn
  • YouTube

Categories

Copyright © 2025 · Kristen Symonds · kristarella.com

%d