HELP! I'm trying to change the BODY COLOUR of my website

  • 1
  • Question
  • Updated 6 years ago
  • Answered
HELP! I'm trying to change the BODY COLOUR of my website using css. I just can't find the bit of code that I need to change? Its just the body colour (where the text is) not the background image...Can anyone help??

my website www.beautytherapybrighton.com

Here is some of the code below:

body {
font-family: Arial, "Lucida Grande", Verdana, sans-serif;
font-size:12px;
color:#FFF;
text-align:center;
margin:0;
padding:0;
background-image: url(resources/wallpapered%20butterfly.JPG);
_behavior: url(http://s2.yolacdn.net/V0000120/templa...);
background-color:#000000;
background-repeat:repeat;
background-attachment:fixed;
background-position:top right;
}

div.page {
margin:50px auto 20px;
width:956px;
}

div.page_top {
background:url(http://s3.yolacdn.net/V0000120/templa...) repeat top center transparent;
_behavior: url(http://s2.yolacdn.net/V0000120/templa...);
margin:0 auto;
padding:0;
width:956px;
}

div.page_bottom {
background:url(http://s3.yolacdn.net/V0000120/templa...) repeat bottom center transparent;
_behavior: url(http://s2.yolacdn.net/V0000120/templa...);
margin-top:-80px 0 0 0;
padding:0 0 10px 0;
width:956px;
}

div.top_rounded_corner {
background:url(http://s2.yolacdn.net/V0000120/templa...) no-repeat top center transparent;
_behavior: url(http://s2.yolacdn.net/V0000120/templa...);
margin:0 auto;
padding:0;
height:8px;
width:956px;
}

div.bottom_rounded_corner {
background:url(http://s3.yolacdn.net/V0000120/templa...) no-repeat bottom center transparent;
_behavior: url(http://s2.yolacdn.net/V0000120/templa...);
margin:0 auto;
padding:0;
width:956px;
height:9px;
}

/* ================= */

div.ys_header {
margin:0 auto;
}

div.ys_heading {
text-align:center;
padding:0;
margin:0 auto;
voice-family: "\"
}

\"";
voice-family:inherit;
}

div.ys_heading h1 {
color:#663333;
font-size:210%;
margin:0 auto;
padding:0;
}

div.ys_heading h1 a, div.ys_heading h1 a:hover {
color: #663333;
margin:0 auto;
text-decoration:none;
font-size:210%;
display:block;
}

div.ys_banner_wrap {
background-color:#fff;
margin:10px auto 0;
}

#sys_banner {
background-image: url(resources/logo_for_white_backgrounds.jpg.cropped956x250o232%2C2s492x245.jpg);
_behavior: url(http://s2.yolacdn.net/V0000120/templa...);
height:250px;
width:956px;
margin:0;
padding:0;
}

div.ys_nav_wrap {
background:#fff;
border-top:#eee solid 1px;
border-bottom:#eee solid 1px;
overflow:hidden;
}

div#menu {
float:left;
width:100%;
background:#fff;
overflow:hidden;
position:relative;
min-height:30px;
}

div#menu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}

div#menu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}

div#menu ul li a {
color:#663333;
display:block;
text-decoration:none;
font-size:12px;
font-weight:bold;
margin:5px 0 5px 5px;
padding:5px 10px 5px 10px;
border:1px solid #FFFFFF;
white-space:nowrap;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

div#menu ul li a:hover {
color:#663333;
text-decoration:none;
background-color:#FFD8B3;
border:1px solid #f4efdd;
}

div#menu ul li.selected a {
color:#663333;
background-color:#FFD8B3;
border:1px solid #f4efdd;
font-weight:bold;
}

div.ys_nav2_wrap {
background:#fff;
border-top:#eee solid 1px;
overflow:hidden;
}

div#menu2 {
float:left;
width:100%;
background:#fff;
overflow:hidden;
position:relative;
min-height:30px;
padding:0;
margin-bottom:-1px;
}

div#menu2 ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}

div#menu2 ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}

div#menu2 ul li a {
color:#421611;
display:block;
text-decoration:none;
font-size:12px;
font-weight:bold;
margin:5px 0 0 5px;
padding:5px 10px 10px 10px;
white-space:nowrap;
-moz-border-radius-topleft:5px 5px;
-moz-border-radius-topright:5px 5px;
-webkit-border-top-left-radius:5px 5px;
-webkit-border-top-right-radius:5px 5px;
border-top-left-radius:5px 5px;
border-top-right-radius:5px 5px;
}

div#menu2 ul li a:hover {
color:#fff;
text-decoration:none;
background:url(http://s1.yolacdn.net/V0000120/templa...) repeat top center transparent;
}

div#menu2 ul li.selected a {
color:#fff;
font-weight:bold;
background:url(http://s1.yolacdn.net/V0000120/templa...) repeat top center transparent;
}

div#content {
background:url(http://s2.yolacdn.net/V0000120/templa...) repeat top left transparent;
_behavior: url(http://s2.yolacdn.net/V0000120/templa...);
min-height:200px;
margin:0 auto;
text-align:left;
padding: 1em;
}

div.ys_footer {
Photo of Carly Bryant

Carly Bryant

  • 14 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Carly,

The colour change can be done by replacing the hex code #xxxxxx. If you have Yola Silver or Gold then you can do this with the Site CSS facility:

#page {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #xxxxxx;
border-color: -moz-use-text-color #F3F3F3 #F3F3F3;
border-image: none;
border-right: 20px solid #F3F3F3;
border-style: none solid solid;
border-width: medium 20px 20px;
margin: 0 auto;
padding: 20px 0 0;
width: 978px;
}
Photo of Carly Bryant

Carly Bryant

  • 14 Posts
  • 0 Reply Likes
Hi, I changed the xxxxxx with ffffff and it didn't do anything?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Have you changed styles from Tastelessly to another?
Photo of Carly Bryant

Carly Bryant

  • 14 Posts
  • 0 Reply Likes
yes, I changed it to 'Coffee' which I prefer (header etc. is much nicer), I just want the body to be white also, is this possible?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Yes. The codes to alter these things vary from one Style to another so that is why the code couldn't work.

This one needs to be replaced by an image. make a white image 5 x 5 px as a .png file. Call it white-background.png. Upload it to your File Manager and then add this code to your Site CSS.
div#content {
background: url("resources/white-background.png") repeat scroll left top transparent;
margin: 0 auto;
min-height: 200px;
padding: 1em;
text-align: left;
}


Please remove the previous code from your site CSS as this is specific for tastelessly and not Coffee Style.
Photo of Carly Bryant

Carly Bryant

  • 14 Posts
  • 0 Reply Likes
It WORKED!!!! :) :) thank you so much for your help. Its finally starting to look how I want it to, yey.
Photo of Carly Bryant

Carly Bryant

  • 14 Posts
  • 0 Reply Likes
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Carly

The area you want to change is not the body area, but the content area. You won't need to use a white background image to achieve this, all you need to do is to first remove the background and then define a new background colour. To do this please follow these steps:
  1. Open your Site CSS Editor (the dialogue box viewed in your screenshot above).

  2. Click into the left-hand side Site CSS Overrides box, select all, und remove the existing code completely.

  3. Copy this code:
    
    
    div#content {
    background: none;
    background-color: #FFFFFF;
    }


  4. Paste this code into the Overrides box and check the result in the Preview tab on the right-hand side.

  5. Once you're happy with your changes, don't forget to save by hitting the "OK" button in the bottom right corner.

