I am trying to customise the background colour of my site. It's a 2011 Child Theme. When I go to Appearance -> Customize -> Colors, I get the Light and Dark option under Color Scheme, but can't completely customise it. No custom colour option is available except as listed for Header Text / Background and Link colours, where I can use the slider.

I have selected the Dark option but the background isn't truly black, would like to make it darker, been searching and can't find a way to make it work / edit it etc. Tried in the theme editor as well.

Any ideas would be greatly appreciated. Thanx in advance!

I am trying to customise the background colour of my site. It's a 2011 Child Theme. When I go to Appearance -> Customize -> Colors, I get the Light and Dark option under Color Scheme, but can't completely customise it. No custom colour option is available except as listed for Header Text / Background and Link colours, where I can use the slider.

I have selected the Dark option but the background isn't truly black, would like to make it darker, been searching and can't find a way to make it work / edit it etc. Tried in the theme editor as well.

Any ideas would be greatly appreciated. Thanx in advance!

• customization
• theme-development
• child-theme
• color-picker

Share Improve this question asked Jul 6, 2020 at 6:12 Anthony MooreAnthony Moore 1 3

• Can you provide a link and a description of the element you're trying to make darker? – ralphjsmit Commented Jul 6, 2020 at 7:50
• www.deserthighways Main body section behind text. Although have just been suggested I leave it so that black images posted on it stand out, so have done the sides same to match. – Anthony Moore Commented Jul 6, 2020 at 8:09
• Also can't seem to change the footer colour to match. I have changed part of the section in the middle widdle, but not the overall footer colour, any ideas please? – Anthony Moore Commented Jul 6, 2020 at 9:36

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Background-color:

body.custom-background {
        background-color: #0f0f0f; /* Color for the two borders */
}

#page {
    background: #0f0f0f; /* Color for the content/body part in the center */
}

#site-generator {
    background: #0f0f0f; /* Color for the footer part in the center */
}

You can also take it together into one snippet that changes the color of all three:

body.custom-background, #page, #site-generator { background: #0f0f0f; }

Your page background is kind of 'split' in two parts. Two borders at the left and right side and the center part.

This situation is the same in the footer. You can change the color of the middle section (like you did), but not the border color. The first part (body.custom-background) is about the border and applies to both the border besides the content and besides the footer. So if everything should be black, applying the above code is enough. You can put it in Customizer > Additional CSS.

I now chose for the color #0f0f0f, because that is the current background color. If you want pitch-black, choose #000000.

Let me know how it does!