How to change color on the blog background?

Support
#1

I cannot find an option to change the colour of the blog background from white to a colour of my choice. This is for theme X. Website is https://thebusinessdesigners.ca/demo-blog/

If I add to CSS, Do I do this under the global CSS?

#2

Hi Tommy,

Yes, that is right. You should add the CSS code in X > Theme Options > CSS:

Please try this:

.blog .x-container.main:before {
    background-color: #000;
}

Feel free to change the background-color value in the code.

Hope this helps.

#3

Thanks for the quick reply! I copied and pasted that code into the CSS and it did not change anything. I am trying to change it into #3a3131

#4

Hi Tommy,

I tested the code and it should work. Try adding the !important declaration to the code like this:

.blog .x-container.main:before {
    background-color: #000 !important;
}

If it still does not work, please make sure you are adding the code in the Global CSS in X > Theme Options > CSS:

In case you have placed the code there but it is still does not work, there might be an issue with the CSS code that you have in the Global CSS such as some CSS syntax error that is stopping the CSS code you are adding to work as expected.

To verify that, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

Hope this helps.

#5

Thank you! This worked. If I wanted to do the same thing for another page (instead of .blog) can I do .what we believe (assuming this is the name of our about page)?

#6

Hi Tommy,

You may add a Body Class value to the About page’s Body CSS Class(es) field.

So assuming that the class you have added to the About Page is about then the code should be:

.about .x-container.main:before {
    background-color: #000 !important;
}

Hope this helps.

#7

Sorry i’m kinda unclear on those instructions. Can you clarify? Do I copy and paste that code into the body css? I tried that but nothing happened

#8

Hi Tommy,

The class .blog is only for blog page. For standard pages you have the page id class .page-id-XX where XX is the page ID.

How To Locate Post/Page IDs.

But that is not what I’m going to advise, here’s a general CSS that will work on all standard pages.

body .x-container.main:before {
	background-color: red !important;
}

If you only want to apply this to specific pages, then add this code to that Page > CSS area.

If you want this to apply to all standard pages then add it to Theme Options > CSS.

Hope this shed some lights,
Cheers!

#9

This was exactly the answer I needed. Thanks!

#10

You are most welcome!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.