Site icon PIED TYPE

Doin’ the WordPress switch again

Chateau header problem
Chateau header shows how position:absolute works - almost

As you can see, I’ve been redecorating again. What you’re looking at, for the moment at least, is “The Morning After” theme. It certainly isn’t the most attractive front page I’ve ever used, but I wanted to try a magazine theme. The idea with such themes is to keep the front page as short as possible, with minimal downward scrolling, while providing easy access to larger presentations inside the magazine/blog.

I also wanted to try out an HTML coding trick called position:absolute. Until now, I’ve never managed to pull it off on my own; I’ve always had to ask for help in the forums. In simple terms, it entails putting a bit of code in an ordinary text widget and having it appear as an element somewhere else on the page. (This is what I’ve had to do to put the PiedType copyright notice in my page footers.) Specifically, what I’ve done here is use position:absolute to put my custom header on top of or in front of the default header; my header is covering up the default header. (A big shout-out to panos over at WordPress Tips for detailed information on how to do this.)

Some of you may have seen me working with this last night; I was trying to change the Chateau theme header. Not until I’d rolled out the theme did I discover there’s a problem trying to use position:absolute with Chateau headers (again, info from panos). I couldn’t solve it, so abandoned that theme (my first choice, unfortunately) and loaded this one instead. If I can solve the problem, or if I decide to abandon my custom header font, I may install Chateau again. It has some features I really like. Both themes allow seemingly infinitely long lists of archived posts with intros/excerpts, which I find highly desirable.

The beauty of position:absolute is that you don’t need to buy the CSS upgrade to use it; HTML is already available to every WordPress blogger. I’m determined to master this bit of coding magic that goes into a widget and makes something appear somewhere else on the page.

Exit mobile version