Beefy Boxes and Bandwidth Generously Provided by pair Networks
Perl-Sensitive Sunglasses
 
PerlMonks  

Comment on

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

I am pleased to announce that PerlMonks now features Cascading StyleSheet support. You can supply either the URL of an offsite stylesheet, or supply CSS markup directly to be stored here onsite. Please report bugs to me.

For those unfamiliar with CSS, this essentially means that you can make the Monastery look (almost) however you'd like it to. Pick your own colors, fonts, etc. You should even be able to put the nodelets on the left, or do even more radical things. It's also a safe way benefit from the creativity of any monk interested in improving the site. Rework the Monastery in CSS... share your code... be merry. :-)

Of course, it wouldn't be any fun if there weren't any challenges, would there? As you're doubtless aware, if you've ever once peeked at the source code, the Monastery's markup isn't quite valid HTML. And there aren't a whole lot of DIV tags to make it easy to distinguish one section or element from another. And some chunks of text, like 'search' and 'PerlMonks' and 'The Monastery Gates', are actually images, so you really can't change them much with CSS. And there are probably a few other interesting features that aren't occuring to me at the moment.

The pmdev team is working feverishly, night and day, to fix these things... while still keeping the place safe for our handful of die-hard Netscape 2.0 users. :-). Indeed if you look, you may notice that the markup has improved a bit. For now, though, you'll have a bunch of stuff to work around. And as the HTML being generated will doubtless be changing, any very precise hacks you cook up stand in danger of becoming useless.

All in all, however, I find that you can do quite a lot with what's there already. As an example, I've cooked up a not-too-complicated example. Try pasting this into the Link to external CSS stylesheet box:

http://www.brinzer.net/css/PerlMonks.css

You may view this stylesheet as text here. Yes, it's a little goofy-looking for daily use... this is an example. :-) And, in the interests of full disclosure, it loads an image from my site, which means that if you use it I can find your IP, some stuff about your browser, and launch an attack upon your machine. Though in fact, I won't, unless I'm just astoundingly bored and it's too dark out to watch the grass grow.

Anyway, where was I? :-) Oh, yeah... stylesheets. A little history: I suggested this over a year ago... and I wasn't the first. But it wasn't a high priority, and at the time our Fearless Leader was doing all the development work singlehandedly, and nothing really came of it.

Then, several days ago, I was cleaning up some code, and I came across crazyinsomniac's custom title hack. I hadn't been familiar with it, and it turned out to be useful and interesting.

A little more useful and interesting than he'd intended, however. :-)

A few hours later, it occured to me: this thing let you put arbitrary strings into the head of every document you see on the site. The first thing I did was add </title><!-- to the end of my title, which sucessfully made a mess of the formatting and nodelets. Shortly thereafter, I cooked up a stylesheet and changed that to </title><link rel="stylesheet" href="http://www.brinzer.net/css/PerlMonks.css" type="text/css" /> Voila! I once again validated my gradeschool teachers' opinion that I was nothing but a troublemaker.

Anyway, after this little proof of concept was discussed, vroom kindly gave me the go-ahead to add the feature properly, and jcwren applied the patches. No, ending the title tag early no longer works... you'll have to be more creative if you want to sneak something else (javascript, perhaps) into every page you see.

Anyway, I'm out the door... I'm having Lasik done within the hour, and I'm not certain how quickly I'll be able to use the computer again. Pardon me if I'm slow in responding. I hope everyone has fun with this, and at least one or two people are as excited about it as I am. :-)

Edit Petruchio Thu Feb 14 12:08:25 UTC 2002 - Minor grammatical correction, to alleviate the author's embarrassment.


In reply to We Stylin'! by Petruchio

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



  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • Outside of code tags, you may need to use entities for some characters:
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.
  • Log In?
    Username:
    Password:

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

    How do I use this? | Other CB clients
    Other Users?
    Others avoiding work at the Monastery: (5)
    As of 2014-08-30 20:27 GMT
    Sections?
    Information?
    Find Nodes?
    Leftovers?
      Voting Booth?

      The best computer themed movie is:











      Results (293 votes), past polls