Seems like everybody over on Slashnet's #perlmonks has been playing with CSS lately. With all the discussion, I felt the urge to dabble a bit and see what I could come up with. I also wrote a lenthy reflection which I've quarrantined in a separate post for everyone to ignore. ;-)

Anyway, I spent yesterday concocting some views of my own little Monastery Gates, and I thought I'd share my concoctions, such as they are. As all the presentation information is set aside in .css files, it was quite easy to create a few very simple themes as well.

By the way, before you go anywhere, a few notes. For one thing, peek at the code. Note that there are no table tags. Layout is done entirely with CSS.

Note also that the only links that go anywhere are in the first post, 'Explanation'. Images of text I turned into actual text... but as I have no idea what sorts of fonts the average user has installed, I simply supplied a long list, and hoped for the best. And if you notice a few discrepancies here and there... well, it's because there are a few discrepancies. :-)

The first one is a Blue theme, which is intended to look much like the Monastery's default theme... it consists of valid XHTML and CSS, and renders pretty well on Mozillas Konquerors, and (I'm told) Internet Exporers of recent vintage. Netscape 4.x is... well, just what you'd expect (ie. really bad).

Then we have the Pink theme. The Pink CSS is valid, just like Blue's, but while the Pink demo page is valid XML, it's not XHTML. While I think a site-specific markup is a nifty solution for PerlMonks, most browsers disagree. Even developing it as I did, by looking at the page in Mozilla, it became clear that while a valid XML solution was possible, a nice one likely wasn't. Still most of those drab <div> tags stuck in there, only with some non-HTML tags mixed in.

And finally, the Green theme. Green's demo page is a bit messier... it's in the state in which I first (mostly) achieved the look I wanted on Mozilla. Neither the CSS nor the HTML is valid... I'd be somewhat surprised to find that it rendered properly on anything but Mozilla and its kin.

This is a very provisional effort, but I hope enough to interest people. Feel free to grab the code and play with it... see what other site features you can implement. Or turn a stylesheet into a template, molest it with your choice of templating module, and serve it up via CGI for more interesting dynamic themes. Or clean up what I've done; I'm very much a dilettante with this sort of thing. Or make some more creative themes. I've only made very minor changes... it would be possible, using the Blue XHTML page, to render a page which looked totally different than what we're used to.

Credit goes to OeufMayo's evil twin 'Briac' for the div.footer style info, which we both stumbled over for some time. He picked up my code and played with it for a good while, and might have something interesting to show for it. If so, I expect he'll post a link.

Update: Upon reflection, having only one theme that most people can even hope to see is a drag. Thus, I have created the new Mojo-Jojo Theme. It is truly obnoxious. After gimping Jojo, I'd say creating the theme took about 4 minutes.