Re^2: Site facelift?

[jdporter]

design additional themes

There was a time — long years ago, when vroom was still lord of the manor — when themes were the One Way to style your PerlMonks experience, and new theme contributions were actively solicited. Themes Design Quest

Thankfully, those days are behind us.

A Better Way to style PerlMonks to your liking is to use CSS. See your Display Settings.

Note that PerlMonks provides a couple of levels of manipulexity for custom CSS styling. One is to start with a theme selected and then tweak things via your custom CSS. The next level is to forego virtually all styling provided by PerlMonks and Do It All Yourself. For the latter, select "No Theme" from the themes picklist.

That is what I do. I also select all of the "Lay out X as <div> instead of <table>" options.

Then I go to town with the fun and fabulous CSS.

I also put some javascript code in my Free Nodelet to hack up some additional nodelets and move things around on the screen.

The result looks something like this.

There have been threads in which people have shared their custom css. It's actually quite easy to share your css via a link people can paste into their Display Settings: Put the css in a <code> block in a post, then refer people to the "download" link. Like so.

/* This is a COPY of [jdporter]'s current On-Site CSS Markup (from his
+ [Display Settings]) */

.highlight { background-color: #DFB; }
textarea { width: 100%; height: 30em }
table#u-s-freenodelet, table#u-s-css { width: 100% }
div.main_content { height: 35em; overflow: scroll }
div.listcode { height: 35em; overflow: scroll }

tr.new-post-head td { background-color: #FC7 }
tr.new-post-body td { background-color: #FBB }
td.reply-new { background-color: #FC7 }
td.reply-new-body { background-color: #FBB }
table#replies_table tr.reply br { display: none; }
table#replies_table tr.reply ul { display: inline; white-space:nowrap;
+ }
tr.post_head br { display: none; }
tr.post_head td { white-space:nowrap; }


ul.word-list,
ul.inline-list { display: inline; margin: 0; padding: 0; list-style: n
+one; }

.word-list li,
.inline-list li,
li.inline
 { display:inline; margin-left: 3pt; }

.word-list   li:before,
.inline-list li:before,
li.inline:before
 { content:"  •\A0\A0" }

.word-list br,
.inline-list br { display:none }


ul.spacey-list { margin: 0; padding: 0; list-style: none; }
.spacey-list li { margin-left: 3pt; }
.spacey-list li:before { content:" > " }






table#titlebar-top,
table#titlebar-bottom,
form, 
h3  { display: inline;  }
tt.inlinecode  { color: #070; background-color: #CCC; }

/* this occurs only on user display pages: */
table.pm-user-info { background-color: #EEF; }


.spoiler { background-color: black; color: black; }
.pmsig  { background-color: #888; font-size: smaller; padding: 8px; }
span.see-also { font-size: smaller; }

/* XXX only commented out while trying non-null Themes:  */
tr.titlebar td,
center table th,
td.section_title {
 background-color: #CCF;
 font-size: larger;
 font-weight: bold;
}



tr.post_head td { background-color: #DDD; }
tr.ntc-head {  background-color: #FC7; }
tr.ntc-voted { display: none }

input#talkbox { width: 60em;  }


div#footer, /* kills the Pair ad at the bottom */
td.monktitlebar, /* kills the menu and the "Need Help" link */

/* kills the Search, MonkPic/Quip, etc. */
table#monkbar { display:none } /* { display: table; border: 3px solid 
+green; } */

div.Nodelets2 {
 float: left;
 width: 25%;
}
div#nodelet_container {
 float: left;
 width: 75%;
}

table.paneled td {
 border-style: groove;
 border-width: 2px;
 padding: 6px;
}
div.vote { background-color: #FA7 }
div.reputation { background-color: #A96 }
.QAapprove { background-color: #AF7 }

/* from common.css. needed to make RAT look somewhat normal. */
p.nnt-p { display: inline; }

span.tutlist-seen { background-color: #DDE; }

/* td.reply-body { font-size: smaller; } */
div.voteit { width: 100%; background-color: #DDE; }

div.notes { border: thin solid black; padding: 3px; height: 35em; over
+flow: scroll }
div.editnodetext { border: thick solid black; padding: 5px; }
div.editnodetext input[type="text"] { width: 50em; }
div.link-back { text-align: center; background-color: #DED; }
a.nodelethead-annot { display:none; text-decoration:none; font-size: s
+mall }

/* b:before { content: url("http://perlmonks.org/images/bubbles.png") 
+} */
/* See: http://www.blooberry.com/indexdot/css/syntax/pseudo/pelembefor
+e.htm */


div.comment-on { text-align: center; font-size: larger; background-col
+or: #DFB; }

div.header { background-color: #DFB; padding: 3px; }
ul.replies:before { content: url(http://perlmonks.org/images/bubbles.p
+ng) }
ul.replies { border-left: 2px solid red; padding: 3px; list-style-type
+: none; padding-left: 20px; }
li.reply { border-top: 2px solid blue; padding: 3px; }

/* 
div.header { background-color: #EEE; padding: 3px; border-bottom: 1px 
+solid blue; }
ul.replies:before { content: url(http://perlmonks.org/images/bubbles.p
+ng) }
ul.replies { list-style-type: none; padding-left: 40px; }
li.reply { border: 1px solid blue; }
*/

div.catqa-commandbox { border: thick solid black; padding: 5px; text-a
+lign: center; font-size: larger; }

/* use this in certain "menus", such as the monkbar and certain nodele
+ts, when they are "display as div" and are <li>:
li { display:inline }
li:before { content:"   • " }
*/


body { font-family: "Arial Unicode MS",sans-serif; font-size: smaller;
+ }

ul.spacey-list#external { display:none }

div#Approval_Nodelet div.nodelet_body br { display:none }
span#holder-power { background-color: #BFB; }
span.readmore-title { background-color: #FAE; }

div.nodelet_head,
div.nodelet_body { display:inline }

/*  border: thin solid black; */
div.nodelet {
 text-align: left;
 background-color: #BCF;
 padding: 6px;
 margin: 8px;
 border-radius: 2mm;
 -moz-border-radius: 2mm;
}
div.nodelet a {text-decoration: none} 
div.nodelet_head {
 background-color: #FFF;
 text-align: center;
/* font-weight: bold; */
 padding-left: 2px;
 padding-right: 2px;
 border-radius: 1mm;
 -moz-border-radius: 1mm;
}

div.diff_strings pre,
div.listcode pre,
tt { font-size: larger }

h3  { background-color: #BFC; }
td.titlechooser a { text-decoration: none;  }
td.titlechooser h3  { background-color: inherit; }
td.titlechooser h3:after { content:"\A0\A0\A0\A0"; }

div.pageheader,
div#pageheader,
table#titlebar-top {
 background-color: #BCF;
 padding: 6px;
 margin: 8px;
 border-radius: 2mm;
 -moz-border-radius: 2mm;
}


div#Node_Statistics  br { display:none }
div#Node_Statistics  span.label { color: #222 }
div#Node_Statistics  span.label:before { content:" •\A0" }

It is also possible to use the URL of the css pages associated with each of the "themes". For example, Red Theme CSS.

There have been some pretty nice threads in which users have shared CSS tips and code. See especially PerlMonks CSS HOWTO and User CSS Repository.