[Theme: Twenty Fourteen] Change content/body background color

  • Resolved webbo69

    (@webbo69)


    10 years, 11 months ago

    Hi

    Tearing my hair out here trying to resolve what should be a very simple issue. I can’t seem to change the white (presumably, default?) background color of the body/content of pages/posts. NB. I am not trying to change the background color of the area within which the post sits: I’ve done that fine with:

    .site {
	background-color: #FF69B4;
}

    … but that still leaves my text on a white background.

    I’ve got Fourteen Extended and Fourteen Colors plugins activated, and am using a Child Theme to make any necessary changes to CSS.

    After looking at various “solutions” on the forum (albeit mainly for other themes), I’ve tried:

    body {
	background-color: #FF69B4;
}

.entry-content {
background-color: #FF69B4;
}

.single-post{
background:#FF69B4;
} 

.main-content {
	width: 100%;
	background-color: #FF69B4;
}

#page {
   background-color: #FF69B4;
}

.page {
   background-color: #FF69B4;
}

#wrapper {
	background-color:#FF69B4;
}

.wrapper {
	background-color:#FF69B4;
}

.page-content {
  background-color: #888;
}

.content{
background-color:#FF69B4;
}

.container{
background-color:#FF69B4;
}

    … all without success.

    I’ve seen suggestions that I should be amending (via Child Theme) the functions.php file, but can’t seem to find a solution there, either.

    I’m sure I’m missing the point here – does Twenty Fourteen have <divs> with unusual names that I’m perhaps missing?

    Any pointers would be greatly appreciated.

    Cheers

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

  • Are you using a developer tool like chrome’s developer tool or firebug? If your not and don’t know how to use it, link the page you are working on and we can show you how to figure this out.

    I had very similar problems and got to the bottom of it (literally) by logically going through the developer tool.

    Thread Starter webbo69

    (@webbo69)

    Hi Adrian

    Thanks for your offer of help. I’m building the site locally and hadn’t previously worked out how to upload it to my host test environment. Now I’ve done that. I’d previously looked at Firebug, but never took the time to understand it. I’ve now been looking at Chrome DevTools and appreciate how useful they (and probably Firebug) can be. I thought I’d be able to sort this myself with DevTools, but still can’t see the solution. Here’s a link to the page (totally basic at moment):

    https://webstersites.net/hairbeautique/

    Hope you can point me in the right direction.

    Cheers

    Clearly the problem is your website is too fab.

    JK ill take a look at it.

    Ok so here is how you would use chrome developer tool to figure out what element you need to change.

    1. Right click inspect element

    2. It will just show the head and the body, hover over the body and notice how it highlights the whole page.

    3. Expand the body, hover the first div and notice that it highlights most of the page, including the part you are looking to change. Expand this (noting the pattern?)

    4. Hover over the expanded elements until you find the one that still highlights the part you want to change, expand that. Keep doing until you go too far and start highlighting individual parts of the post, then just take a step back and that is the element you want to change.

    END LIST

    You will notice now that you have gotten into an html type called article. If you want to know what that is (I had never herd of it, so this was deffinitly worth my time to learn about this) go here https://css-tricks.com/video-screencasts/77-styling-an-individual-article/

    But for now ignore that. You will notice that if you expand the article, you get to the header div witch only highlights part of the thing you want to change, so according to what I said you have gone to far; but you havent. If you play around you will realise that the element you want to change is broken into two elements each with a white background: entry-header and -entry-content. Thease are the elements you want to change the background color of.

    Some neat things you can do with the dev tool: On the right hand side were all the styling is, you can actualy uncheck things to see the effect, or apply things that have been overwritten, OR EVEN apply new css to see what it looks like (refresh your screen to restore to default). There are a million other options too and I learn a knew use each day.

    Cheers.

    Thread Starter webbo69

    (@webbo69)

    Hi Adrian

    Many thanks for your help – greatly appreciated. DevTools is now my best friend!

    Cheers

    I have tried all this on my twenty fourteen site and cannot seem to get it to change to black – where am i going wrong?

    https://www.lowaltitudefilms.com/

    I finally accomplished changing the background color of the post box in the twenty fourteen theme by selecting all three parts of the post – header, meta (date etc) and entry – and including !important. It’s unclear to me what declarations in the theme I’m fighting a war with – maybe it’s this one:

    body {
    background: none !important; /* Brute force since user agents all print differently. */

    But !important in my child theme wins.

    The code:

    .entry-header
    {
    background-color: black !important;
    }

    .entry-meta
    {
    background-color: black !important;
    }

    .entry-content
    {
    background-color: black !important;
    }

    WELL JUST NEED TO ADD ONE THING IN ABOVE CODE:
    #main-content{
    background-color: #F7F2B3 !important;
    }

    WHOLE PAGE COLOR WILL BE CHANGE

    I almost got mine to change.

    The background changed with all the codes added in the above post but where I have the content itself is still white and my text is still black.

    Home page is showing different than the other pages: the bottom is white on the home page.

    Any clue? I’m stuck. Thanks!

    #site-header, #main, .page-content {background-color:white;}

    You can just color the bits you need colored in the style.css file of the template you are using. I just chose white as an example.

    OK, I finally got it. I may have changed too many styles but it’s all changed!

    These are the styles I changed:
    .main-content {
    background-color: #000000 !important;
    }

    .site-main .widecolumn {
    background-color: #000000 !important;
    }

    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
    background-color: 000000 !important;
    }
    .site {
    background-color: #000;
    max-width: 1260px;
    position: relative;
    }

    Thanks for all the guidance, I love the Chrome developer tools!! It really helps to identify each section/parts. : )

    for me i had trouble with the area below the left sidebar remaining black (i wanted to *not* use black as i am recoloring the theme to be gray)

    turned out it was .site:before that was causing it

    i had this:

    .site { background-color: gray !important; }

    and i needed this:

    .site, .site:before { background-color: gray !important; }
Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘[Theme: Twenty Fourteen] Change content/body background color’ is closed to new replies.