How to change background colour in editor on the Snow Berry theme?

Can you post a link to your site?

Hi soco,

My site is far from finished…

https://www.trimeager.com

Thank you for your help

Any ideas how to convert my white background to a darker colour like grey please?

Congratulations You did it! or would you like to edit container background?

Still not sure how to change the white background on my website, think this may be the container background? Just want to try and change the white to a dark colour, like grey.

Thanks

Edit
#main {
clear: both;
padding: 25px 0 0;
overflow: hidden;
background: #fff; (this will change container background color)
border-top: 1px solid #e5e5e5;
}
in style.css.

That is great help thank very much!

If you have a chance where can I change the colour of the background for the header and footer so the whole page is one colour?

Thanks

Your are having background images in your website which must be preventing background color to display on whole page. Images always override colors. You can verify my point by disabling image loading in your browser and reloading it again (you might need to empty your cache first).

You can find image links throughout your style.css and remove them. Like this one -> url(images/footer-bg.gif)

Remember to make backup first.

Removing image link from
#site-generator {
background: url(images/footer-bg.gif) 0 bottom repeat-x;
border-top: 1px solid #ddd;
color: #999999;
font-size: 13px;
line-height: 1.6em;
padding: 1.8em 0.5em 2.5em 0.5em;
text-align: center;
}
should remove image from footer.

And from
body {
background: #e5e5e5 url(images/main_bg.png) 0 0 repeat-x;
}
should remove image from header.

notify if still having any issue.

Thank you again for this help, it is great!

Another quick query, is it possible to alter the code in Snowberry theme to have an image/pattern as the main background?

Thanks

If Snowberry is the theme which you have on your website than find this code:

#main {
clear: both;
padding: 25px 0 0;
overflow: hidden;
background: #eaeaea;
border-top: 1px solid #e5e5e5;
}

and edit it to:

#main {
clear: both;
padding: 25px 0 0;
overflow: hidden;
background: #eaeaea url(‘LINK_TO_YOUR_IMAGE’);
background-repeat:r [CHOOSE ANY ONE OF THE BELOW GIVEN VALUES];
border-top: 1px solid #e5e5e5;
}

The following are background repeat values:

repeat -> background will repeat both vertically and horizontally.
repeat-x -> background will repeat horizontally only.
repeat-y -> background will repeat vertically only.
no-repeat -> background will not repeat and will show only once.

Are you using child theme or making changes in main theme. Its very important to use child theme, else your changes will be lost on next theme update. Checkout: https://codex.www.ads-software.com/Child_Themes

and edit it to:

Noo! You should never edit the main theme’s CSS. The changes need to be added to the child theme!

esmi is right. Its very important to make child theme first: https://codex.www.ads-software.com/Child_Themes .

@esmi I prefer copying whole css file from main theme to child theme. I find it more easy to make changes than (just my personal interest). So , I wrote that in this perspective.

I prefer copying whole css file from main theme to child theme.

And that is such the wrong way to go about creating a child theme! Child themes contain changes & additions – nothing else.

Lets have a situation where you want to remove coding of main theme. Than what can you do?

As in menus’s CSS Classes where you need to first remove some coding and than tailor them differently for different menu in many cases.

If you have a solution than please share.

@manishkumarruhil – please start your own thread for your questions.