FacebookTwitter

How to Customize the Background With CSS in Genesis

By on Dec 14, 2010 in Genesis |

Share On GoogleShare On FacebookShare On Twitter

This quick tip will show you how you can customize the background with a few simple changes to your style.css file. Remember, it’s very important that you customize Genesis by using the sample child theme they provide. This will ensure your changes won’t be overridden by a Genesis theme update.

Moving along, we are going to make the default Genesis theme which looks like this:

genesis white small

And with a few simple lines of code turn it into this:

genesis gray small

You’ll notice that the bottom image has a gray background, and also nicely showcases a box-shadow effect that is new to CSS3. In order to get this look, simply open up your style.css file and we’ll make a few changes.

The first thing we want to do is add the background color, so find this at the top of of your stylesheet:

body {
	color: #333333;
	font-size: 12px;
	font-family: Arial, Tahoma, Verdana;
	margin: 0 auto 0;
	padding: 0;
	line-height: 20px;
	}

And then add this line to define the background:

background: #999999;

Your stylesheet should now look like this:

body {
	background: #999999;
	color: #333333;
	font-size: 12px;
	font-family: Arial, Tahoma, Verdana;
	margin: 0 auto 0;
	padding: 0;
	line-height: 20px;
	}

Next, we need to modify the #wrap just a bit to accommodate the new background. Find this:

#wrap {
	width: 960px;
	margin: 0 auto 0;
	padding: 0;
	}

And replace it with this:

#wrap {
	background: #FFFFFF;
	width: 960px;
	margin: 15px auto 15px;
	padding: 10px;
	-moz-box-shadow: 0 3px 3px #333333;
	-webkit-box-shadow: 0 3px 3px #333333;
	}

Save your changes, and then upload the new style.css file to your server and you’re done!