Decrypting Thesis CSS: Header Magic

Default The­sis. Not sexy yet.

You’ve down­loaded and installed The­sis on your favourite Word­Press blog. You’ve heard the pros wax lyri­cal on its strengths (and it has many), why you needed to adopt this pow­er­house imme­di­ately if not sooner, and the lit­tle tweaks you can do to make your expe­ri­ence all the more lovely. And yet, you’re still fum­bling to make your The­sis themed blog stand out from the crowd.

Your stan­dard The­sis instal­la­tion looks some­thing like this: clean and min­i­mal­ist. I sus­pect that Chris might have had a tawdry love affair with Geor­gia at some point in the devel­op­ment process ’cause that’s our default type­face. So, hot damn,  what now?

You’ve got­ten your hands dirty in the The­sis Design Options more than once but you’re unsat­is­fied with how lim­ited it can some­times feel. You want to get your hands really into the thick of it by cus­tomiz­ing the CSS. Leave it to me, folks. I’m going to attempt to tame the wild waves of The­sis CSS.

Before get­tin’ down with the CSS Decryp­tion, you’ve gotta have a bit of back­ground in Cas­cad­ing Style Sheets. Basic stuff: selec­tors, prop­er­ties, and the like. First timer? Don’t worry, I’ve got you cov­ered. Check out the rec­om­mended before going for­ward. For every­one else, press on!

Rec­om­mended Read­ing for the CSS Neophyte

W3 Schools — CSS School

Selec­tu­to­r­ial from MaxDesign

Line 25 — Must Read Arti­cles for the CSS Beginner

Hongkiat — 20 Use­ful CSS Tips for Beginners

Start­ing at the Top: Ban­ner Customization

Let’s start with the most impor­tant part of any web­site: the ban­ner (mast­head, for those of us with a love of the pub­lish­ing indus­try). As long as you’ve got­ten your­self some sort of (well-designed) graph­i­cal ban­ner, we’re set.  Locate that tasty lit­tle tid­bit known as custom.css and open it up in any sort of plain text edi­tor (even the The­sis code edi­tor works, sorta).

Check out that COMMENT SECTION. Beautiful.

I digress.

A note before we get started: go into the The­sis Options in your Wor­dress Admin and turn on the “Use Cus­tom Stylesheets” option. If you don’t, it won’t rec­og­nize our .cus­tom selec­tor. Using the .cus­tom selec­tor pokes The­sis and lets it know that there are cus­tom changes being made out­side of the orig­i­nal design options.

Let’s code, baby.

/* Bitchin' banner */
.custom #header #logo a { display: block; background: url('images/intro.jpg') no-repeat; outline: none; border: none; width:1000px; height:365px; }

Let’s break that bitchin’ ban­ner code down a lit­tle bit. There are quite a few selec­tors hang­ing out in that line of short­hand CSS.

.cus­tom — remem­ber, that’s how The­sis knows we’re mak­ing cus­tom changes.
#header — this is the con­tainer that holds together the logo, RSS, and tagline.
#logo a - we want our ban­ner to link back to our home­page. By edit­ing the anchor selec­tor, we’ve ensured that the back­ground image we’re using is clickable.

Be sure to upload your ban­ner to The­sis’ custom/images folder.

But wait. Your blog title and tagline are still kick­ing around. Let’s fix that.

/* This line gets rid of the site title & tagline by casting them out to far left field */
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }

This snip­pet will send the text fly­ing off to Never Never Land for both your #logo and #tagline.

/* This line collapses the vertical space of the tagline so that there isn't unnecessary white space after the header image */
.custom #header #tagline { height: 0; }

Cow­boy coder, baby. That’s how I roll. This snip­pet will shrink the white­space cre­ated by the tagline so that every­thing will look sparkly and fancy.

High-five! You now have a graph­i­cal banner!

So, what now?

If you enjoyed this arti­cle, give it a retweet, share it on Stum­ble, or sub­scribe to get all the fresh vio­let con­tent. Can’t wait for all that jazz? Fol­low me on Twit­ter.

Com­ing attrac­tions on vio­let­minded: the “very vio­let newslet­ter”. It’ll be mag­i­cal. Just you wait.

Tagged as: css, how-to, tutorial