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.
Re: We Stylin'!
by Rich36 (Chaplain) on Feb 12, 2002 at 19:39 UTC
|
Very cool. I'm already viewing Perl Monks filtered through http://www.actuallywebdesign.com/style.css. 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...
Rich36 | [reply] [d/l] |
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 - mneylon-pm@masemware.com
||
"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
| [reply] [d/l] [select] |
|
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. | [reply] [d/l] [select] |
Re: We Stylin'!
by belg4mit (Prior) on Feb 12, 2002 at 20:11 UTC
|
| [reply] |
|
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.
| [reply] |
|
| [reply] |
|
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;}
-Silent11 | [reply] [d/l] |
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. :)
| [reply] |
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
}
| [reply] [d/l] |
|
| [reply] |
|
|