Changing header height in twenty eleven

  • greyhound2 · Member ·

    I saw that someone used the following to change the header size in twenty eleven:
    #branding img {
    height: 210px;;
    margin-bottom: -7px;
    width: 100%;
    They talked about putting the header in the background.

    Thesacredpath said that after you change the header dimensions, “from that point forward you have to use a background declaration in the CSS to add a header image.”

    So my questions are these:
    1. Would I use this same code if I want the header image to be 1000 x 190 (just changing the height)?
    2. When you say you have to use a background declaration in the CSS to add a header image, does that mean adding the code above or something else?
    3. Does changing the header height affect being able to change the header images on the other pages?

    I want to narrow the header image, but I’m a little worried about doing it because I don’t know much CSS.
    Anyway, the url of the narrowed header is:

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Go to appearance > header in the dashboard and delete the header (remove header).

    Now go to your CSS and add the following and see what you think.

    #branding {
background: url("http://santaanagateteachersblog.files.wordpress.com/2011/07/blog_header_size_1000_x_190_png2.png") no-repeat scroll center bottom transparent;
height: 310px;
}

#access {
margin-top: 210px;
}
  • thesacredpath · Member ·

    2011 is semi-flexible in width, but by doing the header height change as we have to do it through the CSS, we lose the automatic resizing of the header. After doing the above, widen and narrow your browser window and you will see that the edges of the image start to disappear as you narrow the browser window. If this is alright with you, then we are done I think, but if not, add the following to your CSS and it will set the minimum width the same as the maximum width for the main content area and keep the header from disappearing.

    #page {
min-width: 1000px;
}
  • greyhound2 · Member ·

    I tried it. It just widened the space between between the (old) header and the menu bar (by a lot). Then I tried changing the 310 to 210 in the code you gave me. That put the top part of the header behind the title, but the old header was still there covering the bottom half of the new header and still leaving that big space above the menu.

  • thesacredpath · Member ·

    I just tried this again with Firebug on your site and it worked fine. Let me set up my test blog with 2011 and try it directly in the CSS.

  • thesacredpath · Member ·

    Take a look at my test blog. I used the same code, but set the margin-top on #access to 175px as it rendered differently after going through that actual CSS.

    http://flippintestblog.wordpress.com/

  • greyhound2 · Member ·

    Thank you. It totally works. I hadn’t removed the old header image. (I’m new to this.)

  • thesacredpath · Member ·

    You are most welcome.

  • greyhound2 · Member ·

    I just used browershots to check how it looked in other browsers, and I see I’ve got problems. In IE6, there’s a big space between the tagline and the header, and the menu covers the bottom part of the header. In IE7, the screen looks blank. Right now, I’m on a computer with IE8 and XP, and the header is covering a bit of the bottom of the tagline and leaving a big space between the header and the menu.

    I’m worried maybe I shouldn’t have tried to make the header narrower.

  • greyhound2 · Member ·

    Actually, I didn’t change the 210px to 175px. It looked fine last night (on another computer) with 210. I’ll try 175 and see if that helps.

  • greyhound2 · Member ·

    Changing to 175 didn’t make a difference.

    This is everything I have on the custom style sheet right now:
    #site-description {
    margin-bottom:1em;
    }

    #branding {
    background:url(‘http://santaanagateteachersblog.files.wordpress.com/2011/07/blog_header_size_1000_x_190_png2.png’) no-repeat scroll center bottom transparent;
    height:310px;
    }

    #access {
    margin-top:210px;
    }

  • greyhound2 · Member ·

    I change 310 to 320 and that got the header off the tagline (on this computer anyway). Now for some more experimentation.

  • thesacredpath · Member ·

    On IE6, just forget about it. WordPress no longer supports it. I know there are still a lot of people in Europe using it, but they seriously really need to upgrade to a modern, more secure browser. IE6 disappeared from view in the web’s rearview mirror about 6 years ago and trying to retain backwards compatibility with it takes more time and energy than an designing an entire site does, and it severely limits what you can do.

    Everything is looking good to me in FF and Safari.

  • greyhound2 · Member ·

    Okay, thank you very much.

  • thesacredpath · Member ·

    You are welcome.

  • The topic ‘Changing header height in twenty eleven’ is closed to new replies.