Shaded Headers in Thematic

Andrew Bolster

Researcher at the University of Liverpool, Founder/Director at Farset Labs

So, as you can see the blog is sporting a new, cleaner look. Nothing better than experimenting! One of the nicer aspects of the new setup is the shaded headers (ie. <h1>/<h2> tags).

I started off my experimentation by going through WebDesignerWall’s walkthrough on the subject of text effects, but the limitation that I came across was that if you use their implimentation, any links (<a\>) in the header are lost ‘under’ the span.

Basically, the operation is to layer the gradient image over the text inside the <a> tag’s that are children of <h1>/<h2> (hence the ‘>’ in the CSS selector), so that the gradient image itself is still a link. Don’t worry about how the <span> tag gets there yet… In whichever css file you are using add the following block of css.

The relative position is important as it is what allows the gradient image to overlay the text. Next thing to worry about is getting the <span> tag inside the <a> tag without lots of legwork.

Welcome to JQuery gentlefolk; it can do magic for your bloodpressure. To keep it simple, add this function into your ‘functions.php’ (if you know you already have a JQuery script declaration, then you know enough to remove the relevant bit from below, if you don’t, ask in the comments)