Custom css to give different page background color

  • I want a different background page color for different pages and have used this successfully:

    .page-id-11 .site-header, .header-default .site-header.fixed-header, .header-side .site-wrapper {
    background: #d6d6d6;
}
.page-id-11 .bottom-footer {
    background-color: #d6d6d6;
   }

    But I have tried a variety of things to change the background color with no success – cannot override the background color setting in customise.

    .page-id-11 body.custom-background {
    background-color: #d6d6d6;
}
.page-id-11 body {
    background-color: #d6d6d6;
}

    [Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

    Both of the above still return the home page background color. Can anyone help?
    Thanks.
    PS Nice theme, by the way, with expansion pack.

    • This topic was modified 7 years, 8 months ago by bdbrown.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author satoristudio

    (@satoristudio)

    Hey @kilmenyjane,

    thank you for choosing Bento!

    Since the page-id-XX class is already an attribute of the body element, you need to apply the background declaration to the class directly, otherwise the CSS selector will not return a valid element from the page:

    .page-id-11 {
background-color: #d6d6d6 !important;
}

    This will only work if you’ve chosen the “Boxed” layout in the “Site Layout” tab of the Customizer settings; in case you need to change the background of the container element, please use this:

    .page-id-11 .site-content {
background-color: #d6d6d6 !important;
}

    Sincerely,
    Andrii / Satori Studio

    Thread Starter kilmenyjane

    (@kilmenyjane)

    Thank you – that worked perfectly. Again, nice, clean simple theme. Definitely worth the cost of the expander pack.

    Will use again.

    Theme Author satoristudio

    (@satoristudio)

    Thanks, @kilmenyjane, glad to hear it was helpful!
    Should you have other questions about the theme, don’t hesitate to contact me

    Cheers,
    Andrii / Satori Studio

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom css to give different page background color’ is closed to new replies.