Sidebar on the Left – Twenty Twelve

A quick fix to move the sidebar location in a child theme of Twenty Twelve;

add these styles to style.css of the child theme:

@import url('../twentytwelve/style.css');

/*-- move sidebar to the left --*/
@media screen and (min-width: 600px) {
	.site-content {
		float: right;
	}
	.widget-area {
		float: left;
	}
}

/* for IE8 and IE7 ----------------*/
.ie .site-content {
	float: right;
}
.ie .widget-area {
	float: left;
}

caveat: this simplified set of styles has some problems with the formatting of the widgets in the ‘front-page’ template, when viewed in older browsers such as IE7.

possible helpful styles:

.ie .template-front-page #secondary.widget-area { width: 100%; }
.ie .template-front-page #secondary.widget-area .first.front-widgets { width: 50.1%; margin-right: 3%; background: #f4f4f4; }
.ie .template-front-page #secondary.widget-area .second.front-widgets { width: 46.8%; margin-right: 0; background: #f4f4f4; }
.ie .template-front-page #secondary.widget-area .widget { width: 100%; }

13 Replies to “Sidebar on the Left – Twenty Twelve”

  1. whoah this blog is great i like studying your articles. Keep up the great paintings! You know, lots of persons are hunting round for this information, you could aid them greatly.

  2. I’m impressed, I have to say. Actually hardly ever do I encounter a weblog that’s both educative and entertaining, and let me inform you, you may have hit the nail on the head. Your thought is outstanding; the issue is something that not enough people are speaking intelligently about. I’m very completely happy that I stumbled throughout this in my seek for something regarding this.

  3. This is SUPERB! and works wonderfully. Thanks for your time.
    I did have one comment/concern though. I noticed there is now a great amount of white space between the sidebar widget area and the content. I believe this is due to some padding, margin, or maybe the width of the sidebar/content… Do you think you have any design tips or advice to balance this?
    Thanks.

    1. this is the same amount of space as would be when the sidebar is in its original right position – just more obvious.
      you could try to use one of the browser ‘right-click’ – ‘inspect element’ tools to check that.

      or, for general support with WordPress.org problems or questions, consider to join the WordPress support forum – see you there.

  4. Hello, thanks for your post on moving the sidebar tot the left of this theme.

    Do you think this is the complete set of changes needed considering the responsive design? E.g. applying only these changes will mean that at very small screens the content will remain at a bigger width and aligns to the right hand side. The menu might also lose its styling.

    1. ah forget it, you added the min width 600, i skipped that in my too fast reading of the posting, excuses.

  5. Alelooyah. Thanks a lot! I have spent two days trying to fix widget area position in 20twelve. This is the most simple and most effective way how to do it. Definitely. Thanks once more!

  6. Thank you very much. It is the simplest workaround i’ve ever seen so far. It’s working flawlessly. Thumb up 🙂

    1. Hi Clara,
      generally, the code is meant for a child theme’s style.css, and you don’t work with a child theme.
      you need to be specific where you add the new styles – don’t ignore the @media query.
      also, remember to clear the browser cache after any changes to the styles, if you want to see the changed formatting immediately.
      consider to join the WordPress.org support forum which is a good place to ask any questions when you have problems with customisations.

Leave a Reply to Patricia Cancel reply

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