Possible To Change Sidebar Background Color? (Metro)

[cdevivo1]

Hey everyone,

I've done a lot of minor customizations on Studio Press themes and generally don't have a problem. A question I wondered about and haven't been able to figure out: is there a way to change the background color of the sidebar area? For example, if I still wanted my inner/wrap/main content to be over white, but wanted the sidebar to be blazing pink (no, not really)?

I've gone through a lot of the css, made lots of changes but nothing works. When I change what's behind the body I change the whole thing.

Is this possible? If so does anyone have any suggestions/resources that I can look towards?

Thanks,

[Sridhar Katakam]

Like this? -> http://i.imgur.com/Ut4RTZL.jpg

If so,

.sidebar {
    background: pink;
    padding: 0.5rem;
}

will work.

or, do you want the sidebar background to stretch vertically till the end of content area?

---

Genesis Tutorials | Follow me on Twitter

[cdevivo1]

Never thought of adding that simple line. I was going crazy trying to modify what was already in there, thank you.

I had tried to use a 1 pixel high background image that scrolled vertical, but it kept showing up in my posts as well.

This works great, but Is there a way to stretch it to end of content area?

Thanks so much. Sometimes it's the easiest things that I can't see right in front of my face

[Sridhar Katakam]

Instead of the above CSS,

#content-sidebar-wrap {
    background: pink;
}

.metro-home #content {
    padding-right: 1rem;
    background: #FFFFFF;
}

.sidebar {
    padding-right: 1rem;
}

to get http://i.imgur.com/eJd2RBV.jpg

I had tried to use a 1 pixel high background image that scrolled vertical, but it kept showing up in my posts as well.

That would work and in fact is more robust than the above method. You can prefix the CSS selector(s) with .home to restrict things to just the homepage.

---

Genesis Tutorials | Follow me on Twitter

[Susan]

Sridhar:

I've been looking for the same answer myself for a client's site - I added in the second CSS that you created, but it changed both the content area and the primary sidebar.

http://ow.ly/onfQP

[Sridhar Katakam]

Susan,

For your site, you need to change

.metro-home #content

to

.home #content

---

Genesis Tutorials | Follow me on Twitter

[Susan]

Sridhar:

You are a genius. Thanks 🙂

[Sridhar Katakam]

haha, not really.

This is known as Faux columns technique.

See http://alistapart.com/article/fauxcolumns. It's way back from 2004.

The other two methods are vertically repeating image background for the content and using jQuery. If you are interested, I can give you articles I wrote on them albeit for another theme framework. Principles remain the same though.

---

Genesis Tutorials | Follow me on Twitter

[Susan]

That would be good - I'm always looking to increase my knowledge base!

[Sridhar Katakam]

http://ithemes.com/codex/page/Builder_Tips_and_Tricks#How_to_extend_sidebar_and.2For_content_background_so_they_reach_till_the_bottom

http://sridharkatakam.com/how-to-set-equal-height-for-content-modules-element-and-sidebar-in-ithemes-builder/

---

Genesis Tutorials | Follow me on Twitter

[Susan]

Sridhar:

As a follow-up - I added the code to my site, and on the home page, the sidebar appears the desired color on a white content area, but on a post page, the color extends across the entire content area. I'm not sure where I've messed up...

http://demo.graphicallydesigning.com/test-post-one-2/

[Sridhar Katakam]

Change

.home #content {
    padding-right: 1rem;
    background: #FFFFFF;
}

to

#content {
    padding-right: 1rem;
    background: #FFFFFF;
}

---

Genesis Tutorials | Follow me on Twitter

[Susan]

That did it 😉 - Thanks!

[Author]

Posts