WordPress.org

Support

Support » Themes and Templates » Customizr » [Resolved] Background colour around body

[Resolved] Background colour around body

  • I’ve decreased the size of the main body so it doesn’t stretch to fit the whole screen but how do I change the background around the main body?

    Thanks

Viewing 15 replies - 1 through 15 (of 26 total)
  • Moderator Andrew Nevins

    @anevins

    Are you using a browser developer tool like Firebug or the one built into Chrome?

    Yeah I’m using Firebug but I can’t seem to find anything outside of the main body

    Moderator Andrew Nevins

    @anevins

    Could you link the page in question?

    Moderator Andrew Nevins

    @anevins

    Does the main body have a background colour, or does it just use what’s set to the <body> element?

    it’s just using what it was by default

    Moderator Andrew Nevins

    @anevins

    Does this do it;

    .container { background: deeppink; }

    no that changes the colour of the background inside the body but I want to change the colour of the white margins around the actual website

    Moderator Andrew Nevins

    @anevins

    You may need to set the background on ‘.container‘ in combination with the background on the ‘body‘ element.

    I’ve done this before on one of my sites. If you just change the body then the centre band (#main-wrapper) changes to same color. So you have to change that too.

    Probably will need more tweaking but see where this gets you.

    body {
    background: none repeat scroll 0 0 black; /* Change black */
    color:              #5A5A5A;
    padding-bottom:     0px;
    }
    #main-wrapper {
    margin-top:         0px ;
    background-color:   #E0FFC1 ;           /* Change Light Green */
    border:             2px solid #9DB668 ; /* Delete if no border needed */
    }

    May need to change the Header & Footer too:

    .navbar-wrapper, footer#footer .colophon, header.tc-header  {
    	background-color:   #E0FFC1;    /* Light Green */
    }

    Andrew was correct, add:

    .container[role="main"] {
    	background-color:   #E0FFC1 ;  /* Light Green */
    }

    Finally, you’ll want rid of the white squares.

    Here’s the full code:

    body {
    background: none repeat scroll 0 0 black; /* Change black */
    color:              #5A5A5A;              /* Default Text Color */
    padding-bottom:     0px;
    }
    #main-wrapper {
    margin-top:         0px ;
    background-color:   #E0FFC1 ;             /* Change Light Green */
    border:             2px solid #9DB668 ;   /* Delete if no border needed */
    }
    
    .container[role="main"] {
    background-color:   #E0FFC1 ;             /* Light Green */
    }
    
    .navbar-wrapper, footer#footer .colophon, header.tc-header  {
    background-color:   #E0FFC1;              /* Light Green */
    }
    
    .round-div {
    border:             104px solid #E0FFC1;  /* Lime Green   */
    }

    that’s almost perfect…if you look now:

    http://www.celticw.webadepthost.co.uk/wp/

    the main body of text and feautured image section is thinner than the rest.. is there a way to make it so it’s the same width as the slider and footer?

    also, there’s sections above the slider, below the slider and above the footer that are the same colour as the background..is there a way to make this white too?

    Thanks for all your help so far

    Bingo!

    body {
    background: none repeat scroll 0 0 black; /* Change black */
    color:              #5A5A5A;              /* Default Text Color */
    padding-bottom:     0px;
    }
    #main-wrapper {
    margin-top:         0px ;
    margin-bottom:      0px ;
    background-color:   #E0FFC1 ;             /* Change Light Green */
    border:             2px solid #9DB668 ;   /* Delete if no border needed */
    padding:            0 10px 0 20px ;
    }
    
    .container[role="main"] {
    background-color:   #E0FFC1 ;             /* Light Green */
    }
    
    .navbar-wrapper, footer#footer .colophon, header.tc-header  {
    background-color:   #E0FFC1;              /* Light Green */
    }
    
    .round-div {
    border:             104px solid #E0FFC1;  /* Light Green   */
    }
    
    .carousel {
    background-color:   #FFFFFF;
    margin-bottom:      0;
    }
Viewing 15 replies - 1 through 15 (of 26 total)
  • The topic ‘[Resolved] Background colour around body’ is closed to new replies.
Skip to toolbar