Move Main Sidebar in Twenty Twelve

  • Resolved wpvirgin

    (@wordpressvirgin)


    12 years, 2 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 ??

    doubled

    (@doubled)

    Thank, you!
    Worked flawlessly

    Michael

    (@alchymyth)

    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.