WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] [closed] Background colour around body (27 posts)

  1. webadeptuk
    Member
    Posted 10 months ago #

    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

  2. Andrew
    Forum Moderator
    Posted 10 months ago #

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

  3. webadeptuk
    Member
    Posted 10 months ago #

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

  4. Andrew
    Forum Moderator
    Posted 10 months ago #

    Could you link the page in question?

  5. webadeptuk
    Member
    Posted 10 months ago #

  6. Andrew
    Forum Moderator
    Posted 10 months ago #

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

  7. webadeptuk
    Member
    Posted 10 months ago #

    it's just using what it was by default

  8. Andrew
    Forum Moderator
    Posted 10 months ago #

    Does this do it;

    .container { background: deeppink; }
  9. webadeptuk
    Member
    Posted 10 months ago #

    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

  10. Andrew
    Forum Moderator
    Posted 10 months ago #

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

  11. rdellconsulting
    Member
    Posted 10 months ago #

    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 */
    }
  12. rdellconsulting
    Member
    Posted 10 months ago #

    May need to change the Header & Footer too:

    .navbar-wrapper, footer#footer .colophon, header.tc-header  {
    	background-color:   #E0FFC1;    /* Light Green */
    }
  13. rdellconsulting
    Member
    Posted 10 months ago #

    Andrew was correct, add:

    .container[role="main"] {
    	background-color:   #E0FFC1 ;  /* Light Green */
    }
  14. rdellconsulting
    Member
    Posted 10 months ago #

    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   */
    }
  15. webadeptuk
    Member
    Posted 10 months ago #

    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

  16. rdellconsulting
    Member
    Posted 10 months ago #

    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;
    }
  17. webadeptuk
    Member
    Posted 10 months ago #

    PERFECT!!

    Thank you :)

  18. rdellconsulting
    Member
    Posted 10 months ago #

    Here it is in Black:

    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:   black ;               /* Change black */
    border:             2px solid #9DB668 ;   /* Delete if no border needed */
    padding:            0 10px 0 20px ;
    }
    
    .container[role="main"] {
    background-color:   black ;               /* black */
    }
    
    .navbar-wrapper, footer#footer .colophon, header.tc-header  {
    background-color:   black;                /* black */
    }
    
    .round-div {
    border:             104px solid black;    /* black   */
    }
    
    .carousel {
    background-color:   black;
    margin-bottom:      0px;
    }
  19. Andrew
    Forum Moderator
    Posted 10 months ago #

    @rdellconsulting, your CSS commenting standards are really good. Are you just doing this for a demonstrative purpose on this forum, or do you code like this in general?

  20. rdellconsulting
    Member
    Posted 10 months ago #

    Oh Andrew, how could you doubt me ;)

    At the moment, most of my time is spent building the library of Snippets and they need to have sufficient comments to help people.

    But I do actually try to comment all my work like this. I started as a Programmer many moons ago (do you remember COBOL haha), so had it drilled into me.

  21. Andrew
    Forum Moderator
    Posted 10 months ago #

    Interesting :)

  22. dfwmax
    Member
    Posted 10 months ago #

    @web

    I looked at your site on my iPhone 5 to see how the above changes worked and looked and noticed your featured images are off center. Just wanted to let you know. Great looking site.

  23. webadeptuk
    Member
    Posted 10 months ago #

    @dfwmax Thanks :)

  24. carissawp
    Member
    Posted 10 months ago #

    I would like to make a similar change on my site (prettyhungryblog.com) but in my case I would like the post body and sidebar to be white and the margins/background to be light gray. Could you tell me what code to insert?

  25. carissawp
    Member
    Posted 10 months ago #

    Thanks!

  26. esmi
    Forum Moderator
    Posted 10 months ago #

    People! Please post your own topics!

  27. rdellconsulting
    Member
    Posted 10 months ago #

    Start a new Topic @carissawp as this one is already [resolved]

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic