WordPress.org

Forums

[resolved] Twenty Twelve Front Page template widget in wrong place (7 posts)

  1. laalpert1
    Member
    Posted 2 years ago #

    I've modified the Twenty Twelve default template to three columns, but now my home page, using Front Page template displays the right sidebar below the content, rather than to the right side. http://mcaap.org/wp2013/ .

    I'm using a child theme, but I don't see why this is happening. I've tried many style.css edits.

    Any ideas? Thank you!

  2. graphicgeek
    Member
    Posted 2 years ago #

    Your #primary div is set to width:100%, which means it will take up the full width of its parent div, the #secondary div won't have room to float next to it.

    Your #secondary div is also set to clear:both and float:none, which means it won't float at all. Try something like this in your css:

    #primary{
    width:60%;
    }
    
    #secondary{
    width:38%;
    float:right;
    clear:none;
    }
    
    .template-front-page .site-content article{
    width:auto;
    }

    The last bit is because your article width is set to a specific width, which would have taken it outside the visible area of the #primary div.

  3. WPyogi
    Forum Moderator
    Posted 2 years ago #

    @laalpert1 - that's not a valid child theme - you should NOT have the entire stylesheet in your child theme - but ONLY changes you have made to the CSS code. That's likely contributing to your difficulties in making changes...

  4. laalpert1
    Member
    Posted 2 years ago #

    Thanks for the suggestions. I cleaned up the child theme css to only include changes. If I change the #primary div, won't that affect ALL pages in the site, not just the frontpage? How can I change just the front page so that the sidebar shows up next to the content? Thanks again.

  5. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Yes, you can use the home page unique class to target only that page - look at the body tag:

    <body class="home page page-id-18 .....>

    So then add .home to the CSS selectors:

    .home #primary{ ...

    for example.

  6. laalpert1
    Member
    Posted 2 years ago #

    Thank you so much, that did it, and I'll continue to work on the styling. Terrific!

  7. laalpert1
    Member
    Posted 2 years ago #

    Resolved.

Topic Closed

This topic has been closed to new replies.

About this Topic