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

  • 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 https://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”.

    https://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)

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

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

    Thread Starter robbins

    (@robbins)

    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?

    Try adding:

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

    to the bottom of style.css.

    Thread Starter robbins

    (@robbins)

    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?

    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….)

    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)

    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?

    is there a way to say height 100%

    Unfortunately, no.

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘How To Do A Sidebar Background Color With No White Spaces?’ is closed to new replies.