Change Header Height for Twenty Eleven Theme?

  • Author
    Posts
  • #679472

    splicehere
    Member

    I’m looking for a new theme for my blog, something simple and comfortably wide enough to permit video and image embedding. Twenty Eleven seems to fit the bill, but I don’t like how tall the header is — it takes up so much screen real estate for a single image. I notice that Matt Thomas uses this theme and has adjusted the header size. I know he’s got plenty of options that I, as a regular user, would not have access to, but I’m wondering if it’s possible with custom css. I also like how he’s got the search box superimposed over the header.

    I’m currently using Sapphire — if I could make the main text column wider, that would also solve my problem.

    Any suggestions, anyone?

    Many thanks,
    Steve

    The blog I need help with is splicenow.com.

    #679587

    What he has done is to go without a header image and then he has set a opacity for the background color in #branding and is using the standard text-based site title and site description. Matt Thomas is hosted here at wordpress.com, so what is available to him is also available to you.

    Sapphire uses some images for the backgrounds which would require either creation of some new ones that were wider, or doing away with the one for #page and #footer and just going with a white background, but it isn’t that big of a deal to widen it.

    #679607

    splicehere
    Member

    Okay, thanks so much for responding. I’m trying a few customizations now. Removing the header image does indeed shrink the height of the header area. I’ve tried the following customization, adding opacity, but it makes the text and menu area translucent, as well and doesn’t darken the header area background.

    Any suggestions?

    #branding {
    border-top:2px solid #bbb;
    opacity:.5;
    padding-bottom:10px;
    position:relative;
    z-index:2;
    }

    And would it possible to put an image up there that isn’t so tall?

    Thanks again,
    Steve

    #679653

    You have to declare a background and set the opacity in that. If you declare an opacity directly in #branding it will apply to all elements in the parent DIV with the #branding selector. Note that you have to use RGB (the last value (0.7) is the opacity).

    #branding {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    }
    #679657

    splicehere
    Member

    Okay, got it. That produces a grey rectangle, but the background image doesn’t appear through it. How do I add the opacity?

    Working another angle, I was able to create a shorter header image using this:

    #branding img {
    height: 150;
    margin-bottom: -7px;
    width: 100%;
    }

    But the form for uploading a header image expects a specific size in pixels and wants to crop anything that doesn’t fit. How would I upload or link to an image of my choosing?

    (I wish this kind of thing was more easily customized – it would make WP more flexible for dunces like me.)

    Thanks so much —
    Steve

    #679660

    You do NOT use what I gave above with a header image. Matt Thomas’ site does NOT have a header image. He has chosen to “remove header” at appearance > theme options.

    What exactly do you want and give us a link to the site that has the theme you are working on. Do you want what Matt Thomas has, or do you want a transparent header image?

    #679664

    splicehere
    Member

    Woops, sorry, if I wasn’t clear. I’m trying it both ways and comparing. I could go with a shorter header image or a semi-transparent rectangle (a la Matt’s site).

    I see how you added a percentage as the last digit in the rgba (alpha, I guess). It produces a grey rectangle — but you don’t see the background image through it.

    Here’s the site: http://avidtips.wordpress.com/
    (It’s a mess — I’m experimenting)

    The alternative was to create a shorter header image, explained in the previous post. I can get the header shorter, but I don’t see how to upload the image for it. The control panel insists on cropping to the standard size.

    Thanks for all your help —
    Steve

    #679671

    Since the site is private, I cannot view it so give this a try.

    #page {
    background: none repeat scroll 0 0 transparent;
    }
    
    #branding {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    }
    
    #primary {
    background: none repeat scroll 0 0 #FFFFFF;
    }
    #679695

    splicehere
    Member

    Okay, great! That’s much closer.

    Here’s what it looks like.
    http://splicehere.files.wordpress.com/2011/08/twentyeleven_a.png

    There’s a section in the center (in red) that should be white. Any idea what’s going on there?

    Thanks again — you’ve been fantastic.

    Steve

    #679696

    This is a guess, but try adding this.

    #main {
    padding-top: 0;
    }
    #679735

    splicehere
    Member

    Dude, you are the man!

    There was also a border on the bottom of the menu that the background image came through. So I did this to fix it.

    #access {
    margin:0 auto;
    }

    Working now — and looking cool. Thanks for your help.

    Steve

    #679737

    You are welcome and thanks.

    #679862

    hanryder
    Member

    Related query (sort of):

    How do you reduce the space between the bottom of the header and the top of the posts?

    #679864

    Do you have the Custom Design upgrade?

    #679877

    hanryder
    Member

    Yes I do.

    #679885

    Give this a try and see what you think

    #main {
    padding-top: 0;
    }
    #679918

    hanryder
    Member

    That’s awesome thanks!

    It is almost perfect. But when I reduce the heading size (using the CSS from this thread), it squishes the photo. Is Twenty Eleven limited in that I can’t crop a photo to a dimension other than 1000 x 288? The photo quality is pretty bad to when I upload it.

    #679921

    Once you change the header dimension, you will have to upload the image to the media library and the get the URL and put that directly into the CSS rather than using the header uploader. It will always make the image the original size. Upload the image you want to use and then give us the URL of that image.

    #679936

    So, how do I reduce the height of the header? (twentyeleven)
    I’ve changed the image height successfully, but I’d like to reduce the space above the image (where the name of the blog is).
    Thanks

    #679937

    The site attached to your username is wearing wu wei. What is the URL of the site you are talking about?

The topic ‘Change Header Height for Twenty Eleven Theme?’ is closed to new replies.