Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Changing background colour on one page

Home Forums Support [Resolved] Changing background colour on one page

Home Forums Support Changing background colour on one page

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #189843
    Sarah Cairncross

    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 πŸ™‚

    #189848
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #189954
    Sarah Cairncross

    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.

    #190114
    Tom
    Lead Developer
    Lead Developer
    #590066
    srimali senn

    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

    #590068
    David
    Staff
    Customer Support

    Hi,

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

    #590107
    srimali senn

    I tried following it did not work

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

    #590203
    srimali senn

    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;}

    #590216
    David
    Staff
    Customer Support

    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;
    }
    #590218
    srimali senn

    Thank you very much

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.