Beefy Boxes and Bandwidth Generously Provided by pair Networks
Welcome to the Monastery
 
PerlMonks  

comment on

( #3333=superdoc: print w/replies, xml ) Need Help??

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.


In reply to Fun with PerlMonks and CSS by Petruchio

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post; it's "PerlMonks-approved HTML":



  • Are you posting in the right place? Check out Where do I post X? to know for sure.
  • Posts may use any of the Perl Monks Approved HTML tags. Currently these include the following:
    <code> <a> <b> <big> <blockquote> <br /> <dd> <dl> <dt> <em> <font> <h1> <h2> <h3> <h4> <h5> <h6> <hr /> <i> <li> <nbsp> <ol> <p> <small> <strike> <strong> <sub> <sup> <table> <td> <th> <tr> <tt> <u> <ul>
  • Snippets of code should be wrapped in <code> tags not <pre> tags. In fact, <pre> tags should generally be avoided. If they must be used, extreme care should be taken to ensure that their contents do not have long lines (<70 chars), in order to prevent horizontal scrolling (and possible janitor intervention).
  • Want more info? How to link or How to display code and escape characters are good places to start.
Log In?
Username:
Password:

What's my password?
Create A New User
Domain Nodelet?
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others perusing the Monastery: (6)
As of 2023-02-07 12:12 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?
    I prefer not to run the latest version of Perl because:







    Results (39 votes). Check out past polls.

    Notices?