Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 20, 2019 at 12:25 pm #1168096
    moisturewordpress

    Hi,
    Is it possible to create different background colors on different pages and how?
    br Carsten

    December 20, 2019 at 3:51 pm #1168177
    Nikko

    Hi Carsten,

    You can do that through custom css code.
    There’s a unique class for every page which we can use to target specific pages to change their background color.
    If you have knowledge with html and css, you can use a web inspector and check for the body class.
    If not, then you can give us a link to some pages and tell us what background color you want to use for each one.

    Best regards,
    Nikko

    December 20, 2019 at 4:00 pm #1168184
    moisturewordpress

    Hi Nikko,
    Can you show me, in Google Chrome, how I find the unique class and how css should look if the background should be red? And should it be done in Quick CSS?
    On this page maybe: https://moisture.dk/ingroede-har/

    December 20, 2019 at 4:41 pm #1168204
    Nikko

    Hi Carsten,

    Watch this video first so you’ll get an idea how to use it: https://www.youtube.com/watch?v=1l4xz1QQhew
    You’ll just need to right click on any part of your site then Inspect Element.
    As for the page you gave it has this unique class: page-id-3503 (basically page-id-xx where xx is the page id), then you can use this code:

    .page-id-3503 .main_color {
    background-color: red;
}

    Best regards,
    Nikko

    December 20, 2019 at 11:05 pm #1168345
    moisturewordpress

    I can’t make it work. Sorry! :(
    Do I need to insert the code into Quick CSS.
    Does it only work if I select the ‘boxed’ or ‘framed’ layout?
    Does it not work on stretched layout?

    https://www.dropbox.com/transfer/AAAAAMvquWf43PbboBbZQO3MuRXgQDgwoAKoAJn2B5Eq3J-g8MrzjSM

    December 21, 2019 at 11:31 am #1168405
    Mike

    Hi,
    Please try adding your css in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field.
    Also try publishing your page instead of viewing a “preview” of it.
    I see from your screenshot you have a caching plugin, please try disabling your caching plugin and your Enfold Theme Options > Performance > JS & CSS file merging and compression setting while you are creating your site, once you are done you can enable these to make your site faster.
    Sometimes you may find your css is not specific enough to override the theme css, so you can try adding !important; at the end of your css rules like this:

    .page-id-3503 .main_color {
    background-color: red !important; 
}

    and add the #top ID to your page ID class, like this:

    #top.page-id-3503 .main_color {
    background-color: red !important; 
}

    Best regards,
    Mike

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