One of the things we want to do is educate users with some quick tips on customizing the Genesis theme framework. Inside the support forum you can find the sample child theme for Genesis, which will allow you to customize the default appearance of Genesis.
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 we 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:
And with a few simple lines of code turn it into this:
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!
About Brian Gardner
I appreciate the idea of child theme it is working great . I have used for two blogs of mine. I have tested above background color change it works fine Ratther it is too easy to change the look and feed so fast. Brian Gardner Great keep thinking on such ideas while having coffee
Great work. Love the idea of a ‘how to’ series so we (the css ignorant) can try out some new ideas.
Thanks so much for this…now to work on the header!
Mike
With WordPress 3.0 coming soon here’s a cool way too..
http://www.wpbeginner.com/wp-themes/how-to-enable-custom-background-in-wordpress-3-0-themes/
This is great for a newbie like me, Brian! Now if only I can figure out how not to override my original style.css file I’ll be set, but I’m sure I can do it. O_o
You have done great Job ,I Love this Idea of customizing the background with
Css,I’ll use these Idea Which You have mentioned here for My Upcoming Blogs…
Thanks For sharing this With us.
With CSS customization functionality you get a fine-grain control over your Wild Apricot website template design – by customizing the CSS code of your selected theme. This is great for a newbie like me. . I have used for two blogs of mine.
Love this Idea of customizing the background with..css great html work….this is we called a true thing…..I have tested above background color change it works fine Ratther it is too easy to change the look and feed so fast……
Thanks For sharing this With us.
Thanks so much for all this work Brian. I am so loving my Genesis theme so far. Will work super hard to get through all the tutorials. First step is to figure out how to change font sizes and colors. Wish me luck!
Thanks so much for the purchase Nanci – best of luck! Make sure you use the support forums if you have any questions. We’ve been know to be big on helping folks out!