Flipping the Sidebar in Twenty Ten with Custom CSS

For a project I’m working on, I wanted to take the sidebar in Twenty Ten and move it to the left side instead of the default. I played with it for a while and received some help from my colleague Ian Stewart, who kindly pointed out that I’d typo’d a CSS comment. (That wasn’t completely embarrassing.)

Turned out that at one point I’d had it and didn’t know it. Thanks again, Ian.

To post for my own recall and for anyone who might be looking to do it, here’s what to add to your WordPress.com Custom CSS if you’d like a left sidebar:

/* LAYOUT: Two columns-reversed
   DESCRIPTION: Two-column fixed layout with one sidebar LEFT of content */

#container {
float:right;
width:100%;
margin:0 0 0 -240px;
padding:1em 0;
}

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

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

11 comments on “Flipping the Sidebar in Twenty Ten with Custom CSS

  1. Brewski says:

    Thank you… that was very helpful. Was trying to flip the sidebar and that did the trick. Cheers.

  2. kera says:

    How about a quickie on adding a SECOND sidebar to Twenty-Ten – I’ve tried everything I can think of with zero success… I’m by no means a WP Wizard, however, so I’m guessin’ you’ve probably got a quick trick…

    • Ryan Markel says:

      I haven’t looked into this, but it would be a decent bit more complicated—you’d be looking at moving one of the footer sidebars up to the main content area, since those are the only remaining sidebars to move.

  3. Vali Hutchison says:

    This article describes how to make a 3 column twenty ten layout using some absolute positioning with the primary sidebar on the left and secondary sidebar on the right:

    http://zeaks.org/wordpress-2/twenty-ten-child-theme-how-to

    vali

  4. Fred says:

    Months ago after much trial and error I figured out how to swap the sidebar to the left in one of the older versions themes, but it’s been ages and I want to use this theme. So.. this is probably a noob question, but where do I insert that code? In styles.css? Which line?

    Thanks =)

  5. Fred says:

    Ah.. nevermind, I didn’t know about child themes yet. Thanks, perfect code. =)

  6. Ron says:

    Hi Ryan,
    Thanks for the info, i have tried this on my site, but any widgets i have added to the column appear down at the bottom of the page, any suggestions.
    Thanks

  7. Ron says:

    Got it working, had to change this,
    #secondary {
    clear: right; } To
    #secondary {
    clear: left; }
    Thanks,
    Ron

  8. Neil Harper says:

    Thanks very much for this, I am just getting to grips with wordpress and cSS and really grateful for guys like you who generously share their knowledge. Good Karma will try and pass it on.

  9. David says:

    Thanks for posting this. I haven’t had to do this trick yet in 3.x, so thanks for a simple answer and code. Now I’ll understand it from example.

  10. Pao says:

    Muchas gracias por el tip 😉

Say Something!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s