Get Sidebar to be on Left for Blog page

[stacijansmaParticipant 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?

[Jon BellahParticipant Post count: 108]

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

[stacijansmaParticipant 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.

[Jon BellahParticipant Post count: 108]

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

[stacijansmaParticipant Post count: 7]

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

[Jon BellahParticipant Post count: 108]

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

[stacijansmaParticipant 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!

[Author]

Posts