Twenty Ten Wider Sidebar the Easy Way

Twenty Ten is an amazing theme.   The more I work with it the more I’m impressed with the coding that went into this theme.

Some have been reading the various posts here about ways to modify Twenty Ten;   Wider Header and navigation, Wider sidebar, Left or Right sidebar etc.   While working on a site today I was playing around with the container width to see what effect that might have on the size and width of the sidebar; it turns out quite a bit.

In the post I wrote earlier on making the sidebar wider I had a solution that worked, but it involved making quite a few changes to the css and setting a width parameter for the .entry-content and commenting out or deleting the #containter   width: 100%.

The simple way to make your sidebar wider and have it still above the content is to adjust the container width down.

Sidebar Width 300 px

The simple way:

#primary #secondary   {

width: 300px;
}

#container   {

width: 97%
margin: 0 -300px 0 0;

}

You can make other adjustments accordingly.   Now wasn’t that simple?

Comments

  1. Goggled that and came right here, thanks!! We have been using the twenty ten theme in a few of our real estate websites and its awesome!

  2. Jason,

    Yes it is awesome. And the more I work with it the awesomer it becomes.

    Dave

    (Yes I know awesomer isn’t a word)

  3. Thanks very much for this guide. Do you know how I can make the sidebar narrower? (for example, to give more room for content)

  4. Geoff,

    That’s not hard either. Change the css in two places:

    #primary, #secondary {
    float:right;
    overflow:hidden;
    width:220px;
    }

    Change the width to whatever you want.

    #content {
    margin:0 220px 0 20px;
    }

    Change the margin setting to match.

    So if you want the sidebar to be 200 instead of 220, replace 220 with 200 in these two locations.

    Dave

  5. Love this post…been trying to figure out how to do this and walla, you’ve provided an easy solution that WORKS.

  6. Anita,

    I’d love to see your site. What’s the URL?

    Dave

  7. Thanks for the quick response Dave. I’ll give the update a try. http://www.warner-robins-realtor.com is my new WP blog. It went live last night but as you can see it still has much work (headings, content, etc.). Any volunteers to move my 300+ ActiveRain blog posts over? HA!

  8. Thank you SO MUCH…being brand new to WordPress and blogging, i’m still learning so much (hence my site, blogging for newbies — for my team who doesn’t know anything about blogging or internet marketing)…I haven’t officiallly “launced” my blog as i’m still trying to figure out how change it around and what plug-ins to use, etc. I’m glad i found your site.

    Can you recommend the best plug-in for avatars? Also, There is a big gap above my header and was wondering if you new how to get rid of that?

  9. Michelle,

    On Avatars. Gravatar support is built into your theme for comments. Where do you want avatars to appear on site?

    As for the big space above your header image. I know how to get rid of it, but you have a much bigger problem. That apparent Gap is because you didn’t fill in your blog title on the General Tab.

    Now you might not want that to show up, but that title is the most significant SEO place for your keywords. If you look at your browser Title for the page when you are on your home page you will find there is no title. The only thing displayed up there is the site description which you have filled in.

    If you don’t want the site title to show you can take it off screen with css settings but don’t not fill it in. You want your primary keywords for your site to be in that title. (in styles.css add margin-left: -9999 to #site-title)

    There are several ways to close that gap depending on what you want to display above the header image.

    Let me know if you want more help on the layout.

    Dave

  10. Thank you Dave. I googled and found you.
    You have made it so easy to follow.

  11. This solved my sider issue perfectly, thanks so much!

  12. This is sweet! I got it working just fine. Checkout my blog