[Resolved] Changing background colour on one page

[Sarah]

Hi Tom, I’ve been searching through the various threads on how to do this but the code I’ve found and tried is not doing the whole job and I’ve not got a clue how to find the class of the bit that needs changing – is there a tool you recommend?

The page in questions is the home page of http://nicolacairncross.com – my sister wants it to all be black background on that page only.

I added the code recommended on your post https://generatepress.com/forums/topic/using-various-backgroundcontent-colors/ as follows:

body.page-id-7802 {
background-color: #000000;
}
.page-id-7802 .inside-article {
background-color: #000000;
}

Unfortunately there is still a white box. Is it a case of removing padding? Or changing the background of another element?

Please help!
Thanks,
Sarah 🙂

[Tom]

I created a plugin that actually makes it a lot easier: https://wordpress.org/plugins/simple-css/

It adds a metabox to the edit page area itself called “Simple CSS”.

In there you can add CSS that applies to that page only.

So you would do:

.one-container .site-content {
    padding: 0;
}

For that page only 🙂

[Sarah]

It’s worked! Of course 😉 Thank you Tom. That’s a brilliant plugin – am going to go take a look to see what other ones you’ve created.

[Tom]

Glad it worked 🙂

[srimali]

I used following css and changed the background color

body.page-id-320 {
background-color: #FFFFFF;
color: #000000;
}
.page-id-320 .inside-article {
background-color: #FFFFFF;
color: #000000;
}
There is still small issue if you go to the page there is a black margin on left, how can i get rid of, it only on this page. http://www.tokyo-global.co.jp/what-is-global-engineering/

Pls help me, tia

[David]

Hi,

that is coming from the container color, which can be targeted like so .page-id-320 .one-container .container

[srimali]

I tried following it did not work

.page-id-320 .one-container .container{
background-color: #FFFFFF !important;}

[srimali]

I seperated it and added and it worked, thank you

.page-id-320 .one-container {
background-color:#ffffff;}

.page-id-320 .container {
background-color:#ffffff;}

[David]

Glad to hear you got it resolved btw you can combine CSS selectors into one rule where they have the same properties:

body.page-id-320,
.page-id-320 .inside-article  {
    background-color: #FFFFFF;
    color: #000000;
}
.page-id-320 .one-container,
.page-id-320 .container {
    background-color:#ffffff;
}

[srimali]

Thank you very much

[Author]

Posts