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 2 years, 4 months ago.

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

    stacijansma
    Participant

    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

    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

    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

    Add this to your functions.php file:

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

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

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

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

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

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

    #11634

    stacijansma
    Participant

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

    #11673

    Jon Bellah
    Participant

    Change this:

    .blog-page #inner {
    background-color:#fff;
    }
    

    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

    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.