Twenty Ten Wider Sidebar

UPDATE: This post content will work to widen the sidebar and create a size limitation for the entry-content area of Twenty Ten.   But if you want a quick and easy way to widen the sidebar go to:   Twenty Ten Wider Sidebar The Easy Way

The default setting for Twenty Ten sidebar is 220px.  That’s not very wide.  I found I could stretch it out to 240px without having to modify any css except the width for #primary and #secondary.  But 241px broke the whole sidebar and shoved it under the content area.

Even if you make the entire theme wider 240px is the widest you can set the sidebar without making other changes to the css.

I’ll admit it took me awhile to figure this one out.  Changing the width of the sidebar requires changing some existing settings and adding some new ones.

Making The Twenty Ten Sidebar Wider

The first thing you need to decide is how wide you want the content area, the theme itself and the sidebar.

For our example we are going with a sidebar of 260px and a content area of 700px.  The overall theme width is 1020px.

Here are the changes and additions required.

First, comment out the width 100% in #container

#container {

margin: 0 -260px 0 0;   (Note you change this to whatever new width you are setting for the sidebar)

/* width: 100% */

}

Then set:

#wrapper {

width: 1020px;

}

If you haven’t made your theme wider before you will also need to change the #access to:

#access {

width: 1020px;

}

Next we have to set the content area. Find:

.entry-content,
.entry-summary {
clear: both;
padding: 12px 0 0 0;
width: 700px;
}

Here we are adding the “width: 700px;”

Next we have to put a width on the comments area and tags, this is done in two places:

.commentlist
#respond
.entry-utility

add “width:700px;”

Finally we will set the width of the sidebar:

#primary,
#secondary {
float: right;
overflow: hidden;
width: 260px;
}
The “width: 260px;”  is our change.  By default it is set at 220px.

You will need to adjust all of these settings accordingly for your site.

Adjusting the width of the sidebar isn’t too difficult when you know how to do it.


Comments

  1. This is a nice trick. I am following your posts on dissecting Twenty Ten. By the end of it I hope I’ll make a new theme altogether. Keep Posting.

  2. Hey.. thank you so much.. but when I follow exactly your steps, but sidebar is still floating around at the buttom.. I think this is caused to the tags (underneath every post), not being restricted, after commenting out the width 100% in #container. Please help me, I think I just need to put in width: 700px; one last place for the tags.

  3. Niels,

    Just checked your site, it looks right now. You probably missed that section:

    Next we have to put a width on the comments area this is done in two places:

    .commentlist
    #response

    add “width:700px;”

    Looks like you have it working now.

    Dave

  4. Hi again Dave.

    right now the sidebar is only 240px, with not commenting out the width 100% in #container.

    I’ve added both width:700px in both

    .commentlist
    #response

    but still this doesn’t seem to restrict the tags, like:

    “Posted in Featured Artist | Tagged 3D, Behind the scenes, blog, cover, Fashion, MIranda Kerr, photogear, photographer, Vogue | Leave a comment ” – in the latest post.

    there have to be one last place to paste it in.

  5. I figured it all out..

    To get it to work properly, you also need to insert width: 700px; in:

    .entry-utility {
    clear: both;
    color: #888;
    font-size: 12px;
    line-height: 18px;
    width: 700px;

    The above restricts the tags to being 700px wide.

  6. Niels,

    Good catch, I’ve not had a wider sidebar site with that many tags yet that it exceeded the width at that spot.

    I’ve added that area to the post so no one has to dig down through the comments to figure it out.

    Thanks
    Dave

  7. Hai Dave,
    Thanks for these tips.
    One question, I followed it my site but it is still not fully coming. Any thing extra I need to do.
    The other things there is a typo, there is no#response, only #respond.
    Thanks for your help

  8. Mat,

    You’ve kind of mixed a couple of posts together here. But there are only a few changes you need to make to fix this.

    First, #container need added back width: 100%; and change the margin: -240 to be the width of your primary secondary which right now you have at 260. I checked your site and based on your ad you need that to be at least 300px to show. So -300 for the margin setting.

    Second, You need to remove the width: 700px; from .entry-content, .entry-summary

    This is only if you are making the entire site wider, which you didn’t everything is still set to width: 940px; so you didn’t need to remove the width: 100% from container or add the width: 700px;

    Make these changes and your sidebar will pop to the top and the content will fit your page.

    Dave

  9. Hi, Dave. Thanks for your help on widening my sidebar and narrowing the content area.

    It is working, but after I added your changes the background of my navigation bar shinks to the width of the content area. (See http://www.childinjuryprevention.ca) I would like the navigation bar to extend horizontally across the width of the header (947px), as it was before changing the sidebar width. Did I do something wrong?

  10. Kendra,

    I just looked at your site. There are many, many issues with the css adjustments that have already been made to Twenty Ten. There are too many issues to go into here. There are much better ways to make changes to your wrapper border than an image which restricts the size of the site to 980px. The top navigation is wider, you just can’t see it because the image background doesn’t go the whole width. And there are many more issues with the footer, the margin settings for primary and secondary, the width settings for the entry-content etc.

    I would suggest you start over with a clean Twenty Ten Stylesheet and go through the various posts here at the lab on making the header and navigation wider. and then the sidebar wider posts.

    Dave

  11. Thanks, Dave. I’ll get started on that.

  12. Hi again, Dave. My stylesheet is clean, but my sidebar has for some reason dropped below the content (www.childinjuryprevention.ca). Could you help me please? Thank you in advance.

  13. Thanks for the instructions. Did nt work quite right on my site but set me going in the right direction.