Move Main Sidebar in Twenty Twelve

  • Resolved wpvirgin

    (@wordpressvirgin)


    11 years, 11 months ago

    Hi!

    Ok I have successfully installed a child theme of Twenty Twelve.

    Now how do I move the main sidebar from the RIGHT to the LEFT side of the page?

    Googling this with multiple wordings has not helped. I need a basic “this is how/this is the code” for the aesthetic change of the main sidebar. In blogger you literally drag it over in the layout editor. There has got to be a way. SOS!

    (I know that in Twenty Twelve if you do not have widgets then it simply does not appear at all).

Viewing 7 replies - 1 through 7 (of 7 total)
  • /*-- 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;
}
    Thread Starter wpvirgin

    (@wordpressvirgin)

    After trying over and over I finally realized I had to put the above code UNDER the last } symbol on the child theme style sheet. Thank you ??

    Thank, you!
    Worked flawlessly

    this basic set of styles has some formatting issues with the widgets when using the ‘front page’ template and viewing the site in older browsers such as IE7;

    possibly add:

    .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%;  }

    (not optimized, and not widely tested)

    Thanks so much for this answer! Saved me a session of learning about twentytwelve structure and CSS vs creating the actual content demo ??

    Thanks for a simple, but effective answer, @alchymyth. I had simply targeted .site-content, and .widget-area in the past. I think I prefer your approach of getting a hold of the @media query portion as well. More complete, in my opinion. Thanks.

    So where should the above code be inserted? style.css?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Move Main Sidebar in Twenty Twelve’ is closed to new replies.