Decrypting Thesis CSS: Navigation Made Simple

Unsexy The­sis Navigation

In the pre­vi­ous install­ment of Decrypt­ing The­sis CSS, I talked about how to cus­tomize your ban­ner using CSS. In this install­ment, I’m going to let you in on the secret of cus­tomiz­ing your nav­i­ga­tion bar (the shiny thing where all your links hang out). Dave Doolin of Web­site in a Week­end has an excel­lent tuto­r­ial on cus­tomiz­ing the CSS for any Word­Press nav­i­ga­tion (and help­ful graph­ics to boot!). He’s using The­sis 1.5 on his end but the the­ory is the same, any way you slice it. I’d rec­om­mend giv­ing that a once over before check­ing out my tips and tricks.

Check­list o’ Essentials

Before begin­ning:

1. Open custom.css and custom-functions.php in your favourite text edi­tor or HTML IDE (ie., Dreamweaver).
2. Open your FTP client.
3. Have a back-up copy of your custom.css and custom-functions.php saved on your hard drive. Y’know, in case you make a boo-boo. Hey, it happens.
4. And read Dave’s tuto­r­ial. It’s a great leap-off for what we’re work­ing on.

Cus­tomize the Nav­i­ga­tion Colours

The default of any­thing is bor­ing, let alone the default nav­i­ga­tion set­tings for The­sis. It’s so… pedes­trian! Let’s jazz it up.

/* Custom Nav */
.custom .menu { background:#a5d643; border-style:none; border-bottom:none; }

In the first install­ment of this series, we talked about the .cus­tom selec­tor. Poke poke, The­sis. We’re work­ing in cus­tom ter­ri­tory here. By set­ting the back­ground colour of the .menu, you’ve coloured the con­tainer… but not the links.

Save and upload this change.

See how the tabs are still gray and bor­ing? I’ve got the remedy.

.custom .menu .tab-1 a { background:#a5d643; color:#ffffff; text-transform:lowercase; border:none; letter-spacing:-0.02em; }
.custom .menu .tab-1 a:hover { background:#5f3c76; color:#ffffff; text-transform:lowercase; border:none; letter-spacing:-0.02em; }

For, like, half a minute, I was tempted to show you the wall of code that was violetminded’s menu. Fig­ured that was cruel, like real green dresses or some such non­sense. Onto decod­ing that madness.

We’re drilling down a lit­tle fur­ther in our selec­tor hier­ar­chy by tak­ing a look at .tab-1, which is the first link in the nav­i­ga­tion. There are two dif­fer­ent lines of code doing sim­i­larly dif­fer­ent tasks. The first line deals with the anchor (just the link by itself). It changes the back­ground colour and the font colour, trans­forms the text to lower-case, removes the nasty bor­der, and decreases the letter-spacing.

The let­ter spac­ing is non-essential. It’s just good typog­ra­phy prac­tice for the type­face I chose for violetminded.

The sec­ond line of code deals with the hover state of the anchor. You move your mouse over that link and it dances the funky chicken. Don’t want the funky chicken? Change the colours around for the back­ground and font. It’ll disco… or something.

You’re likely to have many other links in your nav­i­ga­tion. Rinse and repeat as needed.

Caveat: The .tab nam­ing sys­tem falls apart when it comes to cus­tom links, sub­scribe, and home.

.custom .menu li a { background:#a5d643; color:#ffffff; text-transform:lowercase; border:none; letter-spacing:-0.02em; }
.custom .menu li a:hover { background:#5f3c76; color:#ffffff; text-transform:lowercase; border:none; letter-spacing:-0.02em; text-decoration:none; }

By spec­i­fy­ing that you’re alter­ing a list-item (the li selec­tor), you’ve got your bases cov­ered. The only thing that’s dif­fer­ent from the code above is that, for what­ever rea­son, there’s a default set­ting that sets the text-decoration to under­line. You can allow that, if that’s what you want, but be sure to set the text-decoration to under­line on all the other tabs. Why, you ask? Con­sis­tency, answers I.

No mo’ gray! And that, my loves, is a beau­ti­ful thing.

Mov­ing the Nav­i­ga­tion Bar Below the Banner

Hav­ing the nav­i­ga­tion above the ban­ner isn’t for every­one. Some­times, you get the urge to be bold and wild by mov­ing the nav­i­ga­tion under­neath! Nav­i­gate your­self to the custom-functions.php.

As much as I respect WP Designer and his desire to teach through mak­ing you type out code snip­pets (hey, it got me started on cus­tom Word­Press themes), I’m a code mon­key. Through and through. And what did I learn in uni­ver­sity and beyond? If you can copy & paste the code, it means that you’ve elim­i­nated the pos­si­bil­ity of typ­ing error.

So, do your­self a favour, and copy & paste his snip­pet into your custom-functions.php.

//Move nav below header
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');

Wild, isn’t it?

These are hooks. Hooks are friends. It’s how we get around in The­sis. I know what you might be think­ing and I thought it too: “DAMN THAT LOOKS COMPLICATED.” I told Dave the same thing. Then he helped. Dave’s a The­sis wun­derkind. He told me that once you get the basics under your belt, it’s actu­ally pretty easy. Seri­ously. And it was. But I digress. Let’s break down what that code does.

Assum­ing you’ve ran off to read those web­sites, you’ll under­stand what the “remove_action” and “add_action” are there for. Essen­tially, by remov­ing the “thesis_nav_menu” from before the header and adding it to after the header, you’re mov­ing its posi­tion. In code.

That was all you. And some sexy code.

Next up: More Nav­i­ga­tion CSS Tips ‘n Tricks.

Check your inboxes and Read­ers for the next install­ment in the series: Decrypt­ing The­sis CSS: Advanced Nav­i­ga­tion Tech­niques. Need more? Fol­low me on Twit­ter!

Tagged as: css, how-to, tutorial