Support » Fixing WordPress » Background color by CSS

  • Resolved spartan0

    (@spartan0)


    Good afternoon. I would like to change the background color on selected pages on my website. I do not want to use a plugin, I would prefer to use a CSS code.

    I found this one, but only works on one page, even if I repeat it doesn’t make any effect in any more than the first (page). I saw a lot of codes that change the entire website, but I only want a different color on selected pages.

    }
    body.page-id-3389
    { background-color: #2183bd; }

    I do not have code skills, I’m just learning…

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi, @spartan0

    Try adding this in Dashboard – Appereance – Customize – Additional CSS in the Customizer

    
    .page-id-123, .page-id-124, .page-id-125, .page-id-126, .page-id-127
    { background-color: #2183bd; }
    

    Replace 123, 124, 125, 126, 127 etc with the IDs of your pages.

    You can find out the IDs of your pages:

    1. By Inspecting the page: Right click while viewing the page > Inspect and looking for the body tag and in it for page-id-123
      page-id
    2. Go to Dashboard>Pages>Edit a page and check the URL in your browser address bar. You’ll see something like: yourdomain.com/wp-admin/post.php?post=3&action=edit In this example, the page ID is 3.

    You can learn how to use the Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS.

    Hope this helps,
    Kind regards!

    Thread Starter spartan0

    (@spartan0)

    First of all thank you for the answer. Yes, it works well. Thank you so much, I have been able to set the color in more than one page. But I have one that is not working. When I inspect it, I see the color I assigned crossed. An shows a set color as #f5f5f5 (white).

    Do you know what is wrong?

    When I inspect shows this:

    body.elementor-page-8:not(.elementor-motion-effects-element-type-background), body.elementor-page-8 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
        background-color: #f5f5f5; (SHOWS THIS COLOR AS SET)
    }
    body.page-id-3389, .page-id-24, .page-id-1061, .page-id-108, .page-id-5448, .page-id-341, .page-id-7, .page-id-316, .page-id-6945, .page-id-1179, .page-id-368, .page-id-8, .page-id-275, .page-id-3845, .page-id-266, .page-id-1686, .page-id-116, .page-id-870, .page-id-969, .page-id-233, .page-id-3727, .page-id-9, .page-id-188, .page-id-5802, .page-id-772, .page-id-1106, .page-id-771, .page-id-3173, .page-id-5917, .page-id-1865, .page-id-110, .page-id-1160, .page-id-770, .page-id-7053, .page-id-5628 {
        background-color: #2183bd; (THIS LINE SHOWS CROSSED)

    Do you know how can I deactivate the #f5f5f5 color? Is there any other CSS to deactivate this?

    Thank you for your time!

    As the class states, elementor-page-8, this background color is set by Elementor – You can go to Elementor settings and try to change the color from there. There should be a setting. You can ask for help with that here: https://wordpress.org/support/plugin/elementor/

    However, if you want to go full additiona CSS, add !important in your CSS code:

    .page-id-123, .page-id-124, .page-id-125, .page-id-126, .page-id-127
    { background-color: #2183bd!important; }

    This should work, unless Elementor uses JavaScript to change the background color.
    Kind regards!

    Thread Starter spartan0

    (@spartan0)

    Holly chickens! It work out well, the !important CSS. Thank you so much for you help. I learned a lot thanks to you.

    You are awesome!

    Best regards!

    Happy to help! Glad it works! šŸ™‚

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Background color by CSS’ is closed to new replies.