Category: |
PerlMonks Related Scripts |
Author/Contact Info |
/msg particle |
Description: |
Petrucio recently introduced the capability to apply Cascading Style Sheets (CSS) to PerlMonks, in his We Stylin'! node. Rich36 suggested a node for sample CSS files, and I've taken it upon myself to create a node dedicated to just that. although it cannot be linked directly to user pages, it should serve as a repository for everyone's creations. my example is below... please feel free to add your own. |
/* make the body grey with blue text, sans-serif font */
body, td, tr { color: #457; background: #ddd; }
body { font-family:Verdana,Arial,Helvetica,sans-serif; font-size: 10pt
+; }
/* give tables a light blue border, and make headings stand out */
table { color: #457; background: #9ac; }
table td h3 { color: #457; background: #9ac; padding: 0.5em;}
/* color links */
a, a font { color: #457; background: #eee; text-decoration: none; }
a:hover { color: #eee; background: #457; }
/* inline code blocks are dark blue on light blue,
full code blocks are dark blue on light grey, bordered */
pre { color:#457; background:#eee; padding: 0.5em; border: 1px solid #
+457; }
tt { color:#ddd; background:#9ac; padding: 0 0.5em; }
pre tt { color: #457; background: transparent; border: none; }
/* override <font>...</font> tags */
font, b, strong { color: #457; background: transparent; }
/* err... um... nothing to see here! */
layer, iframe { display: none; }
|
Perl-blue theme
by Aristotle (Chancellor) on May 20, 2002 at 18:48 UTC
|
Description
A bright theme, but with toned down colors; contrast is high, but not stark. Vera (or Verdana) makes for excellent readability, and sparsely used Georgia provides eyecady.
Usage
A copy of the 2004-06-06 version is available as a proper theme in your Display Settings.
For newer versions, select the Blue Web-Safe Theme from your Display Settings and put index.pl?node_id=167905;displaytype=displaycode;part=1 in the Link to external CSS stylesheet field.
For a demo, just go to my homenode, which force-injects my stylesheet for all visitors. (Thanks to jeffa for the inspiration. :-) )
If your browser supports CSS Level 2, the look will be consistent. Mozilla is compliant; IE5 is broken and IE6 probably is too. Otherwise a number of elements that have no class of their own will remain in the theme's default darker blue.
Changelog
- 2007-04-16
- Updated to get rid of the various px font sizes; all font sizes are now relative. Also removed the font-size: smaller bits from various rules. They were there for the benefit of IE6, but made things look worse in other browsers. Added rules hiding behind the Holly hack to fix IE6 font size. No idea what IE7 does.
- 2004-06-06
- Added rules to widen the textarea in post/edit forms. The rule required for the reply form will need a second look as it has name="node", which also appears on the search field on the top of the page.
- 2004-02-20
- Fixed huge fonts for the title on section frontpages as per jarich's reply, and bolded the section title while I was at it.
- 2004-01-11
- I grew out of the Arial look. Now using Georgia for some large, prominent bits, but the default Bitstream Vera Sans everywhere else. Also deitalicized and right-aligned nodelet headers and removed the font-size: 1.1em on them.
- 2004-01-10
- Upon closer inspection, a lot of the HTML at PerlMonks has changed. Unfortunately, that includes handy CSS classes that were removed.. I made rather extensive changes, mostly dropping now useless classes but also adding some other bits. Also, added Bitstream Vera in one class I had overlooked before.
- 2004-01-09
- Now preferring the Bitstream Vera Fonts for those who have them installed. Updated the selector for the input box in the approval nodelet to reflect the (not so) new CSS id and class situation. Also added note to introductory text about implementing this stylesheet easily.
- 2003-02-13
- Updated to account for the recent changes.
- 2003-01-18
- Changed selector for consideration reason textinput in response to a recent class change.
- 2003-01-04
- The <h3 class="0"> is not there any longer. Submitted a patch to have a class applied to the heading in these cases and adjusted the stylesheet for them. Decided I didn't like white-space: nowrap on the title - too often, the node titles are too large to fit.
- 2002-12-30
- A whole lot of work, I like it quite a bit more now.
- Got rid of the ugly fixed ##pt size definitions all over the place which overrode things like <small> tags - most annoying when people with large sigs courteously used such tags to reduce the screen real estate consumed, but also in other cases.
- Added a [class="0"] specifier to the h3 and added a h3.superdoc style in order to affect only the node's title shown at the top but not other h3s throughout the page.
- Verdanaized all appropriate form elements too - unfortunately they seem to require ##pt sizes to look right.
- Other minor changes here, there and everywhere.
- 2002-12-22
- Restructured the text in this node. The <strike>s were getting messy. Found out (duh) the blue theme is still compulsory: the bgcolor selectors for the classless boxes only work when the colour is indeed #000066, which isn't the case with other themes.
- 2002-12-20
- Removed the width property from the the .code class. It caused pages with code posted in deep replies to have a horizontal scrollbar. I'm not sure you need to use the blue theme as a base at all anymore, but too lazy to check, and it doesn't hurt at any rate.
- Unknown
- Applied a [bgcolor="#000066"] selector as defined by CSS Level 2 for otherwise classless tables, so their default darker blue can be overridden too.
- Unknown
- Added a definition so that the input box in the consideration nodelet will appear with a pale red background, as long as your browser supports CSS2. No mistaking it for the chatterbox input that way.
Enjoy
body {
color: #000;
background-color: #eee;
font-family: "Bitstream Vera Sans", Verdana, Arial, Lucida, Helvet
+ica, sans-serif;
}
td, th {
color: #000;
font-family: "Bitstream Vera Sans", Verdana, Arial, Lucida, Helvet
+ica, sans-serif;
}
a:link {
color: #036;
}
a:visited {
color: #06c;
}
h3.other, h3.superdoc, h3.categorized_answer, h3.categorized_question
+{
font-size: 3em;
font-style: italic;
font-family: Georgia, serif;
padding: 0.25em;
}
pre, tt {
font-family: "Bitstream Vera Sans Mono", monospace;
}
tt {
font-size: 1em;
}
font {
font-size: inherit;
font-family: inherit;
}
textarea {
height: 25em;
}
input, select {
margin: 3px;
font-family: "Bitstream Vera Sans", Verdana, Arial, Lucida, Helvet
+ica, sans-serif;
}
table[bgcolor="#000066"] {
border: solid 1px black;
background-color: #069;
}
.code {
display: block;
border: 1px solid #666;
color: #069;
padding: 1em;
}
td.section_title {
color: #fff;
background-color: #069;
font-size: 2em;
font-family: Georgia, serif;
font-weight: bold;
}
tr.titlebar {
background-color: #069;
color: #fff;
}
tr.titlebar td {
font-size: 1.5em;
font-family: Georgia, serif;
}
tr.titlebar input#search_text {
font-size: 0.3725em;
margin-bottom: 0.5em;
}
table.nodelet_container {
background-color: #069;
}
tbody.nodelet th, th.nodehead {
color: #fff;
background-color: #069;
padding-right: 0.5em;
text-align: right;
}
tbody.nodelet td, td.nodebody {
background-color: #eee;
}
#approval_nodelet input[type="text"] {
background: #fcc;
}
textarea[name="note_doctext"], input[name="note_title"] {
font-family: monospace;
width: 80%;
}
.spacer[height~="75"], a[href="http://pair.com"] {
display: none;
}
* html body, * html td, * html th {
font-size: smaller;
}
Makeshifts last the longest.
| [reply] [d/l] |
|
http://www.perlmonks.org/index.pl?node_id=167905&displaytype=displayco
+de
into the Link to External CSS stylesheet: box and hit submit. Suddenly my User Settings page looked lovely.
However the Monastery Gates look awful. "New Questions" takes up a full browser screen.
I think the relevant html is here:
<tr class =" section_title" width =" 100%" border =" 1">
<td class =" section_title" width =" 100%">
New Questions
</td>
</tr>
I've copied your theme into my On-Site CSS Markup: code and made the following change:
td.section_title {
color: #fff;
background-color: #069;
- font-size: 26em;
+ font-size: 26px;
font-family: Georgia, serif;
}
This looks heaps better.
I hope this helps.
jarich
| [reply] [d/l] [select] |
|
Thanks for tracking that one down! I had numerous reports about it from people, but have only been here very occasionally in the past 2 months or so and haven't had the tuits to look into it. There's also a number of other minor niggles I've been made aware of, but none of them is as much of an issue — nevertheless of course I hope to get to them sometime soon.
Glad you liked it. :)
Makeshifts last the longest.
| [reply] |
|
body {
color: #000;
background-color: #eee;
font-size: smaller;
font-family: "Bitstream Vera Sans", Verdana, Arial, Lucida, Helvet
+ica, sans-serif;
}
td, th {
color: #000;
font-size: smaller;
font-family: "Bitstream Vera Sans", Verdana, Arial, Lucida, Helvet
+ica, sans-serif;
}
/* white page content */
td.main_content { background-color: #fff; }
a:link {
color: #036;
}
a:visited {
color: #06c;
}
a.nnt-link:visited { color: #60f;}
span.user-243505 {display:none; } /* hide im2 in OU list */
/* highlight specific users in OU */
.user-3607 a:link, .user-3607 a:visited,
.user-22609 a:link, .user-22609 a:visited,
.user-25047 a:link, .user-25047 a:visited,
.user-108447 a:link, .user-108447 a:visited,
.user-221638 a:link, .user-22168 a:visited,
.user-272750 a:link, .user-272750 a:visited,
.user-299049 a:link, .user-299049 a:visited,
{color: #A00;}
h3.other,
h3.superdoc,
h3.categorized_answer,
h3.categorized_question
{
font-size: 28px;
font-family: Georgia, serif;
padding: 10px;
}
pre,
tt { font-family: "Bitstream Vera Sans Mono", monospace; }
tt { font-size: 14px; }
textarea { height: 25em; }
input,
select {
margin: 3px;
font-size: 9pt;
font-family: "Bitstream Vera Sans", Verdana, Arial, Lucida, Helvet
+ica, sans-serif;
}
table[bgcolor="#000066"] {
border: solid 1px black;
background-color: #069;
}
td.section_title {
color: #fff;
background-color: #069;
font-size: 26px;
font-family: Georgia, serif;
font-weight: bold;
}
tr.titlebar, td.titlebar, table.titlebar {
background-color: #069;
font-size: 26px;
font-family: Georgia, serif;
}
table.nodelet_container {
background-color: #069;
}
tbody.nodelet th, th.nodehead {
color: #fff;
background-color: #069;
padding-right: 0.5em;
text-align: right;
}
tr.add-root-blurb {
background-color: #069;
}
tbody.nodelet td, td.nodebody {
background-color: #eee;
}
#approval_nodelet input[type="text"] {
background: #fcc;
}
textarea[name="note_doctext"], input[name="note_title"] {
font-family: monospace;
width: 80%;
}
.spacer[height~="75"], a[href="http://pair.com"] {
display: none;
}
h2, h3 { margin-bottom: 5px; }
h3 { padding-left: 6px; }
li { list-style-type: none; }
li div { margin-left: 2em; }
q { display: block; }
cite:before { content: "\2014\A0" }
#quotes + * li { padding: 0.5em; }
p.domain_link { text-align: center; }
span.currentdomain { font-weight: bold; }
span.node_id { font-weight: bold; }
span.even {text-align: center; }
tr.nodelet_head_row {font-size: 8pt; }
/*
i have pmdev/synch/adim nodelets on, this makes them look like a si
+ngle
nodelet or merged together
*/
#nodelet_head_row_Synch_Nodelet { display: none; }
#nodelet_head_row_Admin_Nodelet { display: none; }
/* make sure none of the above cause trouble for the RAT */
#nodethreads li {width: 100%;}
#nodethreads ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: 0em;
white-space:normal;
}
#nodethreads ul ul {border :0;}
p.nnt-p-title { width: 70%; }
p.nnt-author { width: 28%; }
.code
{
display: block;
color: #8f0;
background-color: #333;
border-left: solid #888 5px;
padding: 10px 10px 10px 15px;
/*font-size: 85%;*/
/*width: 93%;*/
margin-right: 0px;
margin-left: auto;
font-family: monospace;
white-space: pre;
white-space: -pre-wrap;
}
textarea {
width: 90%;
height: 300px;
}
/* make the pair banner go away, i like em, but im here too often */
#monkbar tr {display: none;}
#monkbar tr.titlebar {display: block; }
/* make sure that site code displays larger */
.listcode,.diff_strings { font-size: larger; }
/* make user settings easier to use */
table.user-settings,
.user-settings textarea {
width: 100%;
}
- Version 0. Birth -- 2004-10-23
---
demerphq
First they ignore you, then they laugh at you, then they fight you, then you win.
-- Gandhi
Flux8
| [reply] [d/l] |
|
Very nice. I love Verdana. I'm using IE 6.0.28 and it seems to work great. I just may be using this as my default CSS from now on. Thanks Aristotle!
| [reply] |
|
| [reply] |
|
| [reply] |
|
| [reply] |
Re: PerlMonks CSS Examples
by mdillon (Priest) on Feb 16, 2002 at 18:07 UTC
|
/* For use with the Dark Theme */
body
{
margin: 0px;
font-family: sans-serif;
}
/* Fix iframe size/position */
iframe
{
width: 472px;
height: 64px;
vertical-align: top;
}
pre, tt
{
font-family: monospace;
}
a
{
text-decoration: none;
}
a:hover, a:hover font[color]
{
color: #333;
}
a:hover, a:hover img
{
background-color: #0ff;
}
pre tt
/* pre > tt */
{
display: block;
color: #8f0;
background-color: #333;
border-left: solid #888 5px;
padding: 10px 10px 10px 15px;
font-size: 85%;
width: 93%;
margin-right: 0px;
margin-left: auto;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="text"],
input[type="password"],
input[type="checkbox"],
input[type="radio"],
select,
textarea
{
border: solid #333 1px;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="text"],
input[type="password"],
textarea
{
margin: 3px;
padding: 3px;
}
input:hover, textarea:hover, select:hover
{
color: #ccc;
background-color: #888;
}
input:focus, textarea:focus, select:focus
{
color: #333;
background-color: #ffa;
}
1 March 2002 update: made code more readable by making the font face yellower
5 April update: since I can now use this CSS in my on-site CSS without problems (no more bracket bug), I removed a comment indicating that I had this in an external stylesheet. | [reply] [d/l] |
|
This is really cool.
But im curious, is it my browser that makes it ignore whitspace in pre blocks? All the code blocks are unindented. Im using Ie5.5... (Oh, just checked under ie6 as well, and it does the same thing too...)
Yves / DeMerphq
---
Writing a good benchmark isnt as easy as it might look.
| [reply] |
|
I don't have any problems with whitespace with the above stylesheet (I use it every day, so I'd probably notice). You might try adding something like:
pre {
white-space: pre;
}
I'm not sure whether that will fix things, but I don't see how it could hurt. | [reply] [d/l] |
|
(new and improved) Re: PerlMonks CSS Examples
by particle (Vicar) on Apr 23, 2002 at 00:51 UTC
|
i've updated my example for the new nodelet css tags. it should be clear from my example how to take advantage of these tags for yourself.
/* make the body grey with blue text, sans-serif font */
body, td, tr { color: #457; background: #ddd; }
body { font-family:Verdana,Arial,Helvetica,sans-serif; font-size: 10pt
+; }
/* give tables a light blue border, and make headings stand out */
table { color: #457; background: #9ac; }
table td h3 { color: #457; background: #9ac; padding: 0.5em;}
/* color links */
a, a font { color: #457; background: #eee; text-decoration: none; }
a:hover { color: #eee; background: #457; }
/* inline code blocks are dark blue on light blue,
full code blocks are dark blue on light grey, bordered */
pre { color:#457; background:#eee; padding: 0.5em; border: 1px solid #
+457; }
tt { color:#ddd; background:#9ac; padding: 0 0.5em; }
pre tt { color: #457; background: transparent; border: none; }
/* override <font>...</font> tags */
font, b, strong { color: #457; background: transparent; }
/* err... um... nothing to see here! */
layer, iframe { display: none; }
/* make small fonts readable */
small { font-size: 8pt; }
smaller { font-size: 7pt; }
/* nodelet settings */
tr.nodelet_head { display:none; } /* who needs em? */
td.nodelet_body { font-size: 7pt; font-weight: normal; background: #dd
+d; }
td.nodelet_body a { background: #ddd; }
td.nodelet_body a:hover { color: #ddd; background: #457; }
#XP_Nodelet td b { font-size: 10pt; font-weight: bold; }
#Chatterbox td { font-size: 8pt; font-weight: normal; }
#Chatterbox a, #approval_nodelet a { display: inline; font-size: 7pt;
+font-weight: bold; }
#Other_Users td { display: block; }
/* clearpixel-- still takes up space with images turned off in setting
+s */
img { display: none; }
/* but i do want home node pictures */
table table img { display: inline; }
/* i don't browse full screen to have a small textarea :) */
textarea { width: 100%; height: 300px; }
~Particle ;̃
| [reply] [d/l] |
Re: PerlMonks CSS Examples
by Juerd (Abbot) on Apr 04, 2002 at 12:41 UTC
|
/* clearpixel-- still takes up space with images turned off in setting
+s */
img { display: none; }
/* but i do want home node pictures */
table table img { display: inline; }
/* i don't browse full screen to have a small textarea :) */
textarea { width: 100%; height: 300px; }
/* Code blocks in a nice white-bordered gray box */
pre tt { display: block; background-color: #404040; border:
1px solid white; width: 90%; padding: 0px 2ex 2ex 2ex; }
/* I like a little feedback now and then */
a:hover { color: red; }
I use this with the Dark theme, which has a black background and white text.
U28geW91IGNhbiBhbGwgcm90MTMgY
W5kIHBhY2soKS4gQnV0IGRvIHlvdS
ByZWNvZ25pc2UgQmFzZTY0IHdoZW4
geW91IHNlZSBpdD8gIC0tIEp1ZXJk
| [reply] [d/l] |
(jeffa) Re: PerlMonks CSS Examples
by jeffa (Bishop) on May 01, 2002 at 13:53 UTC
|
Here is what i use for the Dark Theme:
a { text-decoration: none; }
a:hover { text-decoration: underline; color: #ff6500; }
td { background-color: black; }
tt.code { color: #eee; background-color: #111; }
jeffa
K.I.S.S. ;) | [reply] [d/l] |
Re: PerlMonks CSS Examples
by greenFox (Vicar) on Jun 28, 2002 at 07:00 UTC
|
Ever since I wrote this node I have been meaning to make a PerlMonks light yellow theme... well here it is :) I used Aristotle's theme as a basis and worked from there. I originally intended to use it with the default theme but found it looks really good with the red theme.
It still needs a little work - the page width barfs occaisionaly resulting in a need to use the horizontal scroll bar and I haven't managed to change the background colour for the body of sub nodes without breaking everything. All in all I find it usable and soft on the eyes :) Not too bad for a complete CSS novice any-way... /msg me or reply if you have any clues/ideas for fixes.
/*Modified Aristotle CSS, Use with the red theme*/
body {
color: #000000;
background-color: #FFFFF2;
font-size: 12pt;
font-family: Verdana, Arial, Lucida, Helvetica, sans-serif;
}
td {
color: #000000;
font-size: 12px;
/*font-family: Verdana, Arial, Lucida, Helvetica, sans-serif;*/
}
tr.titlebar {
background-color: #069;
}
tr.section_title, td.section_title {
color: #ffffff;
background-color: #069;
font-family: Arial, Lucida, Helvetica, sans-serif;
font-size: 18pt;
font-weight: bold;
font-style: italic;
}
tr.post_head {
background-color: #ddd;
}
tr.post_head a {
font-weight: bold;
}
tr.post_body td {
padding-bottom: 2em;
}
td.nodelet_body {
background-color: #FFFFF2;
font-size: 12px;
}
tr.highlight {
background-color: #ddd;
}
table.nodelet_container {
background-color: #069;
}
td.nodelet_body {
background-color: #FFFFF2;
font-size: 11pt;
}
th.nodelet_head {
font-family: Arial, Lucida, Helvetica, sans-serif;
font-size: 14pt;
font-weight: bold;
font-style: italic;
color: #fff;
background-color: #069;
}
a:link {
color: #CC0000;
text-decoration: underline;
}
a:visited {
color: #000055;
text-decoration: underline;
}
a:hover {
color: red;
text-decoration: underline;
}
form {
display: inline
}
/* Code blocks are boxed with light yellow background */
pre tt {
display: block;
background-color: #FFFFF2;
border: 1px solid #000066;
width: 90%;
padding: 0px 2ex 2ex 2ex;
}
Update: the latest version is always here here.
-- Do not seek to follow in the footsteps of the wise. Seek what they sought. -Basho
| [reply] [d/l] |
Re: PerlMonks CSS Examples
by demerphq (Chancellor) on Sep 04, 2004 at 16:46 UTC
|
Seeing this node linked on grinders homepage reminded me: The following is a report generated by looking for class and id tag code in the PM source code, the first shows what the item is and where its located, the second what source code nodes have what tag information. Its done from a fairly naive scan so there are minor glitches, but it may be useful to some of you CSS folks. (Note the readmore is large)
UPDATE: In an attempt to fix a rendering problem I deleted a bit of the table, but this is a bad plan when rowspan is involved. So ill have to regen when I can.
---
demerphq
First they ignore you, then they laugh at you, then they fight you, then you win.
-- Gandhi
• Update:
Minor language tweaks and put the table in a readmore as per request by tye.
| [reply] |
Re: PerlMonks CSS Examples
by Django (Pilgrim) on Aug 30, 2002 at 00:20 UTC
|
body {
font-family:Verdana,Arial,Helvetica,sans-serif;
background-color: #E3E3E3;
}
tr {
background-color: #E3E3E3;
}
tr.titlebar {
background-color: #AAAAAA;
}
th {
background-color: #AAAAAA;
}
table.nodelet_container {
background-color: #AAAAAA;
}
a:link {
color: #7E1500;
text-decoration: none;
}
a:visited {
color: #002A7E;
text-decoration: none;
}
a:hover {
color: #EB0517;
text-decoration: underline;
}
~Django
"Why don't we ever challenge the spherical earth theory?" | [reply] [d/l] |
Re: PerlMonks CSS Examples
by blakem (Monsignor) on Aug 12, 2002 at 22:28 UTC
|
Code blocks are now wrapped in tags, so you can use tt.code instead
of pre tt to mark them up.
-Blake
| [reply] [d/l] [select] |
Re: PerlMonks CSS Examples
by Roy Johnson (Monsignor) on Nov 26, 2003 at 23:02 UTC
|
Thanks to Aristotle for pointing me to this thread, and for the CSS I used as the basis. This is a parchment/brown color scheme, for a monkish feel. Links are red (for unread) and brown.
body {
color: #000;
background-color: #fff8e8;
font-size: smaller;
font-family: Verdana, Arial, Lucida, Helvetica, sans-serif;
}
tr.pmnote-641932 { display: none !important; }
div.readmore {
background-color: transparent;
border: dashed 2px #edc
}
table { width: 100% }
.pmsig { background-color: #edc }
tr.highlight { background-color: #edc }
td.highlight { background-color: #edc }
.odd-row { background-color: #edc; width: 100% }
th {
color: #fff;
background-color: #630;
}
tr.reply { background-color: #edc }
tr.reply-body { background-color: #fff8e8 }
td {
color: #000;
font-size: smaller;
font-family: Verdana, Arial, Lucida, Helvetica, sans-serif;
}
tr.section_title, td.section_title {
color: #fff;
background-color: #630;
font-size: 1.1em;
font-weight: bold;
font-style: italic;
font-family: Papyrus, "Bookman Old Style", serif;
}
tr.titlebar {
background-color: #630;
}
tr.post_head {
background-color: #edc;
}
tr.post_head a {
font-weight: bold;
}
tr.post_body > td {
padding-bottom: 2em;
}
table.nodelet_container {
background-color: #630;
}
tbody.nodelet th {
color: #fff;
/* Things went ugly on 2005-03-28 */
background-color: #630;
font-size: 1.1em;
font-weight: bold;
font-style: italic;
font-family: Arial, Lucida, Helvetica, sans-serif;
}
tbody.nodelet td {
background-color: #fff8e8;
}
tbody.nodelet td.highlight {
background-color: #edc;
}
a:link { color: #c30; }
a:visited { color: #830; }
a:active { color: #f33; }
h3.other, h3.superdoc, h3.categorized_answer, h3.categorized_question
+{
font-size: 2.3em;
font-family: Papyrus, "Bookman Old Style", serif;
}
tt { font-size: 120% }
.code {
display: block;
border: 1px solid #666;
color: #630;
padding: 1em;
font-size: 90%;
}
font { font-size: 100% }
textarea {
height: 25em;
width: 98%;
}
input, select {
margin: 3px;
font-size: 9pt;
font-family: Verdana, Arial, Lucida, Helvetica, sans-serif;
}
input[type="text",name="considerreason"] {
background: #ffcccc;
}
table[bgcolor="#000066"] {
border: solid 1px green;
background-color: #630;
}
layer, iframe {
display: none;
height: 0;
}
The PerlMonk tr/// Advocate
| [reply] [d/l] |
Re: PerlMonks CSS Examples
by samurai (Monk) on Oct 21, 2002 at 13:14 UTC
|
I like to call this one my "khaki" theme. Looks best in Mozilla. For use with the green web-safe theme:
khaki
BODY, TABLE, TD, TR, INPUT, TEXTAREA {
font-size: small;
font-family: Verdana;
}
td.nodelet_body {
background-color: #f0f0f0;
}
tr.section_title {
background-color: #555533;
}
td.section_title {
background-color: #555533;
}
tr.post_head {
background-color: #CCCCAA;
}
td.titlebar {
border-top: thin dotted #000000;
border-bottom: thin dotted #000000;
color: #000055;
}
tr.titlebar {
color: #000055;
background-color: #CCCCAA;
}
th.nodelet_head {
color: #000055;
background-color: #CCCCAA;
}
a.titlebar:link {
color: #000055;
}
a.titlebar:visited {
color: #000055;
}
--
perl: code of the samurai | [reply] [d/l] |
Re: PerlMonks CSS Examples
by Intrepid (Deacon) on Jul 29, 2003 at 19:23 UTC
|
My Perl Monks Colorscheme (founded on the Dark theme
in User Settings): N.Y.P.M.Blue
(New York Perl Monk's Blue)
(no <STYLE> wrapper since this is just verbatim from my "On-Site
CSS Markup" ... Warning:
if you once try this you will never go back. It is that
soothing and clear (to some; others will hate it, personal taste
being what it is).)
Updated on Monday 02/08/2010 18:42 UTC
Updated on Thursday 02.09.2004
- Added more font-size control
- Removed the IFRAME-quashing section (always was disabled by being
commented-out; now it appears it would never work anymore, so no
point in leaving it in even as a comment).
- Fixed mispelled font name `ariel´ to `arial´ {shamefaced laugh}.
There were also other adjustments, too many to list.
/* N.Y.P.M.Blue.css Presentation Theme" for Perlmonks
$Author$ Last modified: 02 Sep 2004 05:45:14
$Revision$
Last CVS commit $Date$
*/
body, td { color : #FFF; background-color : #24233B}
body { margin : 2px ; margin-right 0px; }
th { color : #E2BFC1; background-color : #261A61}
td { font-family : verdana, "avant-garde", sans-serif;
font-size : 9pt; }
center table
{ margin-right : 0; padding-right : 0; }
a { color :#FFF; text-decoration : none;}
a:link { color :#CA8AFA}
a:visited { color :#A4EE9C} /* #A4EE9C or #AB684C */
a:hover { color :#FBE604; text-decoration : underline;}
a:active { color :#FBB30C}
tt.code { color : #cbfff5 }
/*
tt.code fonts you might want to use:
font-size : 9pt bitstream vera sans mono
font-size : 11pt dec terminal
*/
tr.post_head td {
font-size : 13pt;
font-family : "bitstream vera serif",serif;
}
tr.post_body td {
font-size : 11pt;
font-family : "bitstream vera sans", sans-serif;
}
table.nodelet_container {
background-color : #433559;
font-family : arial,helvetica,sans-serif;
}
tbody.nodelet td, td.nodebody {
font-family : arial,helvetica,sans-serif;
background-color : #1E1D30;
/* font-size : 11pt; */
}
tbody.nodelet th, th.nodehead {
font-family : arial,helvetica,sans-serif;
color : #E2BFC1;
background-color : #7F7BD0;
}
tr.titlebar , tr.monkquip {
color : #E2BFC1;
background-color : #1E1D30;
}
td.monkquip font {
font-family : "zapf chancery", cursive;
font-size : 12pt;
}
/* table#titlebar { background-color : #433559; } */
table td.titlebar {
background-color : #403257;
}
#monkbar {
border : outset 4px ; border-collapse : collapse;
border-color : #433559;
}
#monkbar tr.titlebar {
border : 4px inset #433559;
margin-top : -12px;
}
#monkbar tr, #monkbar td {
font : 18pt verdana,sans-serif;
vertical-align : middle;
}
table#titlebar {
font-family : verdana, "avant-garde", sans-serif;
background-color : #1E1D30;
margin-right : 0;
}
#titlebar tbody td.monktitlebar, td.titlechooser {
/* tr.section_title , td.section_title */
padding : 6 10;
color : #E2BFC1;
background-color : #1E1D30;
}
#titlebar a:link , .nodelet a:link {color :#00AAFF}
#titlebar a:visited , .nodelet a:visited {color :#3D78B4}
/* GUI elements */
textarea {
width : 100%; height : 395px;
padding-left : 0.4ex;
padding-bottom : 3px;
color : #FDFDFD;
background-color : #351E37; /* font-size : 12px; */
}
input[type="text"] {
background-color : #351E37;
color : inherit;
}
.titlebar input[type="submit"] {
background-color : #1E1D30;
border : 0.2ex outset #1E1D30;
border-left : 0.2ex outset #4B4962;
border-top : 0.2ex outset #4B4962;
padding : 0.4ex;
font : 10pt arial,helvetical,sans-serif;
}
.titlebar input[type="text"] {
vertical-align : middle;
color : inherit;
}
input[type="radio"] {
background-color : #351E37;
color : inherit;
}
input[type="checkbox"] {
background-color : #351E37;
color : inherit;
}
select {
background-color : #5A3D69;
color : inherit;
}
/* GUI Font size Handling. If these are not appropriate for your brow
+ser,
edit or comment-out whole section as necessary. */
/*
input[type="text"] {
font-size : 13px;
}
input[type="checkbox"] {
font-size : 13px;
}
select {
font-size : 13px;
} */
/* eof */
| [reply] [d/l] |
Re: PerlMonks CSS Examples
by kcott (Archbishop) on Nov 19, 2010 at 01:26 UTC
|
Yet another set of CSS rules to use with Dark Theme. I actually quite like the Dark Theme so the changes are minimal. Main features are:
-
Enlarges the textarea for editing posts. (I have a largish screen - you may want to reduce the values a bit.)
-
Code will appear in a slightly different colour to make it stand out - particularly useful for code snippets embedded in paragraph text. (It's still bright, just has a blue/mauve tinge.)
-
Links have a reverse video effect when the pointer hovers over them and are no longer underlined.
-
The red plus (+) to show wrapped code is now yellow.
-
readmore blocks now have a very dark (purplish) background instead of black.
textarea {
width: 64em;
height: 32em;
}
tt {
color: #ccccff;
background-color: inherit;
}
div.readmore, div.readmore * {
background-color: #110811;
}
a:link {
color: #ccffff;
background-color: inherit;
text-decoration: none;
}
a:visited {
color: #ffffcc;
background-color: inherit;
text-decoration: none;
}
a:link:hover {
color: #000000;
background-color: #ccffff;
text-decoration: none;
}
a:visited:hover {
color: #000000;
background-color: #ffffcc;
text-decoration: none;
}
a:link:hover u, a:visited:hover u {
color: #0000ff;
background-color: #ffffff;
text-decoration: none;
}
div.codeblock > tt.codetext font[color="red"] {
color: #ffff00;
background-color: inherit;
font-weight: bolder;
}
| [reply] [d/l] [select] |
|
|