How to change the background color of pages

  • Hill all,

    Please advise how to change the background color of pages (not the whole website) using HTML and CSS ?

    Thanks

    Regards

Viewing 15 replies - 1 through 15 (of 18 total)

  • Hello,

    You can use the classes from the <body> tag of a website to change the background colour of a page and not affect the rest of the website. For example, if the home page has the following HTML …

    <body class="home page-template ...">

    then we can change the home page background colour via …

    body.home { background-color: #f00 }

    It would depend on how your website HTML is formed. If you need further help, then please provide a link to your website. Good luck!

    Thread Starter satimis

    (@satimis)

    Hi Gerry,

    Thanks for your advice. Where shall I add your codes? Start Classic Editor?

    I’m running Theme Twenty Eleven

    I have tried;

    Appearance -> Customize
    -> Colors
    Color Scheme
    (check) Light

    Background Color
    [Select Color]
    select green color
    -> Publish

    There is no function.

    Website: asia.tours-video.com

    Regards

    Do I need to install “Advanced CSS Editor” plugin ?

    • This reply was modified 1 year, 4 months ago by satimis.

    You can add the CSS code to Appearance > Customize > Additional CSS

    The website you linked to already has a background colour and image applied to the <body> tag, so I assume you wanted to change that? If that’s the case, then use this code to change only the Home page background colour …

    /* NOTE: Example code to change Home page body background colour to red */
body.custom-background.home {
  background-color: #f00;
  /* Remove background-image */
  /* background-image: url("https://asia.tours-video.com/...background_graphics.jpg") */
}

    Please note that the body tag also has a background-image property so you won’t see the red background colour unless you remove the background-image property. Good luck!

    Thread Starter satimis

    (@satimis)

    Hi Gerry,

    I found Appearance > Customize > Additional CSS

    to add your codes. What I expect to do it is changing the page color. Now it is white color. I expect changing it to light-green.

    The background of the website is OK. I don’t expect to change it.

    Regards

    Hi, if you mean the <div id="page" ...> container, then the following code could help (just change the background colour to whatever you need) …

    /* Change div#page background on Home page only */
body.home #page {
  background-color: lightgreen;
}

    Good luck!

    Thread Starter satimis

    (@satimis)

    Hi Gerry,

    Again, I think it would be better creating a child theme of Twenty Eleven Theme. Do editing on the child theme, not on the parent theme.

    That was what I did in the past. I haven’t created a new website for several years. Any advice? Thanks

    Besides there is Child Theme wizard plugin to help me creating a child theme

    Regards

    Thread Starter satimis

    (@satimis)

    Hi Gerry,

    Tried your code on;

    Appearance > Customize > Additional CSS

    -> Publish

    It works. Thanks.

    Pls advise where can I find the css code online?

    Another question: if creating a new page, would the background still be the same green color

    Regards

    • This reply was modified 1 year, 4 months ago by satimis.
    • This reply was modified 1 year, 4 months ago by satimis.

    Sure, do use a child theme if that would help. The CSS code I mentioned in my earlier reply could be added to Appearance > Customize > Additional CSS and it won’t change the theme. It just adds extra code (outside the theme) to help adjust the theme layout. Good luck!

    Hi, I meant the following when I said ‘CSS code’ …

    /* Change div#page background on Home page only */
body.home #page {
  background-color: lightgreen;
}

    … and I can see you have added that already, so there is no other CSS code for you to search elsewhere.

    The above code should only affect the Home page, so if you were to create a new page then the background would likely be another colour and not ‘lightgreen’.

    Thread Starter satimis

    (@satimis)

    Hi Gerry,

    What can I do if need the body color of a new page created to be same as the Home page?

    If I expect adding CSS code #xxx instead where can I find it online?

    Regards

    Thread Starter satimis

    (@satimis)

    Hi Gerry,

    I found it;
    CSS Color Codes
    https://www.quackit.com/css/css_color_codes.cfm

    pale green:
    Hex #D1F39F

    Now I change the page body color.

    Regards

    • This reply was modified 1 year, 4 months ago by satimis.

    @satimis if you’re trying to give pages unique background colors, you can target page/post id’s in your CSS. for instance:

    .page-id-25 {
    background-color: #fcb900;
    }

    .page-id-26 {
    background-color: #b5001d;
    }

    here’s how you can find any page-id on your site.

    • This reply was modified 1 year, 4 months ago by modoseyoum.
    Thread Starter satimis

    (@satimis)

    Hi modoseyoum

    Thanks for your advice.

    Add ‘Central Asia” page

    Install “Reveal IDs” plugin

    Pages -> All Pages
    Central Asia
    ID = 45

    -> Appearance -> Customize – Additional CSS
    add;
    .page-id-45 {
    background-color: #fcb900;
    }

    -> Publish

    It doesn’t work.

    Hello, the code should be:

    body.page-id-45 #page {
    background-color: #fcb900;
}

    Once you know the page id for any new page you add, just replace 45 in body.page-id-45 #page in the code above. Good luck!

    Thread Starter satimis

    (@satimis)

    Hi Gerry,

    I found following settings on Additional CSS;

    header {
    background-color: #36fb27;
    }

    #page { background-color: #e2fbfb; }

    All newly added pages will have same header color and same page body color

    Regards

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘How to change the background color of pages’ is closed to new replies.