How To Change Color Of Sidebar?
-
I want to change the color of both sidebars, but whenever I do, the colored part stops right where the last widget it. How do I make the sidebar color go all the way down to the bottom of the page?
Ringling9.wordpress.com
The blog I need help with is: (visible only to logged in users)
-
-
-
As you already have have a CSS upgrade you have been “grandfathered” under the new “custom design upgrade” which Staff do provide support for. http://en.blog.wordpress.com/2011/06/15/new-upgrade-custom-design/
-
The sidebar background will only continue to the bottom of the sidebar content. If that ends before the end of the page, then that is where the sidebar background will end. You need to make a background image for the entire content area that includes the area where the sidebars are so that it will continue down to the end of the longest element, no matter what that might be.
-
You can change the sidebar background color for both sidebars at once in Digg 3 with something like this:
#page, .pagewrapper, .sidebar ul li, .obar ul li { background: red; }What that basically does is turns the background a color and then lets the middle content stay white. The sidebar backgrounds aren’t really changed, but it looks like they are.
Note that the Digg 3 theme uses some background images to create rounded edges for the main content and it also uses images to display a separator element around the top left of a lot of its widgets. The code above overrides all of those images, but you could add them back if you re-created new images with the colors you want to use and uploaded them into your media library. Then you could add new CSS to change out the images used now.
-
-
In Digg 3, the page wrapper area (where the content and sidebars are) is 904px wide. You would have to make an image that wide. I would suggest perhaps making the image no longer than perhaps 500px and then set it to repeat in the Y direction (down). That way no matter how long or short the pages are, there will be image behind the content and sidebars.
The sidebars are 192px wide each, so if you want something different behind the sidebars, then your image would have 192px wide sections at each side of the image you create. You can then put whatever you want in the center section where the content would be.
Do note that I have not taken into account margins and padding on the various elements in the content area, so the 192px width above may have to be adjusted in your image (wider or narrower) to look right. This takes a little trial and error.
-
I made the picture and uploaded it and it looks good! But now, the text in the posts goes behind the sidebars
-
-
-
-
-
Back to the sidebar again, would I be able to make a picture the width of the sidebar and use that? I saw one site that did that and somehow covered up the space between the content area and the sidebars (wrapper.) I think it was http://pochoma123.com/
-
Yes you can. You would add a “background declaration to .sidebar and to .obar. You will have to set a few other things to a color of “transparent” and remove a few other images as designsimply suggests above.
-
-
I did it and I looks awesome! The only problem is that when the image repeats, there’s a white line at the bottom. I will try and figure it out.
The last thing I’m still having a problem with is the navigation. It’s an image map and the code works. But when I position the text widget where I want it, the links aren’t active. How do I fix this?
-
This is great!
Check your image and make sure there isn’t a sliver of white at the top or bottom of the image. It sounds like that might be the issue.
- The topic ‘How To Change Color Of Sidebar?’ is closed to new replies.
WordPress.com Forums 