Sidebar background color overrided by page background color

Hello @jayka,

Thank you for reaching out,

Could you please provide more details about the issue?
Sharing a few screenshots or a short video would greatly help us understand the steps you took and the issue you’re encountering.
What result are you expecting, and how can we reproduce the issue on a fresh installation?

Please upload your files to one of the following online services:
https://postimages.org
https://loom.com
https://drive.google.com
Or any other service you know.

Please keep us posted.
Best Regards

Here are a few screenshots:

Then when I change the CSS in the Inspect tools, this is how it should appear:

Also as you can see the ‘Table of Contents’ isn’t getting any of the titles on the page… Should I create a seperate ticket? Maybe the TOC just can’t be inserted in the sidebar?

Thanks for your help!

Hello @jayka,

Thank you for reaching out,

Please provide a live link.
Should the final result resemble your second screenshot?
Have you written custom CSS? If yes, there might be a syntax error causing your CSS not to work. Validate it using an online validator.

Regarding the TOC:
It’s unlikely that this block or widget is native to WordPress.
I haven’t encountered it before. Can you confirm if it’s a third-party plugin you added?

You’ll need to contact the developer of that plugin for assistance. This feature is not part of OceanWP. From what I can determine, it’s unlikely that block/widget will work in the sidebar. It should be placed in the content section, either above the content or within “the_content”.

I hope it helps.
Best Regards

Hello @skalanter

Thankyou for your help.

Here is an example page with the sidebar: link.

Yes, the final result should look like the second screenshot.
I had not written any custom CSS up to now; so I have just tried to add the following code (but it doesn’t appear to work):

.widget-area .sidebar-box {
    background-color: #F6F4EB;
}

As you can see on the following image, it would be possible for me to change the widget background color with custom CSS. However, it also changes the whole page’s background (I just want to change the sidebar):

Is this a bug on my side?

Thanks for being so patient,

Regards,
Jayka

PS: the TOC is from an external plugin. It works when it is included in the main content.

Hello @jayka,

Thank you for reaching out,

It’s not clear, but it seems the CSS you’ve changed included the page content background, which is a wrong selector, use wrapper classes to make a specific CSS; general CSS will affect whole pages.

You can use the following CSS:

.separate-layout .widget-area.sidebar-primary {
    background: #e1e1e1;
}

.widget-area .sidebar-box {
    margin: 0;
    background: #e1e1e1 !important;
}

Result: https://postimg.cc/dZQqn8zL

Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

I hope it helps.
Best Regards

Yes, adding the !important made it work!

Thanks for your help!

You’re welcome.
I’m glad we could help.