Changing the background colour of single page

  • I’ve tried variations of most of the solutions presented,

    [Moderator Note: This has been split into its own thread. Please start new threads rather than jump into very old ones. Thanks.]

    but still can’t change the background of a specific page. I’m using the TwentySeventeen theme. I’ve added a page, and can get to it after adding it to a top level menu. Looking at the page source, I see:

    <body class="page-template-default page page-id-52 page-parent . . . . ."

    (The dots are mine, there are more items.)

    I added the following at the end of the style.css from Appearance -> Editor :

    body.page-id-52 { background-color: #f00 !important; }

    Going back to the page, there’s no change. So, am I close? What else might I try? Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Please provide a link to a page on your site where we can see this. Thanks.

    Thread Starter gkd720

    (@gkd720)

    Hmmm, this isn’t a real site. It’s just me playing around with WordPress on my laptop for a class I’m taking. So not sure how to expose to you. Anything I might try, or any experiments that would shed some light on what’s going on? Thanks.

    the style.css might be broken towards the end – try to add the CSS via ‘dashboard – appearance – customize – additional CSS’.

    there is also the possibility that some other element is totally covering the site…

    or that a background image is set…

    try using a browser inspection tool to see what is actually formatting your page’s background.

    Thread Starter gkd720

    (@gkd720)

    The style.css looks syntactically OK, and I added my stuff at the end, at the “top” level, outside of any class-specific formatting.

    I used the “Inspect element” in Firefox and poked around. The section I want to change the background color of seems to be a specific “div” element. Its code is below. The page has a couple of <style> specifications above this code, but nothing that looks like it generally affects the background. 

    <div class="site-content-contain">
<div id="content" class="site-content">
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<article id="post-52" class="post-52 page type-page status-publish hentry">

    So, in style.css, I tried the below code (with and without the “div”), but still to no avail:

    div.site-content-contain { background-color: #f00 !important; }

    OK, so I went back and tried putting some formatting in using the suggested “dashboard – appearance – customize – additional CSS”, and this actually did something. Although it now has the whole site with a red background (I see there’s more than one div called site-content-contain), but at least I was able to affect something. I need to limit it to that specific page. I tried just doing it to the page’s body class with:

    .page-id-52 { background-color: #f00 !important; }

    but that didn’t work. Although, sliding the whole page down a little (two-finger drag down in Mac OS) does reveal red behind the top image, so it’s doing something.

    So any more guidance on how to select a specific body/div element? Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Changing the background colour of single page’ is closed to new replies.