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?

Print Friendly

About Dave Smith

Did you know that with Twenty Ten if you fill in the User Biographical info field it will put an author window at the end of each post. Be sure to get your gravatar for all authors on your site. And fill out the Bio field in the profile.
This entry was posted in TwentyTen and tagged . Bookmark the permalink.

12 Responses to Twenty Ten Wider Sidebar the Easy Way

  1. Jason says:

    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. Dave Smith says:

    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. Geoff says:

    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. Dave Smith says:

    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. Dave Smith says:

    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. Michelle says:

    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?
    Michelle recently posted..Hello world!

  9. Dave Smith says:

    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. Steve says:

    Thank you Dave. I googled and found you.
    You have made it so easy to follow.
    Steve recently posted..Buy Melannco 10 Picture Collage Wall Frame

  11. Wayne says:

    This solved my sider issue perfectly, thanks so much!

  12. oto says:

    This is sweet! I got it working just fine. Checkout my blog
    oto recently posted..How to Send Christmas E-Cards and Wishes to your Friends

Leave a Reply

Your email address will not be published. Required fields are marked *

*

* Copy this password:

* Type or paste password here:

5,116 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge