Perl-blue theme

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;
}

[jarich]

I'm a CSS newbie. Still I liked the look of this theme and thought I'd try it out. I put the link

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

[Aristotle]

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. :)

[demerphq]

I've adapted your CSS with some additional support for things like Recently Active Threads and various pmdev stuff as well. I took most of it from you with some stuff from mdillon and some of my own. Its pretty similar to yours but for a white box the main content and less fancy stuff. Thanks a lot your stuff made for a great foundation (both here and on your home node). Ill keep this updated as I go.

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%; 
}

1. Version 0. Birth -- 2004-10-23

[mrpilot]

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!

[Aristotle]

Glad you like it. :) Both the fonts and the CODE-block borders/text colour are things I really miss without my theme now.

Makeshifts last the longest.

[vek]

I just stumbled across this node today. Waaay coool, thanks for taking the time to do this. I'll be back to ++ it tomorrow. Shame I can't ++ it more than once really :-)

[Aristotle]

Glad you enjoy it. :-)