Support » Theme: Twenty Twelve » Error with changing background to white on Twenty Twelve

  • I just set up the new Twenty Twelve theme on my site. By default the background is light grey (#e6e6e6). I wanted to change it to white and to use it with a grey and transparent chevron background to match my Twitter page for the time being and to test it out.

    I noticed that when I change the background to white, I lose some padding around the container. When I change it to an off white or basically any other color, it comes back. I thought that I might of had a problem with my code, so without nothing to lose I completely removed and reinstalled WP on my site to no avail.

    I suppose I can easily fix this issue by reworking my image and getting rid of the transparency, but in the future if I just wanted a white background, I’m going to run into this problem again.

    Any ideas to what’s going on or a solution?

    Here are screenshots to see what’s going on.
    With white background

    With grey background

Viewing 3 replies - 1 through 3 (of 3 total)
  • Can’t tell by images. Would need to see actual site so as to see the CSS code. And BTW, you should not be making any changes to theme files — but rather using a custom CSS plugin such as jetpack or using a child theme:

    Otherwise all your changes will be lost when WP is updated, and it’s also imperative that you have an unchanged copy of the default theme for troubleshooting purposes.

    This was a fresh WP install. Completely unchanged default theme. I could show you the CSS, but it was completely stock.

    First thing I did was go to my General settings and set that up. Then I went to Appearance > Background (or Appearance > Customize) and changed the background options there. That’s when I discovered the problem. Didn’t touch the Editor and didn’t install any plugins.

    Since I posted this, I did install Jetpack and have been making my own CSS changes there.



    Forum Moderator

    I noticed that when I change the background to white, I lose some padding around the container.

    well done for tricking it by using #fffffe as the background color behind your background image 😉

    this is some ‘interesting’ build-in formatting if the custom background color is set to white;
    in those cases, some code in functions.php is adding a special body_class to the theme.

    corresponding line in functions.php:

    elseif ( in_array( $background_color, array( 'fff', 'ffffff' ) ) )
    		$classes[] = 'custom-background-white';

    corresponding code in style.css:

    body.custom-background-empty .site,
    	body.custom-background-white .site {
    		padding: 0;
    		margin-top: 0;
    		margin-bottom: 0;
    		box-shadow: none;

    now the more challenging part:

    do not edit Twenty Twelve directly (the default themes of wp should stay unedited);
    – for changes in the templates, create a child theme to work with;
    – for just changes to the formatting, use a custom css plugin, such as the custom css part of ‘Jetpack’;

    to compensate the effect and get the padding back, add this in the custom css (or in the style.css of hte child theme):

    @media screen and (min-width: 960px) {
    	body.custom-background-empty .site,
    	body.custom-background-white .site {
    		padding: 0 40px;
    		padding: 0 2.857142857rem;
    		margin-top: 48px;
    		margin-top: 3.428571429rem;
    		margin-bottom: 48px;
    		margin-bottom: 3.428571429rem;
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Error with changing background to white on Twenty Twelve’ is closed to new replies.