Community Forums › Forums › Archived Forums › Design Tips and Tricks › Possible To Change Sidebar Background Color? (Metro)
- This topic has 12 replies, 3 voices, and was last updated 10 years, 8 months ago by Susan.
-
AuthorPosts
-
August 28, 2013 at 7:03 am #59197cdevivo1Member
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,
August 29, 2013 at 12:58 am #59459Sridhar KatakamParticipantLike 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?
August 29, 2013 at 3:24 am #59480cdevivo1MemberNever 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
August 29, 2013 at 3:39 am #59483Sridhar KatakamParticipantInstead 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.
August 29, 2013 at 5:13 am #59493SusanModeratorSridhar:
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.
August 29, 2013 at 5:25 am #59496Sridhar KatakamParticipantSusan,
For your site, you need to change
.metro-home #content
to
.home #content
August 29, 2013 at 5:29 am #59497SusanModeratorSridhar:
You are a genius. Thanks 🙂
August 29, 2013 at 5:31 am #59498Sridhar KatakamParticipanthaha, 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.
August 29, 2013 at 5:35 am #59499SusanModeratorThat would be good - I'm always looking to increase my knowledge base!
August 29, 2013 at 5:36 am #59500Sridhar KatakamParticipantAugust 31, 2013 at 12:28 am #59846SusanModeratorSridhar:
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...
August 31, 2013 at 12:33 am #59848Sridhar KatakamParticipantChange
.home #content { padding-right: 1rem; background: #FFFFFF; }
to
#content { padding-right: 1rem; background: #FFFFFF; }
August 31, 2013 at 12:45 am #59850SusanModeratorThat did it 😉 - Thanks!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.