Archived topic
Changing background colour on one page
9 replies · Started by Sarah on April 27, 2016
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 :)
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 :)
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.
Glad it worked :)
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
Hi,
that is coming from the container color, which can be targeted like so .page-id-320 .one-container .container
I tried following it did not work
.page-id-320 .one-container .container{
background-color: #FFFFFF !important;}
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;}
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;
}Thank you very much