Please note: You've added some text with a white font colour to your content area. This text will now become invisible. You may want to change the font colour of this text before adding the CSS edit. If you'd like me to give you some CSS code to change your content font colour sidewide, please let me know the desired colour, and I'll be happy to assist you.
Photo of Carly Bryant

Carly Bryant

  • 14 Posts
  • 0 Reply Likes
Hello, yes this was my next mission! I have used a lot of gold and brown coloured text on my site but would like to have the colours match the exact colours of my logo design #C98534 #45322B and #533D32

am I going to have to do this by changing the css code also? is there no way of added these colours in with the basic colours so I could just highlight them and change the colour as I please?

Many thanks for your help
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Carly

The easiest is to set up in the Site CSS which text types should have which font colour. You can define that your headlines (h1-h6) have different colours and that your normal text has another one.

You can also change font colours individually as you compose your text by editing the HTML of your Text Widget. Here is how to do this:
  1. Just highlight the part of your text for which you'd like to change the font colour.

  2. Choose a random colour from the Text Editing Toolbar.

  3. Click on the blue HTML icon on the very right-hand side of the Toolbar.

  4. The HTML Editor of your Text Widget opens. Find the code snippet where it says "color". Change the hex value after the color attribute to the desired color hex value.

  5. Click on "OK" to save your changes – voilà!