WordPress replaced the Twenty Ten theme with a new Twenty Eleven theme recently, so I thought it would be a good opportunity to tryout this new them and see what it could do. Out-of-the-box, Twenty Eleven is easier for the non-technical blogger to customize. Options like placing the sidebar on the left or right, changing the color-scheme and rotating headers are now available in the theme settings and do not have to be coded, like they did in the Twenty Ten theme. Still, there are improvements that can be made – so let’s have a look!
Where is the blog? The site title and banner image dominate the page
Eliminate Whitespace
The first thing that jumped out at me, when I previewed a beta-version of WordPress 3.2, was how much of the page that the site title and banner image took-up. Fortunately, it is easy to free-up a lot of space by simply moving the title, tagline and search box down, so that they display in front of the banner image. Note that the following steps assume that you are using a child theme. For instructions on creating a child them, see Customizing the WordPress Twenty Ten Theme. You can also download a blank Twenty Eleven child theme, here.
Not wanting to reinvent the wheel, I first took a look at how the WordPress team positioned the search form on the page:
/* Search Form */
#branding #searchform {
position: absolute;
top: 3.8em;
right: 7.6%;
text-align: right;
}Interesting! They used absolute positioning, along with an em and percentage to keep the search box in the same position at different screen resolutions and browser widths. We should be able to use this same concept to position the site title and tagline, so I played around with some values and came up with this:
#site-title {
position: absolute;
left: 7.2%;
top: 0.125em;
}
#site-description {
position: absolute;
left: 7.6%;
top: 6.625em;
}
A simple CSS modification eliminates the whitespace for a more streamlined look
That is quite an improvement! Of course, some of the text gets lost in the banner image, but we will deal with that, next. For now, though, we have eliminated the whitespace at the top of the page and our first blog post, along with much more of the sidebar content, are now visible “above the fold.”
Reduce Height of Banner Image
The default banner image in the Twenty Eleven theme is 288 pixels tall, so there is plenty of room to reduce this and still have a nice-looking banner. The WordPress team threw us a bit of curveball, here, compared to the previous Twenty Ten theme. We can re-use the same code in our child theme’s functions.php file to change the banner image height:
function brick_header_height($size){
return 110;
}
add_filter('twentyeleven_header_image_height','brick_header_height');But this code alone does not give us the desired effect, with the default banner images, because the Twenty Eleven them also has some CSS code that is trapping the 1000 by 288 pixel-size. We will have to alter that code in the child theme’s style.css file:
#branding img {
height: 110px;
}
Reducing the height of the banner image exposes even more content
Much better – but notice now our search box, site title and tagline are too low on the image. That is because they use absolute positioning, so we will need to go back and change those CSS values. The complete child theme style.css code is listed here:
/*
Theme Name: Brick Twenty Eleven
Theme URI: http://www.throwingabrick.com/wordpress/customizing-the-wordpress-twenty-eleven-theme.html
Description: A Twenty Eleven Child Theme
Author: Roy Scribner
Author URI: http://www.throwingabrick.com/about
Template: twentyeleven
Version: V0.1.0
*/
@import url('../twentyeleven/style.css');
#site-title {
position: absolute;
left: 7.2%;
top: 0em;
padding: 1.75em 0 0;
}
#site-description {
position: absolute;
left: 7.6%;
top: 4em;
}
#branding #searchform {
top: 2em;
}
#branding img {
height: 110px;
}Notice that for the site-title class, there was not enough font-height (em units) to move it up high enough, so I zeroed that out and reduced the amount of padding that the Twenty Eleven theme’s style.css file has applied to the top of that element. Also note that I have now modified the searchform class to reduce the amount of font-height (em units) applied to the top of that element. This particular class only applies to the Twenty Eleven theme templates that incorporate the sidebar. The non-sidebar template uses a different searchbar class.
Site title, tagline and search box centered vertically on the banner image
I spent about a week switching my outdoor blog over to the Twenty Eleven theme and I will be going over some of those modifications, here, over the next few weeks.
Roy, Like many of the readers above I am completely new to WordPress.com and have spent the last week playing with different templates, only to keep coming back to the TwentyEleven theme which I love. Like a lot of other I too hate the header size as it takes up too much room. I have purchased the upgrade to CSS but would like to reduce the image size but leave some white space at the top still. I have played with your code and managed to move the header, title and search bar nicely but can’t get the theme to leave any white space at the top. I did use the function you mention at the top (with no idea what I was doing!!) but couldn’t get this to vary the amount of white space to a suitable level.
Is there anything you could point me in the direction of? Thanks in advance
Lee.
Hi Lee,
That is the best way to learn (at least for me!) – just dive-in and start seeing what does and does not work. You can add some whitespace above the header with this CSS code in your child theme’s style.css file:
#page {margin-top: 50px;
}
Of course you can adjust the 50px to your liking, but hopefully will work for you.
Thanks Roy, I did try this but the whole page moved down but didn’t leave a ‘white bit’ at the top where the site title could sit.
I think it is something to do with the function brick header height return 110 bit of the coding. Does or should this work with WordPress.com? Thanks for the suggestions so far…
Ta Lee.
Oh okay, I see what you are saying – change it to…
#branding {margin-top: 50px;
}
Thanks Roy, that didn’t quite do it but I used your suggestion of the margin-top variable in the #branding {img location and it worked! The theme is much better now and give me a bit more real estate to work with!. Thanks ever so much for all your help, it is really appreciated. If you get a chance take a look at http://www.airshotsdontcount.com to see what I mean. Any suggestions for improvement will be greatly appreciated. Kind Regards Lee.
Beautiful trick. But : did you had a chance to have a look to your site on an Iphone ? The title / description is too low, and I cannot tune it.
Do you have an explanation ?
Thanks again for your hack.
Hi Sebastien,
Are you running the latest version 1.3 of the Twenty Eleven theme? It looks fine to me at 320px width in Safari 4.1, but it must be acting differently than what you are seeing.
Anyway, the culprit is probably in the Twenty Eleven theme style.css file – search for this line:
@media (max-width: 650px)
Code in this section only gets executed on small screens – and you will see several areas that may be affecting you. To stop this, just recreate the @media section in your child theme’s style.css file and override these (e.g. the padding for the #site-title). Good luck!
Hi Roy,
I’m a complete non-techie wanting to hack the header on Twenty Eleven – I have the Custom Design upgrade and can access the CSS code. I copied the bit of code you put up above to get rid of the white space at the top of the page and effectively drop the title and tagline into the banner image, and it worked fine, except that the thin grey tagline text now virtually vanished against my shades-of-grey banner image, and the Searchbox fouled the image on the right hand side. I don’t want to make the banner image smaller, I like it the size it is. I’d also like to be able to change the colour of the title, possibly modify the font to one with a drop shadow, and make the tagline text bold and change its colour so it shows up nicely against the grey banner image, as well as altering the width of the right-hand tagline margin so the tagline text doesn’t intrude on the silhouette, and getting rid of the ‘search’ box altogether, as it is duplicated immediately below by a widget.
I can see this is a bit of an old post for you, but I would so appreciate any help you can give me here!
Sue,
You can use the same CSS classes (e.g. #site-description for the blog description) from the article, but add different kinds of styling affects.
Hide the search field:
Change blog description font color & weight:
I do most of my CSS coding via Google
Just type-in ‘css’ and whatever you are wanting to do – ‘css font dropshadow’ or ‘css backgrond color’. The first result will almost always be the specific page at W3Schools.com that covers the CSS property you are looking for. Good luck!
Dude, your short and to the point tutorial for cleaning up the 2011 theme’s header acreage is sweet. Thank you. BTW – were you to do these things to the theme, as well, I’d buy it:
-convert the header ‘search’ box into a Google Search for Adsense
-convert the pages ‘search’ box into an Amazon products search box that adds one’s affiliate ID to the visitor’s search
Thanks!
Ian
Thanks, Ian – I’ll have a look at the search box. I have used Google Custom Search before, but always in a text box widget. I’ll see if what I can do, and post something about it.
Hi there,
Thank you very much for these instructions i am improving my site for it’s next version. The only problem I am having is to center align site-title and site-description. Do you think that’s something I can achieve.
Thanks.
Best
Hello İlkut,
For the Twenty Eleven theme, this will hide the search box and center the site title and description:
#branding #searchform {display: none;
}
#site-title {
margin-right: 0;
text-align: center;
}
#site-description {
margin: 0 0 3.65625em 0;
text-align: center;
}
Great post – helped me a lot designing a site for a friend, Thank you for you effort and insight.
You are most welcome, Bill and thank you for the kind words.
Thanks for the post. I was really trying to make a theme but after alot of efforts now im thinking to edit the wordpress theme and customize it. I think that will be much better than completely making a new theme
Thank you, Abdullah – I just created my first theme and it was definitely a lot of work and I still do not have it exactly right, just yet. There is a lot of satisfaction in it, though!
Hi Roy
I fixed it by forcing the correct size and a direct link to the header image in my child stylesheet.
I have another question. I would like to develop a child theme based on twenty eleven, but with the main menu vertically on the left.
I’ve searched the web, but can’t find anything. I’m not a php programmer really, have you got anything I can modify / use?
Kev
I have followed your instructions, although called my child theme a different name.
The height is set correctly, but I can’t get the image to show correctly. WordPress stretches it beyond it’s size.
My header is set to 1000×110 and the image is exactly the same side.
I have tried using CSS to show the image, but twenty eleven won’t pick it up and when I try to add it through the header option in the child theme, it stretches it.
Any advice please?
Kev
Kev – in the Dashboard, does it say (where you add a header image) the image size should 1000 x 110? Is so, then this means your function (in functions.php) is working correctly. It will still stretch the image in the preview, but that will have no impact on the site. Assuming that is okay and the image is being stretched on the site itself, then the #branding img {height: 110px;} change is not being picked-up for some reason. Check it again, in your child theme’s style.css file and make sure you have the curly brackets and the colon. If the site is live, you can give me a link and I can check it, too.
Hi
I have the same problem… my image is just stressed. Just wondering if you managed to make any progress on this?
Thanks Deb
Hi Roy,
Your tutorials are great; always very well documented and full of useful tips. I have created a website with a Twenty Ten child theme, and now that you changed to Twenty Eleven I was wondering for what reasons you decided to make the change. Do you think it makes sense to stay working with Twenty Ten, or will we – eventually – all have to change to Twenty Eleven because of – I don’t know – enhanced security or something like that?
Kind regards,
Mike
Hi Mike,
Thanks for the kind words. I held off on converting this blog to a Twenty Eleven child theme for a long time, but I knew that eventually I would want to take advantage of the new Post Format options. While I could have added the additional Post Formats to Twenty Ten, it starts to diverge from the baseline and that could be problematic, down the road.
I think the Twenty Ten theme is good for the balance of 2012, but as WordPress continues to add features to the Post Formats it will make more sense to move to Twenty Eleven, or the latest theme.
Thanks for posting, I’m new to wordpress and css, helped me learn how things works.
Just thought I should mention you probably left out (when copying/pasting your code to the blog probably) the opening comment marker (/*) where your list the complete style.css child class.
I was wondering why my theme was looking weird when I activated the child class and finally found the culprit
Thanks.
Ah, yes, good catch Hugo! That is one of the problems with trying to display code on a page vs. using screen shots – sometimes a character gets cut off or changes. I will fix it – thanks!
I am so lucky, that i found this Tutorial after spending hours in the google search. But i have on Last question to you, about this Tutorial.
How i can get or insert a Banner Ad with 720×90 Px in the Header. Without changing the size/weight of the Image ? The Banner Ad should be left in the Header?
Any ideas or Exempels for the Code?
Greetings from Germany.
Any chance someone might no how I can reduce some of the whitespace between the sidebar and content? I am trying to reduce the width of a (left-side) sidebar, and increase the content width to match. Basically to reduce some of the whitespace between the sidebar and the content, and the whitespace at the right and left of the entire page (sidebar + content). I am using a child-theme but not sure which code to add/customize to accomplish this. The site is below
http://www.squamishspeaks.ca
Thanks so much! I was able to create a child theme and make the changes very quickly based on the information you provided. The site layout looks a lot better now. Just need to change the header image and done.
I was able to create a child theme and make the changes very quickly based on the information you provided. The site layout looks a lot better now. Thanks so much! Just need to change the header image and done.
I am completely new to WordPress.com and have spent two days trialling different templates, only to keep coming back to the TwentyEleven theme, but hating the header size. I have no previous css skills and was a little dubious about modifying any template at all. Thanks to your great tutorial, and the link to the child theme tut, I now have something I can work with.
Huge learning curve, but thanks
Very interesting Roy. I am still on the fence about twenty eleven – I’m thinking this might be a good chance to spring for a premium theme like Genesis that will continue to be supported. That said, I like the way my site looks with my modified twenty ten theme – it’s taken several months but I finally things more or less the way I want them. It’s nice and simple and it works so I’m still trying to decide what I want to do.
I don’t have your level of coding experience so tutorials like these are very helpful – maybe I’ll go to twenty eleven. Either way I’m looking forward to more articles like this. Thanks.
You might say I am on the fence too, Dan, since I have not converted this blog. I used to run my other blog on Thesis, before converting it to Twenty Ten (and now, Twenty Eleven). It was a good experience, but I do not think I would ever go with a “framework” theme, again. Genesis may be different, but I found myself having to learn a lot about how to do things in Thesis, and that did not always progress my knowledge of WordPress, itself.