WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Move Main Sidebar in Twenty Twelve (8 posts)

  1. wpvirgin
    Member
    Posted 1 year 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).

  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    /*-- 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;
    }
  3. wpvirgin
    Member
    Posted 1 year ago #

    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 :)

  4. doubled
    Member
    Posted 1 year ago #

    Thank, you!
    Worked flawlessly

  5. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    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)

  6. dains
    Member
    Posted 1 year ago #

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

  7. solidgoldextra
    Member
    Posted 11 months ago #

    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.

  8. gutte
    Member
    Posted 11 months ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic