WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Move Main Sidebar in Twenty Twelve

[Resolved] Move Main Sidebar in Twenty Twelve

  • wpvirgin

    @wordpressvirgin

    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;
    }
    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 ‘[Resolved] Move Main Sidebar in Twenty Twelve’ is closed to new replies.
Skip to toolbar