Side Bar Background Color & Font Color

[worldlystrategies]

Hello,

I am trying to change the sidebar background color and font/link colors for separate sidebars on multiple pages.

For example: On this page (http://www.spottingcancer.org/cancer-signs-symptoms/) which is using sidebar 1, I want the sidebar background color to be the purple that is in the header (#663090) and the links to be white with the selected link to be lime green like it is currently and then on this page (http://www.spottingcancer.org/self-examination-early-cancer-detection-monitoring-procedures/) which is using sidebar 2, I want the sidebar background color to be the blue that is in the header (#0873bb) and the links to be white with the selected link to be lime green like it is currently.

I figured out how to change the background of all sidebars by adding this to the CSS but how do I differentiate colors for different sidebars? Also, how do I change the color of the links in the sidebar?

.sidebar .widget {
background-color: #0873bb;
}

Thanks,
WS

[Kyle – SUPPORT]

Hi

Unfortunately that’s not possible, the sidebars do not have unique classes for each, therefore you can not target them separately, sorry about that

– Kyle

[worldlystrategies]

Hi Kyle,

Thanks for the info. I have decided to just change all sidebars to gray but the container box is too small.

Please see screen shot below. The arrows are too close to the edge of the gray box.

Is there a way to increase the size of the gray box/container so it looks nice on mobile and desktop?

Thank you,
WS

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please remove this custom css code:-

.sidebar .widget {
    background-color: #F1F1F1;
}

And use this custom css code:-

.sidebar {
    background-color: #F1F1F1;
}

Thanks
Mohammad

[worldlystrategies]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Glad 🙂 to help you.
Thanks
Mohammad