Beefy Boxes and Bandwidth Generously Provided by pair Networks
No such thing as a small change

We Stylin'!

by Petruchio (Vicar)
on Feb 12, 2002 at 18:09 UTC ( #144936=monkdiscuss: 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:

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="" 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.

Replies are listed 'Best First'.
Re: We Stylin'!
by Rich36 (Chaplain) on Feb 12, 2002 at 19:39 UTC
    Very cool. I'm already viewing Perl Monks filtered through What I'd like to see is a page of Monk contributed style sheets that could be used for the monestary - a node that could be linked to section of the user settings so that when users are specifying what stylesheet to use, they would have a list they could try out.
    It would be nice to have the HTML in the Monestary set up with some more <div> tags and class elements so that specific elements could be formatted through the stylesheets, but then you've got to take into account those browsers that don't handle CSS very well...
    ++ to you and I hope everything went well with the Lasik surgery...
Stupid Code Block Trick Re: We Stylin'!
by Masem (Monsignor) on Feb 13, 2002 at 16:16 UTC
    I've grown fond of having code blocks highlighted at other sites, and now I can do it here. Currently, CODE blocks that aren't inline get <pre><tt>...</tt></pre> wrapped, while inline ones get <tt>...</tt> (no pre's). Thus, I've got this in my CSS:
    PRE { background-color: #FFFF80; border: thin black solid; padding: 5px; }
    Now all my code blocks show up as boxed text on light yellow, nice and easy to follow between text and code.

    Dr. Michael K. Neylon - || "You've left the lens cap of your mind on again, Pinky" - The Brain
    "I can see my house from here!"
    It's not what you know, but knowing how to find it if you don't know that's important

      Here's what I've got (keep in mind that I use the Dark Theme):
      body { margin: 0px; font-family: sans-serif; } pre, tt { font-family: monospace; } a { text-decoration: none; } a:hover { background-color: cyan; color: #333; } pre > tt { display: block; color: green; background-color: #333; border: solid #888 1px; padding: 10px; width: 90%; margin-right: 0px; margin-left: auto; } input[type=submit], input[type=text], input[type=checkbox], input[type +=radio], select, textarea { border: solid #333 1px; } input[type=submit], input[type=text] { margin: 4px; }
      This way, my CSS won't make just any <pre> look like code, only <pre><tt>. I don't want to see every use of preformatted whitespace as code. Since I am selecting <tt> (an inline element) inside of <pre>, the styles apply to the <tt>; hence, the "display: block;" part.

      This code still suffers from the problem of mis-styling a <tt> used inside <pre> in cases like: <pre>blah blah blah, <tt>Typewriter</tt> <strong>power</strong></pre> (I know, It's contrived). However, this is because CSS can't select (or disallow) so-called "anonymous" elements (i.e. text chunks).

      Or, you can just do it your way, which is fine.

      Update: since I was having problems with the Everything Engine messing with my square and pointy brackets, I moved my CSS into an external file. I have updated the code block to reflect my latest CSS.

Re: We Stylin'!
by belg4mit (Prior) on Feb 12, 2002 at 20:11 UTC
    Personally I think DIV tags are almost certainly not the way to go, at least not for nodelets or anything else already in a container. For things that exist in container elements classes (class=nodelet) and ids (id=poll) ought to be more than sufficient.

    perl -pe "s/\b;([st])/'\1/mg"

      I'd actually have to disagree. While I've mangled more than a few tables in my day for nefarious "visual layout" purposes, div tags are truer to the purpose, are more flexible for styling, and create far less cluttered code. I'd love to see (and would even volunteer a bit of time to help out) perlmonks worked over in properly id'd/classed divs & spans.

        I think perhaps you must misunderstand me. Yes DIV and SPAN are by far the best tools for clustering content in a general application. But this is not a general application, we have pre-existing container elements (nodelets) which will not be disappearing, and so it seems it would be most effecient to refer to these than add addiotional elements.

        perl -pe "s/\b;([st])/'\1/mg"

Re: We Stylin'!
by silent11 (Vicar) on Feb 13, 2002 at 15:43 UTC
    here is the css I'm using with the Blue web-safe theme, It works well under win2k and IE 5.5 sp1.
    a {text-decoration: underline; color: 000066; font-family: verdana;fon +t-size: 10px;} a:visited {color:999999; } a:hover { color: cc0099;} td, body {font-family:verdana; color: black; font-size: 10px;} font {font-family: verdana; font-size: 10px;} TT {color: green; font-size: 12px;} iframe { width:0; height:0; position : -50 -50; } textarea {width: 100%; height: 250px;} table {border-color: 999999; border: thin 1 ;} H3 {font-size: 20px; font-family: Verdana;}
Troublemaker? :)
by Dog and Pony (Priest) on Feb 13, 2002 at 15:50 UTC
    Voila! I once again validated my gradeschool teachers' opinion that I was nothing but a troublemaker.

    You know, I am certain that this is mostly a good thing, and I've at several times wondered if "Being a troublemaker" wouldn't fit as a great fourth virtue. :)

    Apart from that, nice going. It is a fun thing to play with, and I for one is a strong beleiver and propagator that web (and other) design should be made pretty with CSS, and not with HTML. That is, I want to separate data from layout, and anything that promotes this is a good thing. Apart from being fun too, of course. :)

Re: We Stylin'!
by sfritz (Novice) on Feb 19, 2002 at 08:29 UTC
    I currently have the following, but I can't seem to find a way to distinguish between normal tables and the ones that make the headers/msg bodies.

    has anyone spoted a diffrence between them?

    code follows (ps I made it in InterDev, so some redundant stuff I thought was defined)

    BODY { COLOR: black; FONT-FAMILY: Arial, Helvetica; BACKGROUND-COLOR: yellowgreen } H1 { BORDER-RIGHT: #000000 double; PADDING-RIGHT: 7px; BORDER-TOP: #000000 double; PADDING-LEFT: 7px; PADDING-BOTTOM: 3px; BORDER-LEFT: #000000 double; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 double; BACKGROUND-COLOR: darkgreen } .highlight { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 3px; COLOR: #ffffff; PADDING-TOP: 3px; BACKGROUND-COLOR: #7b68ee } H3 { BACKGROUND-COLOR: yellowgreen; TEXT-ALIGN: center } A:visited { COLOR: darkolivegreen } A { TEXT-DECORATION: underline } .list { FONT-WEIGHT: bold } .small { FONT-SIZE: 8pt; FONT-STYLE: italic } .links { FONT-SIZE: 15pt; PADDING-BOTTOM: 5pt; PADDING-TOP: 5pt; TEXT-ALIGN: center } TABLE { BACKGROUND-COLOR: olivedrab } TR { MARGIN-TOP: 1px; MARGIN-BOTTOM: 1px; BACKGROUND-COLOR: yellowgreen }
      there's no difference, now. of course, the pmdev team is gearing up for some html changes to the site, so it may change in the near future.

      by the way, i set up PerlMonks CSS Examples for monks to add their stylesheets. i guess i forgot to mention it in this thread...


Log In?

What's my password?
Create A New User
Domain Nodelet?
Node Status?
node history
Node Type: monkdiscuss [id://144936]
Approved by root
and the web crawler heard nothing...

How do I use this?Last hourOther CB clients
Other Users?
Others cooling their heels in the Monastery: (6)
As of 2023-12-02 18:52 GMT
Find Nodes?
    Voting Booth?
    What's your preferred 'use VERSION' for new CPAN modules in 2023?

    Results (18 votes). Check out past polls.