How To Do A Sidebar Background Color With No White Spaces?

robbins
(@robbins)

14 years, 5 months ago

I can’t figure out how to do this, any help would be greatly appreciated.

I have one sidebar and when I choose a color for the sidebar background, it only colors individual blocks of that sidebar and has white space in between. How can I make it so the entire 250 pixel wide sidebar is one solid background color from top to bottom without any white space in between?

For example, see http://www.chrisbrogan.com/ (on both his sidebars he has a solid color in the entire sidebar with no white space at all)

I have pasted our website as an example. For ease of viewing, I made the sidebar BG an ugly green color. Notice how the green color does not cover the entire page from top to bottom and there is also white space in between the “categories” and “pages”.

http://nicheofthemonthclub.com/

How can I make that entire sidebar the same color from the top of the page to bottom with no white spaces in there?

I don’t know much about coding so please be kind!

Thanks in advance.

Viewing 10 replies - 1 through 10 (of 10 total)

Rev. Voodoo
(@rvoodoo)

14 years, 5 months ago

I’m just guessing here…could you add background color to your #sidebar in style.css?

kmessinger
(@kmessinger)

14 years, 5 months ago

Find .widget in your style sheet. Change bottom padding to 0px

Thread Starter robbins
(@robbins)

14 years, 5 months ago

Thanks for the quick reply’s and help. I changed the .widget padding to 0 and it did take away the white space but it bunched the words close together. How can I keep the padding but make the background of the padding the same background color as the green widget background?

esmi
(@esmi)

14 years, 5 months ago

Try adding:

#sidebar-1 {background:#7BCDC9;}

to the bottom of style.css.

Thread Starter robbins
(@robbins)

14 years, 5 months ago

Wow, you are THE MAN. Thank you esmi, that worked. One last question…it only colors the sidebar area that has content, how would I make that color go all the way down from the top to bottom of the entire page?

Rev. Voodoo
(@rvoodoo)

14 years, 5 months ago

does adding clear: left; to that sidebar-1 work for that?
(I’m still learnin here, I struggled with that on an old theme, and can’t quite remember how I fixed it….)

deckster0
(@deckster0)

14 years, 5 months ago

Change the CSS from #sidebar-1 {background:#7BCDC9;} to
#sidebar-1 {background:#7BCDC9; height:800px;} You can change the size of height (800px) to anything you want.

Thread Starter robbins
(@robbins)

14 years, 5 months ago

Deckster, thank you. Instead of specifying pixels is there a way to say height 100% so it would always show correctly no matter how many posts were added to the page?

esmi
(@esmi)

14 years, 5 months ago

is there a way to say height 100%

Unfortunately, no.

gutierrezalex
(@gutierrezalex)

13 years, 8 months ago

View the source for answer:
http://alexandergutierrez.info/