Home>Support>Different background-colors on different pages

Different background-colors on different pages


I want different background-colors for different pages. With a css like this:

.page-id-157 #main{background-color:#006400;}

.page-id-157 header{background-color:#006400;}

.page-id-157 #footer {
.page-id-157 site-footer tg-site-footer tg-site-footer-widgets {

everything (header and main) works beside of the footer; no matter what definition I try – the color doesn’t change.

What do I do wrong?

And would it even be possible to get different menu background-colors on different pages?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 1 year, 2 months ago Andrew Misplon Hi, I Work Here

    Hi Hans

    Thanks for reaching out.

    Do you have a public URL where we can take a look at what’s going on?

  2. 1 year, 2 months ago Hans Bindewald

    yes, have a look at



  3. 1 year, 2 months ago Andrew Misplon Hi, I Work Here


    In your Custom CSS you have:

    .page-id-174 tg-site-footer-widgets {

    tg-site-footer-widgets is a class name, it’ll need a period in front of it to designate it as a class.

    .page-id-174 .tg-site-footer-widgets
Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More