using .page-id

  • I am trying to do custom background colors and images by page number using the main template style.css file. I saw online how I could use body.page-id or .page-id. Supposedly, the page ID I need to change is 2. However, the following code I added will only change the color to red. The code after that using page-id will not override and turn to green. What am I doing wrong? I can turn it red, but I can’t use page-id to turn it a special color.

    body {
    background-color: red;

    }

    body.page-id-1,body.page-id-2,body.page-id-3 {
    background-color: green;
    }

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

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

  • Hi mwbiggs,

    Although, the website link you have given seems to be incorrect and not opening.
    However, you can use !important rule with the css like below:-

    body.page-id-1,body.page-id-2,body.page-id-3 {
    background-color: green !important;
    }

    Hope this will help you!!

    @dineshinau If background-color: red; is working, as the author suggests, then background-color: green; would work without !important because it’s already more specific.

    The problem is probably that the page IDs are incorrect. You can use your browser’s developer tools to view the body tag and see which classes are on the body for the particular page you want to modify. This is information on Chrome’s DevTools, but all browsers have them: https://developers.google.com/web/tools/chrome-devtools/

    Try this:

    body { background-color: red; }

.page-id-1 body, .page-id-2 body , .page-id-3 body { 
    background-color: green!important; 
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘using .page-id’ is closed to new replies.