Please create an account to participate in the Slashdot moderation system

 



Forgot your password?
typodupeerror
Check out the new SourceForge HTML5 internet speed test! No Flash necessary and runs on all devices. ×
Slashdot.org

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 ***/
This discussion has been archived. No new comments can be posted.

slashdot-shinyfix.css v.001 (5 Jun 2006)

Comments Filter:

"It ain't over until it's over." -- Casey Stengel

Working...