http://qs321.pair.com?node_id=116943

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.

Replies are listed 'Best First'.
Re: Fun with PerlMonks and CSS
by Masem (Monsignor) on Oct 05, 2001 at 18:04 UTC
    The themes look great, and I'm glad to see you using CSS classes, as such themes can then be 'overriden' by the end user with ease. When/if PM gets to use CSS in a more functional manner, it will be very easy for individaul users to create their own themes and the like (Some have suggested that PM could store these themes for users as well, which isn't too hard as well).

    -----------------------------------------------------
    Dr. Michael K. Neylon - mneylon-pm@masemware.com || "You've left the lens cap of your mind on again, Pinky" - The Brain
    It's not what you know, but knowing how to find it if you don't know that's important

Re: Fun with PerlMonks and CSS
by Maclir (Curate) on Oct 05, 2001 at 16:52 UTC
    Can I give this a double ++? For a while I have felt that site developers should be more aggressive in moving towards current standards (like XHTML, CSS . . .) So someone with Navigator 3.0 or IE 2.0 can see the site? Tough cookies. There is the "web standards project" (or something like that, sorry, no link at present) that is suggesting people have their markup to tell people with broken browsers (including Netscape 4.7 and lower) that they need to update their browser.

    I am running IE5.5 here, and the pink and blue themes would not display. The blue theme looked great.

      While I'm all for moving with the Standards, I think it seriously depends on the application IMHO. Would you want to force people to upgrade to purchase something from you? I think not. For some sites, it's fine to push the envelope, but if you are expecting someone to give you the priviledge of their cash (when their is probably hundreds of other sites selling the same thing in the same price range), I think you have to bend to the user.

      I'm not suggesting that you aim for IE 2 but sites should degrade nicely for users with at least 4.* browsers.

      -Lee

      "To be civilized is to deny one's nature."