How Can I Change the Sidebar Background Color?

[Scott G.]

Does anyone know how to change the background color on the sidebar? I tried changing the color in ".sidebar-primary" but it only changes a few blocks between widgets. Is there a default widget background color? It would also be helpful to know how to change the page background color so I can play with the contrast between them.

I am using the Smart Passive Income child theme.
Website: InvestingGoldNow.com

Thank you!

Scott

http://investinggoldnow.com

[CleanPageDom]

As well as the .sidebar-primary, you need to alter the ".sidebar .widget" as this has a background-color set to #fff.

There is also some additional styling going on on some of the widgets (such as Recent Posts) which you would need to account for.

And you'll notice that if you add a color/remove the background color then your widget text sits right up against the side of the widgets, so you'd perhaps need to add some left/right padding to shift that in some. Such as .sidebar .widget { padding: 0 40px; padding: 0 4rem; }

---

Let’s build a website together…

[Scott G.]

Awesome help CleanPageDom, thank you. With your help, I was able to get the whole "inner block" background color changed... that includes the widgets and in between the widgets.

The remaining pieces are above the widgets (to the nav bar), below the widgets (to the footer), and to the right of the widgets (to the edge of the screen/page).

[CleanPageDom]

Hi Scott

Great. Sorry, do you mean you need help with those last bits?

Thanks
Dom

---

Let’s build a website together…

[Scott G.]

Yes Dom, I'm still trying to figure that out. You have been a great help, and I thank you for that. If you know how to handle those last bits, I'd appreciate your help there too.

Thanks!
Scott

[CleanPageDom]

Hi Scott

Where am I looking? There's just a bit of green left as I see it:

https://ibb.co/fRBWMQ

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi Scott

Where am I looking? There's just some green left over as I see it.

Thanks
Dom

---

Let’s build a website together…

[Scott G.]

Oh sorry, I did not leave the changes in place. I put it back. Thank you for checking it out.

[Scott G.]

Hello... I'm reaching out again to see if anyone knows how to answer the question for this post. I'm trying to change the background color of the sidebar using the Smart Passive Income child theme.

Any help is very much appreciated!

I have been able to get part of the background color changed thanks to Dom's suggestions. There remains space at the top, bottom, and right of the sidebar where I have not yet been able to change the background color. Possibly to the left of the sidebar as well, but I am not sure because I do not know where the actual margin is.

Here is an example of the page with a sidebar:
http://investinggoldnow.com/blog

[Scott G.]

Hello... I'm reaching out again to see if anyone knows how to answer the question for this post. I'm trying to change the background color of the sidebar using the Smart Passive Income child theme.

Any help is very much appreciated!

I have been able to get part of the background color changed thanks to Dom's suggestions. There remains space at the top, bottom, and right of the sidebar where I have not yet been able to change the background color. Possibly to the left of the sidebar as well, but I am not sure because I do not know where the actual margin is.

Here is an example of the page with a sidebar:
http://investinggoldnow.com/blog

[CleanPageDom]

Hi Scott

Sorry for not getting back to you. I don't seem to have received an email update.

Anyway, I've managed to remove the backgrounds using Chrome's Inspect.

For the top widget:
.ck_form.ck_vertical { background: transparent; }

For the recent posts:
.sidebar .widget_recent_entries li a { background: transparent }

You could combine those two rules as they're both doing the same thing.

Let me know how you get on with that.

Thanks
Dom

---

Let’s build a website together…

[Author]

Posts