Styling a WordPress Child Theme with Genesis

In my last post and video I explained how to make a child theme for the Genesis theme framework in WordPress. In this article I explain how to start styling the Genesis child theme.

Here you can see where we left off last time with the Genesis child theme only just set up plus an image of the Photoshop visual I used to show the client how the home page would look:

Once the client was happy with the PSD visual, I started creating the child theme locally using MAMP, Photoshop and a text editor.

As you can see above left, the default Genesis child theme looks particularly uninspiring but it is actually very quick to style up the new theme using Genesis. I have made around 10 videos of 5 minutes each showing how I did this, so it can be done in less than an hour!

Genesis Theme Settings

If you look again at the Genesis default theme above (kinda ugly, eh?) you see 3 gray bars across the top. All we need is one top horizontal navigation menu – which is sort of standard these days.

We can get rid of the other two straightaway by going into Genesis Theme Settings on the left hand side of the WordPress administration area.

I will run down the basics of the Theme Settings from the top to the bottom.

• Firstly, I have the default Enable Automatic Updates checked. This means you can update Genesis with a mouse click when the updates come out – as with WordPress, you should do this every time an update comes out. This is one of the benefits of using Genesis – it is developed alongside WordPress and so will always work whatever happens to the WordPress core.
• Leave the Custom Feeds section blank.
• Default Layout is a cool Genesis feature where you can put a sidebar on the left or right, have no sidebars or two sidebars in various arrangements. You can change this on a page by page basis (even cooler). For this site I put the sidebar on the right.
• For Header Settings you can either have an image or the text of the site title. I chose “Header Image” for this site.
• In the Navigation Settings you can choose to have only primary navigation which gets rid of one of those ugly gray bars. You can also Enable Fancy Dropdowns which adds a rather nice Suckerfish delay to your dropdown and makes you look like a coder rockstar when you’re not. You can add other options to the navbar such as today’s date or a site search.
• You can choose which pages you want Breadcrumbs on (I turned these off to get rid of that other ugly gray bar).
• You can choose to have Comments and Trackbacks on posts only but not on pages (as is the usual way).
• You can alter the output of your main blog pages by choosing to have excerpts only and thumbnail images, for example, in the Content Archives section.
• In the Blog Page section you can choose to have only certain Categories listed. I left this with All Categories.
• And lastly you can add various scripts to your header and footer sections of the webpages in Header and Footer Scripts. This is useful for installing Google Analytics and jQuery scripts.

I generally like to do as little as possible here in the Theme Settings and as much as possible in the style.css and functions.php files. The Theme Settings, although important, are only very general controls. When you are creating websites for demanding clients. Most of the action takes place in CSS-land.

Adding a background color and image

This is, of course, straightforward CSS. The background is a light brown color with a gradient running down from the top where it is darker. In the video below I copy a slither of the background and then create a one-pixel wide GIF in Photoshop of the gradient and same that in the child theme’s images folder as bg.gif. The CSS to create the background is:

body {background : #f3ece1 url(images/bg.gif) repeat-x; }

This repeats the one-pixel wide GIF along the top of the background and then, under the repeated GIF is a background color of the light brown #f3ece1. This color I sampled with the Photoshop Eyedropper Tool (I) was the color of the last pixel at the bottom of the copied slither from the PSD. This means that the gradient runs down from the top to the background seamlessly.

Adding a background color to the main page wrapper

This actually makes most of the page light brown which isn’t much good, so, in order to get the main core of the page white I added some CSS to a div id in the mark-up that contains all the page elements. In most web page mark up there is a div id called “wrap” or “wrapper”. In Genesis it’s called “wrap”.

#wrap {margin: 15px auto;
background: #fff;
width: 960px;
padding: 20px ;
-moz-box-shadow: 0px 0px 5px #aaa; -khtml-box-shadow: 0px 0px 5px #aaa; -webkit-box-shadow: 0px 0px 5px #aaa; box-shadow: 0px 0px 5px #aaa; }

This CSS above colors the central area white. I’ll go through the above, line by line:

• margin: 15px auto; puts 15 pixels on top and bottom and makes sure the whole website is centered – this is from the default Genesis theme
• background: #fff; makes it white
• width: 960px; makes it 960 pixels wide (good job I’m here!)
• padding: 20px; this adds 20 pixels of white around it so that the background doesn’t butt right up against the edge of the text (so it isn’t 960 pixels wide, it’s actually 1000 pixels wide – CSS will drive you mad!)
• -moz-box-shadow: 0px 0px 5px #aaa; … etc. adds an even shadow around the wrap in all most of the main browsers

So that’s the background and the wrap finished, now it’s on to the header logo.

Adding a header logo in Genesis

As you can see above I chose “Header Image” under Header Settings in the Genesis Theme Settings above.

I saved the logo in Photoshop and put it in the child theme images folder and then added this to the CSS:

.header-image #title-area {background : url(images/logo.jpg) no-repeat top left ; }

This adds the logo to the top left of the header which returns us to the home page when clicked.

The logo for this site was deeper than the space allowed so I had to add a greater height to another two elements in the stylesheet.

#header {height: 126px;}
.header-image {height: 126px;}

Genesis themes are excellently coded and the CSS is just a joy to work with, however, this is one of the few cases where you have to add something twice!

Starting to style a Genesis child theme in WordPress

I actually did realise I was filming myself for parts of this video so I apologise for the unkempt appearance.

Here is the video where I change the Genesis Theme Settings and style the background and logo in WordPress using a Genesis child theme. It also may help you to view the previous video where I create the child theme and the following video where I move on to a header text widget and the top navigation bar.

What do you think?

Hopefully this contained some useful CSS tips for those that don’t use Genesis and was helpful for those that do! I’m always interested to hear about how you create WordPress themes or if you have any questions.