Background colour around body

  • Resolved webadeptuk

    (@webadeptuk)


    11 years, 5 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

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter webadeptuk

    (@webadeptuk)

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Could you link the page in question?

    Thread Starter webadeptuk

    (@webadeptuk)

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

    Thanks

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter webadeptuk

    (@webadeptuk)

    it’s just using what it was by default

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Does this do it;

    .container { background: deeppink; }

    Thread Starter webadeptuk

    (@webadeptuk)

    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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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   */
}

    Thread Starter webadeptuk

    (@webadeptuk)

    that’s almost perfect…if you look now:

    https://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 ‘Background colour around body’ is closed to new replies.