Genesis Tutorials

Customising the Genesis Minimum theme header

I’m thinking of doing a series of posts on customising a theme. So this will either be the first of a series, or a stand alone thing. Either way, I hope you find it useful!

So, what are we going to be doing? Good question! Here’s the Minimum theme home page in stock form (click the image to see it in all its glory):


Did you pay particular attention to the header? Because that’s we’re going to be focussing on. Here’s what we’ll end up with:

minimum end result

Where to start, where to start?

1. Go to your style.css and add zis code:

[gist id=5217055]

Be sure to read the comments! I say add: you’re only adding one line. The rest is changing existing values.

So now we have a bigger header with a nice colour that stretches the full width of the page – we’re off to a good start! But we’re not done just yet…

2. White on orange works better, so let’s change the text colour. Back to the stylesheet! On line 208, change the color value to #ffffff (that’s the hex value for white, don’t you know). Hmmm, in case that line reference isn’t right for you, here’s the full code:

#title a,
#title a:hover {
	color: #ffffff;
	text-decoration: none;

3. Now for the menu text:

.menu-primary a, .menu-secondary a, #header .menu a {
    color: #FFFFFF;
    display: block;
    letter-spacing: 2px;
    padding: 20px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;

It’s just the color value we’ve changed.

4. We need to sort out what happens when we hover over any of our menu items. What looked good before doesn’t look so good now we’ve messed around with the colours. Here’s our new code:

.menu-primary li a:active,
.menu-primary li a:hover,
.menu-primary li:hover a,
.menu-primary .current_page_item a,
.menu-primary .current-cat a,
.menu-primary .current-menu-item a,
.menu-secondary li a:active,
.menu-secondary li a:hover,
.menu-secondary li:hover a,
.menu-secondary .current_page_item a,
.menu-secondary .current-cat a,
.menu-secondary .current-menu-item a,
#header .menu li a:active,
#header .menu li a:hover,
#header .menu li:hover a,
#header .menu .current_page_item a,
#header .menu .current-cat a,
#header .menu .current-menu-item a {
	background-color: #DE9F76;
	color: #308D91;

Look’s kind of scary, but we’re only changing two values! There’s just a lot of selectors, that’s all. Nothing to be afraid of…

5. OK, we’re nearly done! We need to move our header text down a bit. How are we going to do that? Any takers? Padding! Let’s push the title-area div down 30px:

#title-area {
    float: left;
    overflow: hidden;
    padding-top: 30px;
    width: 35%;

And our custom menu in our widget in our header area down the same amount (go…equality!):

#header .widget-area {
    float: right;
    padding-top: 30px;
    width: 65%;

I think that’s it, folks! Call your friends over and show them your shiny new header. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *