Get Sidebar to be on Left for Blog page

Community Forums Forums Design Tips and Tricks Get Sidebar to be on Left for Blog page

This topic is: not resolved

This topic contains 6 replies, has 2 voices, and was last updated by  stacijansma 1 year, 6 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #11595

    stacijansma
    Participant
    Post count: 7

    I’ve moved a few things in the coding – but nothing is getting the sidebar from the right to the left side of this page: http://harrisburgareamoms.com/blog/

    The default settings are left sidebar. Which all pages are switched to that except this page.

    Can anyone tell me how you can do this?

    #11597

    Jon Bellah
    Participant
    Post count: 109

    On the Blog page in WordPress, scroll down and click the layout with the sidebar on the left in the “Layout Settings” box.


    Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

    #11598

    stacijansma
    Participant
    Post count: 7

    Jon,

    Thanks for your response – that doesn’t work though :( I thought it might be that simple too.

    Any other ideas? I think I need to change the coding just not sure what and when I searched I didn’t find my answer.

    #11600

    Jon Bellah
    Participant
    Post count: 109

    Add this to your functions.php file:

    [php]

    add_filter( ‘body_class’, ‘add_blog_class’ );
    function add_blog_class( $classes ) {
    if ( is_home())
    $classes[] = ‘blog-page’;
    return $classes;
    }

    [/php]

    Then add this to the bottom of your style.css file:

    [css]

    .blog-page .sidebar {
    float: left;
    }

    .blog-page #content {
    float: right;
    }

    [/css]

    However, your #inner div background still draws the line down the page.  So you’ll want to invert it, and add:

    [css]
    .blog-page #inner {
    background:url(images/blogpage-bg.jpg);
    }
    [/css]


    Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

    #11634

    stacijansma
    Participant
    Post count: 7

    Jon, Thank you – this is working except – I lost the whiteness of the page: http://harrisburgareamoms.com/blog/

    #11673

    Jon Bellah
    Participant
    Post count: 109

    Change this:

    [css]
    .blog-page #inner {
    background-color:#fff;
    }
    [/css]

    You’ll lose the vertical bar on the sidebar, though. The blogpage-bg.jpg image that I referenced was assuming that you wanted that bar. If so, you have to flip that image horizontally in a image editing software (like Photoshop or Gimp) and save it to your themes images folder.


    Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

    #11675

    stacijansma
    Participant
    Post count: 7

    Okay – I got it – I went with this:

    .blog-page #inner {
    background:url(images/inner-sc.png);
    }

    Apparently this theme doesn’t have a blogpage-bg.jpg so I went to the home page that has the white and plugged in that image.

     

    Thanks!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.