How To Remove the Header Image in Twenty Ten

You want to maximum exposure for your content. No need for a header image But there is no “No Header Image” option on the Twenty Ten theme (At Least Not Now).

Two Short Steps to Remove the Header Image

  1. Go to “Appearance/Header”   click on the button to “Remove the Header Image”   Don’t worry about the message saying the image will no longer be available.   As long as the image is one of the default images shipped with Twenty Ten it will still be available.
  2. Edit the CSS style.css

Find:

#branding img {
border-top: 4px solid #000;
display: block;
border-bottom: 1px solid #000;

}

(There is more formatting code in this section but this is the line you want.)

You can remove this line or comment it out.   I prefer to comment it out in case you want an image in the future.

How do you comment the line out?

/* border-top: 4px solid #000;
display: block;
border-bottom: 1px solid #000; */

add: height: 0px; (This is for Chrome & IE)

That will do it.

Those two steps will remove the image header and move the top navigation up under the Site Title area.

Two quick and easy steps to remove the header image in Twenty Ten.

Comments

  1. Nice Tip. I am in process of ripping off Twenty 10 to meet my specifications. This just gave me another idea about the design.
    Thanks

  2. Thanks for the info.
    This works for FFox nicely and bumps the menu bar up tight below the tittle. But in IE, it leaves an image box. Is there a way to get it to work in IE as well?

    Paul

  3. Paul,

    You missed the line add: height: 0px; (This is for Chrome)

    I should have put IE as well. But I checked it after I added this line for Chrome.

    Dave

  4. Hmmm,

    I originally pasted per your instructions:

    /* border-top: 4px solid #000;
    display: block;
    border-bottom: 1px solid #000; */
    clear: both;
    display: block;
    add: height: 0px;

    and it worked in FFox but not IE.

    When I removed the /* */ it then worked in both FFox & IE. I’ll tinker with it some more.

    Thanks again for the help as this helped me get rid of the picture. 😉

  5. Paul,

    Take a look at it again. The display block is commented out in the post. It isn’t in your code snippet.

    I should mention, I comment it out so in the future I know it isn’t being called. Keeps it easier to debug in the future. It is true the height 0px would override the rest of the code, but could lead to confusion in the future.

    Dave

  6. This sounds like something I could do but I am so green at this that I cannot even find
    “”Edit the CSS style.css”” I cannot find that in my theme.

    Could you elaborate slowly for a newbie?

    Thanks

  7. Brad,

    From the Dashboard go to “Appearance” Scroll down to “Editor” In the right navigation you will find Stylesheet under it is style.css.

    Back up your files first, then proceed to follow this post.

    Dave

  8. Hey Dave,

    With the new update to Twenty Ten, the header gets jacked again and the style.css needs edited again to get rid of the header space and picture placemat.

    I again edited the sheet according to the above post:

    /* This is the custom header image */
    #branding img {
    /* border-top: 4px solid #000;
    border-bottom: 1px solid #000;
    clear: both;
    display: block;*/
    }
    height: 0px;

    /* =Menu

    In FFox, the Navigation bar moves up just fine, but the solid color boarder disappears…but that’s no biggie really. In IE, it still leaves the picture place-mat.

    So I tinkered and got both to work correctly by changing the code as such: Note that the added height: 0px; is outside the closing */ and Inside the closing } . Bingo, that should help out…. 😉

    /* This is the custom header image */
    #branding img {
    /*border-top: 4px solid #000;
    border-bottom: 1px solid #000;
    clear: both;
    display: block;*/
    height: 0px;
    }

    /* =Menu

    Thanks,
    Paul

  9. This leaves a large gaping space where the image was. Anyway to get rid of that?

  10. Paul,

    That is correct and is in the post above where it says add height: 0px (for IE and Chrome) and you do have to add it outside the comment yet inside the branding img { }

    Since Twenty Ten is the default theme it will get updated and modifications over written. If you don’t want to set up a child theme the best thing to do is copy your style.css and function.php files so you can replace your changes when updates are made to Twenty Ten Automatically.

    Merry Christmas Paul

    Dave

  11. Cioboss,

    You too seem to have missed the line about adding in height: 0px to address that issue.

    Dave

  12. Dave,

    Your original post leaves out part of the code string and for us newbs it\’s not apparent that the added code goes inside the }. Also, when I put the /* */ as in the post, it does not work either.

    I guess a post of the complete code string may best illustrate the location of the added line for newbs. Seems I\’m not the only one getting stuck on this…LOL.

    This is what worked for me:
    /* This is the custom header image */
    #branding img {
    /*border-top: 4px solid #000;
    border-bottom: 1px solid #000;
    clear: both;
    display: block;*/
    height: 0px;
    }

    /* =Menu

  13. Paul,

    Apparently it is being missed. 🙂 You have added it exactly where it needs to be inside the brackets.

    I remember back when i first stated the lab it was confusing in those early days to figure out where code was to be added and removed. It seems simple to say add height: 0px; and assume everyone knows that has to go between the brackets and not inside the comment code or outside the brackets, which puts it in limbo and has no effect. Your snippet is now in a couple of comments. If there are more, I’ll edit the post to include it in the actual post itself. I hesitate to do so for those that might try and copy and paste it from the post because there might be other code they want to keep.

    Dave

  14. Thank you so much for this tip! Worked like a charm!

    Wishing you nothing but the best in 2011!