Journal Slashdot Shinyfix's Journal: slashdot-shinyfix.css v.001 (5 Jun 2006) 3
/****************************************************************************
slashdot-shinyfix.css v.001 (5 Jun 2006)
While Alex Bendiken's redesign of Slashdot is a very welcome change, not to
mention gorgeous, many Slashdotters have discovered deficiencies in the
resulting rendering. In particular, the usability of Slashdot's story
commenting has taken a beating. To ameliorate these "misfeatures", this CSS
file aims to do the following:
1. Add visual cues to aid scanning through nested comments and replies.
2. Move comment score back to the subject.
3. Allow <i> and <em> within blockquotes.
4. Adjust body text font and size.
5. Set a fixed width for comments (e.g. 42 ems) to maintain readability
with very wide browser windows. [DISABLED BY DEFAULT]
You can enable or disable these fixes, as desired, by commenting or
uncommenting the relevant CSS below.
NOTE: Currently, fix #2 only works in Safari (and perhaps Opera?).
Gecko-based browsers do not support "display: inline-block," which is used to
reposition the post score. If someone knows how to hack together an
equivalent for Firefox, please contribute!
INSTALLATION (SAFARI): Set this as the style sheet for slashdot.org with a
PithHelmet* rule or similar, or in Preferences > Advanced.
(* <http://www.culater.net/software/PithHelmet/PithHelmet.php>)
INSTALLATION (FIREFOX): As if you need instructions.
LICENSE: The contents of this file are hereby released into the public
domain. Take that, Stallmanists.
***/
/****************************************************************************
1. VISUAL CUES TO AID SCANNING THROUGH REPLIES ***/
/*** Encase comment in gray box: ***/
div.commentTop div.details {
background-color: #eee !important;
}
div.commentBody, div.commentSub {
border-left: 1px solid #eee !important;
border-right: 1px solid #eee !important;
}
div.commentSub {
border-bottom: 1px solid #eee !important;
margin-bottom: 0 !important;
}
/*** Indent replies with a thick gray line: ***/
ul#commentlisting > li.comment { /* top-level comments */
margin: 1em 0 0 0 !important;
}
li.comment > ul { /* list of replies */
border-left: 2em solid #eee !important;
margin: 0 !important;
padding-left: 1em !important;
}
li.comment > ul > li.comment { /* replies */
margin: 0 !important;
padding: 1em 0 0 0 !important;
}
div.commentTop {
margin-top: 0 !important;
}
/****************************************************************************
2. MOVE COMMENT SCORE BACK TO SUBJECT ***/
div.commentTop div.title h4 {
position: static !important;
display: inline-block !important; /* sorry, firefox weenies! */
vertical-align: top !important;
padding: .4em .7em .55em .7em !important;
}
div.commentTop div.title span.score {
position: static !important;
display: inline-block !important;
vertical-align: top !important;
padding: .4em 0 .55em 0 !important;
opacity: 0.6 !important;
}
/****************************************************************************
3, 4, 5. MISCELLANEOUS FIXES ***/
/*** 3. Allow italics/emphasis in blockquotes: ***/
div.commentBody blockquote * { font-style: inherit !important; }
div.commentBody blockquote i,
div.commentBody blockquote em { font-style: italic !important; }
/*** 4. Adjust fonts for (a) chrome, (b) article summaries and comments: ***/
body { font: 12px lucida sans !important; }
div.body, div.commentBody { font: 12px lucida sans !important; }
/*** 5. Set a fixed width for comments: ***/
li.comment { /*width: 42em !important;*/ }
/*** eof ***/
slashdot-shinyfix.css v.001 (5 Jun 2006)
While Alex Bendiken's redesign of Slashdot is a very welcome change, not to
mention gorgeous, many Slashdotters have discovered deficiencies in the
resulting rendering. In particular, the usability of Slashdot's story
commenting has taken a beating. To ameliorate these "misfeatures", this CSS
file aims to do the following:
1. Add visual cues to aid scanning through nested comments and replies.
2. Move comment score back to the subject.
3. Allow <i> and <em> within blockquotes.
4. Adjust body text font and size.
5. Set a fixed width for comments (e.g. 42 ems) to maintain readability
with very wide browser windows. [DISABLED BY DEFAULT]
You can enable or disable these fixes, as desired, by commenting or
uncommenting the relevant CSS below.
NOTE: Currently, fix #2 only works in Safari (and perhaps Opera?).
Gecko-based browsers do not support "display: inline-block," which is used to
reposition the post score. If someone knows how to hack together an
equivalent for Firefox, please contribute!
INSTALLATION (SAFARI): Set this as the style sheet for slashdot.org with a
PithHelmet* rule or similar, or in Preferences > Advanced.
(* <http://www.culater.net/software/PithHelmet/PithHelmet.php>)
INSTALLATION (FIREFOX): As if you need instructions.
LICENSE: The contents of this file are hereby released into the public
domain. Take that, Stallmanists.
***/
/****************************************************************************
1. VISUAL CUES TO AID SCANNING THROUGH REPLIES ***/
/*** Encase comment in gray box: ***/
div.commentTop div.details {
background-color: #eee !important;
}
div.commentBody, div.commentSub {
border-left: 1px solid #eee !important;
border-right: 1px solid #eee !important;
}
div.commentSub {
border-bottom: 1px solid #eee !important;
margin-bottom: 0 !important;
}
/*** Indent replies with a thick gray line: ***/
ul#commentlisting > li.comment {
margin: 1em 0 0 0 !important;
}
li.comment > ul {
border-left: 2em solid #eee !important;
margin: 0 !important;
padding-left: 1em !important;
}
li.comment > ul > li.comment {
margin: 0 !important;
padding: 1em 0 0 0 !important;
}
div.commentTop {
margin-top: 0 !important;
}
/****************************************************************************
2. MOVE COMMENT SCORE BACK TO SUBJECT ***/
div.commentTop div.title h4 {
position: static !important;
display: inline-block !important;
vertical-align: top !important;
padding:
}
div.commentTop div.title span.score {
position: static !important;
display: inline-block !important;
vertical-align: top !important;
padding:
opacity: 0.6 !important;
}
/****************************************************************************
3, 4, 5. MISCELLANEOUS FIXES ***/
/*** 3. Allow italics/emphasis in blockquotes: ***/
div.commentBody blockquote * { font-style: inherit !important; }
div.commentBody blockquote i,
div.commentBody blockquote em { font-style: italic !important; }
/*** 4. Adjust fonts for (a) chrome, (b) article summaries and comments: ***/
body { font: 12px lucida sans !important; }
div.body, div.commentBody { font: 12px lucida sans !important; }
/*** 5. Set a fixed width for comments: ***/
li.comment {
/*** eof ***/
Re:Instructions (Score:2)
Re:Instructions (Score:2)
Install the Webdeveloper Extension/Plugin from http://chrispederick.com/work/webdeveloper/ [chrispederick.com]
Once that is done (which I found to be not a trivial excersize). Load a slashdot page, Right Click, choose Web DEveloper/CSS/Add User Style Sheet. Select your style sheet and it should magically apply.
Personally, I think the stylesheet in question is a good try, but still fails. It really needs to move the Score next to the title.