Decrypting Thesis CSS: Transparent Navigation

It’s been a while since we talked about Decrypt­ing The­sis’ CSS. Fig­ured that it’s high time we fin­ished up our dis­cus­sion on beau­ti­ful and cus­tomized nav­i­ga­tion. The last nav­i­ga­tion arti­cle talked about how to sim­ply and eas­ily cus­tomize your nav­i­ga­tion to be above or below the header, as well as cus­tomiz­ing it to be fully coloured.

This is the advanced class. Don’t be skip­pin’ ahead! Or, if you really want to, I guess we can let that hap­pen. Don’t for­get to bring me an apple next time. Or a shiny.

• Part One: Headers
• Part Two: Basic Navigation

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.

Trans­par­ent Navigation

Grey Sky Thurs­day: Trans­par­ent Nav, baby

You’ve got the solid colour blues, baby. You don’t want to have a solid colour — you want to have a beau­ti­ful back­ground image that will make you weep, just by look­ing at it. Okay, well, maybe not so pow­er­ful but still: there’s some­thing about a well-styled nav­i­ga­tion bar that gets a girl hot under the col­lar.

Or key­board. Whichever works.

This is a pretty easy tuto­r­ial, as long as you’ve read the bit on Basic Nav­i­ga­tion Styling.

.custom .menu { background:url(images/navbg.png) no-repeat; }

First, we’ve got to set the back­ground image that we want for the nav­i­ga­tion. Alter­na­tively, if you have no back­ground image you’d like to set (if you want the nav­i­ga­tion over-top that stylin’ ban­ner), set the background-property to none.

Look­ing good. One prob­lem: all the links are still gray. Shoot. Good thing we can fix that.

Just like when we were chang­ing the colours of the nav­i­ga­tion menu in the last tuto­r­ial, we have to set each menu item separately.

.custom .menu .tab-1 a:link{ background:none; text-transform:lowercase; color:#063261; border:none;} .custom .menu .tab-1 a:visited { background:none; text-transform:lowercase; color:#063261; border:none; }
.custom .menu .tab-1 a:hover { background:none; text-transform:lowercase; color:#229a69; border:none;}

Each tab will need to be set in the same man­ner, with a set of three dec­la­ra­tions: one for the nor­mal state, one for the hover state, and one for the vis­ited state. By set­ting the background-property to none, you’re declar­ing it as transparent.

Poof! Gray is gone!

This tech­nique is excel­lent for spec­i­fy­ing a nav­i­ga­tion back­ground or for plac­ing your nav­i­ga­tion over your ban­ner. Please note that some of these tech­niques haven’t been tested in Inter­net Explorer. Remem­ber: all good zom­bies cross-browser test. Except me. I’m a bad zom­bie. Baaaaad zombie.

More Nav­i­ga­tion Tips ‘n Tricks in the next Tutorial

Check your inboxes and Read­ers for the next install­ment in the series: Decrypt­ing The­sis CSS: Ver­ti­cal Nav­i­ga­tion. Warn­ing: this’ll be a tricky one. Trick­i­est of ‘em all. In the mean­time, you should fol­low me on Twit­ter.

Tagged as: css, how-to, tutorial