Change background color of single private page in Unos Theme

  • Resolved jbb0906

    (@jbb0906)


    1 year, 5 months ago

    Note. This is a private page, so you have to be logged in to see it.

    I need to change the background color of this single page. I′ve used the CSS

    body.page.page-id-admin-lp1/ {
    background-color: green;
    }

    The “green” was just a test to see if the code worked with a color code that I know it′s a recognized color. When I log in with a different browser, the color did not change. Since it′s a private page, it′s not accessible without logging in. Am I doing something wrong, or does this css code not work for a private page?

    Thanks.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @jbb0906

    Please try this code:-

    body.single #content {
  background: gold !important;
}

    It’s really difficult to provide specific CSS help without checking the live page. As the page you provided is private, I only see an error page (along with body classes for the error page), so I can’t see the actual body classes a logged-in user will see that you’re trying to target.

    So general comments:

    1) I’m supposing the forward slash / is merely a typo here, and not what’s on your site.

    2) I’m suspicious of this part of the selector page-id-admin-lp1. The page-id- is usually followed by the ID (not slug) of the page.

    If you really cannot make the page public temporarily, can you at least copy and paste ALL the <body> classes here?

    Thread Starter jbb0906

    (@jbb0906)

    Thanks for your response. I′ve made the page public so you can take a look at it. If you need an admin login to look at the CSS, I can set one up for you, but I′d prefer to send that by email rather than post it here.

    The actual code in the CSS is:

    body.page.page-id-admin-lp1 {
    background-color: green;
    }

    There is not supposed to be a “/.” You′re correct, it′s a typo.

    Regarding the Page ID, I found it. It is 14665 so I now have:

    body.page.page-id-14665 {
    background-color: green;
    }

    Still no change in the background color.

    Thanks again.

    • This reply was modified 1 year, 5 months ago by jbb0906.
    • This reply was modified 1 year, 5 months ago by jbb0906.

    I see you’ve made the page public. I can also see you’re using the correct class with the unique page ID now.

    But you don’t see any effect because the <body> element has a child element <main> which takes 100% of the page width with no margin or padding at all. So the white background color of this <main> element is the only thing you see: the green background of the body element is completely hidden underneath the main element.

    So it’s this main element’s background that we need to target… but, still, we want to limit the effect to just this page with unique id 14665.

    Please remove your previous two attempted codes, and try the following instead:

    .page-id-14665 #main.main {
    background-color: green;
}

    Standing by for feedback.

    Thread Starter jbb0906

    (@jbb0906)

    That did the trick.

    Thanks so much for your help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change background color of single private page in Unos Theme’ is closed to new replies.