[Resolved] background colour for right sidebar area

[John MacKenzie]

Hi Tom

i am almost done my projects but have run into 1 (hopefully last) snafu i need to ask you about. I need to set the colour for the right widebar widget area to white (whereas the body is kind of a light yellow). when i do this

#right-sidebar {
  background: #fff;
}

it only makes the background white for the areas just around and between the widgets i have. but I want it to ally to the WHOLE right column up and down. is this possible?

thanks!

[Tom]

Hi John,

This should help: http://generatepress.com/forums/topic/equal-length-columns/page/2/#post-38550

[john]

hi Tom

Thanks! so that does seem to work better but there is still the main content background appearing on the RIGHT of my right sidebar and below it before it reaches the footer? will email you a link and login info as its protected.

John

[Tom]

Try adding this CSS:

.inside-right-sidebar {
      margin-bottom: 0;
}

[John MacKenzie]

thanks! yea that fixes the bottom but not the big section that still shows up to the right of the widget?

thanks
John

[Tom]

You added custom CSS to change the width of your widget area:

.widget-area.grid-20 {
    width: 17%;
}

So it’s not fulling up the entire space as it should (20%).

[john]

oh gosh sorry, that was left over from the other design.. thanks but still one minor issue

when the site is less than 978px wide the element style for the min-height of the right sidebar disappears and goes to 0.

John

[Tom]

In the code at the bottom you’ll see the “minWidth” parameter set to 960. You should be able to adjust that to whatever you like 🙂

[john]

ahha thank you! i didnt actually look at the code you said to paste 🙂 thanks a lot!

[Tom]

No problem! 🙂

[Ferdinand]

EDIT: What I learned today: The color set in: ‘Customize’ > ‘Colors’ > ‘Sidebar Widgets’ overrides any attempt to change it in CSS. Now I understand my confusion:

ORIGINAL POST: I’m confused. John states:

#right-sidebar {
background: #fff;
}
it only makes the background white for the areas just around and between the widgets i have. but I want it to ally to the WHOLE right column up and down. is this possible?

Seems odd that changing the background color with CSS code applies only to the padding, not the content area.
In this post, Tom directs him through a series of links to this code:

.inside-left-sidebar,
.inside-right-sidebar {
background: #FFF;
}

Doesn’t seem to work for me. Not sure what I’m missing.

[Tom]

That option applies to the inner widgets, which sit on top of the sidebar element you’re tweaking with CSS.

If you set the sidebar widgets to transparent, your sidebar background will come through.

[Ferdinand]

That’s what I became aware of too.

———-
Since my first thread here, I’ve been thinking of the way I learn, particularly how to adapt to the intricacies of employing code, WP and ‘responsive’/’flexible’ design. Perhaps I should’ve read more prior to starting but I don’t retain detail as easily as through trial and error and I’ve learned to be patient and persevere.

Other than these threaded conversations and the following websites Google dredges up in response to my queries, can you recommend a go-to resource for WP newbies like me with design and computer experience but no (html) programming experience?

wordpress.org
wpbeginner.com
w3schools.com
css-tricks.com
stackoverflow.com

Thanks for your help and effort to respond to everyone’s queries.

[Tom]

Those sites you listed are all great sites which I highly recommend.

It really depends on how you personally learn, but trial and error was my way. Experience and lots of Googling 🙂

[Author]

Posts