Draft - please don't reply or vote for this post; /msg me instead. Thanks.
This is intended as a reference to the various on-site stylesheets, along with a bit of information on CSS.

---

The appearance of PM pages can be customized via CSS files.

Perlmonks OnSite CSS Files

These are the CSS Themes at perlmonks:

• Common CSS for all themes
• Red theme
• Blue Web-Safe theme
• Dark theme
• Night Shift theme
• JBlue theme
• Green Web-Safe theme
• Perl-blue theme

All themes can be selected via the "Theme container" combo box in "Theme configuration" of the Display Settings node.

Note:entering their respective URI into the Link to External CSS stylesheet textbox or by including them via a import directive in the On-Site CSS Markup textbox will miss some colour settings, since at the time of this writing there are still colours configured directly in tags with BGCOLOR directives. Those colours are pulled out of the database and inserted on the fly.

This comprises the following:

class	in tags	Description
.reply	tr	headers of replies
.reply-body	tr	body of replies

Tweaking the Stylesheet

With that as base, you can further tweak the appearance to your liking by including CSS directives below, which will override any definitions present in the previously imported file.

You could load e.g. the red theme as base and provide for a exquisite pink background as follows:

body { background: #df7fc0; }
tbody.nodelet td, td.nodebody { background: #e888ff; }
tbody.nodelet th, th.nodehead {
  color: #ffff00;
  background: #b000f0;
}
[download]

Note that the definitions you set out in On-Site CSS Markup will be pulled out of the database and included in every page you retrieve. If your styleshets grow lengthy, consider placing them in a file off-site and including them as set out above.

Changing the appearance of your homenode

Insert a link to a stylesheet at the top of your User's Bio textbox:

<style type="text/css">
@import url("http://example.com/pm.css");
</style>
[download]

Onsite stylesheet tweaks

• planetscape's scratchpad holds tweakings that add glyphs for several monks
• Perlmonks CSS font size hack
• Re: The big Vote button
• ...

External stylesheets, ready to use

• Dark theme with Saint Colours
  This Dark theme based CSS colours links and text pertaining to monks shown in Saints in our Book according to their XP (red), writeups (green) and time at the monastery (blue), which colours are overriden with their reported foreground and background preferences. /msg shmem to add yours.
  Monks appearing reddish gained much XP with (relative) few writeups in (relative) short time. Those that tend to green are busy writers, whilst gaining (relative) little XP with their posts; blueish ones are lurkers. violet monks are old souls with few posts, but much XP gained either through their posts or by reading and voting with diligence. And so on. Sainthood tends to white.
  Has significant impact on rendering time.
• ...

More offsite CSS ressources will be added as authors agree with publication.

Perlmonks CSS history

• Use node # as CSS class names?
• Add CSS class for signatures?
• ...

Further readings - ressources and tips

• W3C Cascading Style Sheets, level 1
• W3C Cascading Style Sheets, Level 2
• CSS Zen Garden - more than you ever wanted to know about Style Sheets
• CSS tip for offline perlmonks writing
• ...

ID and CLASS Attributes used at PerlMonks

TODO

---

Please /msg me if you have any additions/corrections/objections.

---

Changelog

2007-02-03
Corrected selection of Theme, added caveat for CSS import
2007-01-31
added tweaks xdg /msgd, Perlmonks CSS history section, adrianh's links

---

---

Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!

Titles consisting of a single word are discouraged, and in most cases are disallowed outright.

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! —

• How do I compose an effective node title?
• How do I post a question effectively?
• Markup in the Monastery

Posts may use any of the Perl Monks Approved HTML tags:

a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, 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, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr

You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)

	For:		Use:
	&		&
	<		&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.