Beta

Slashdot: News for Nerds

×

Welcome to the Slashdot Beta site -- learn more here. Use the link in the footer or click here to return to the Classic version of Slashdot.

Thank you!

Before you choose to head back to the Classic look of the site, we'd appreciate it if you share your thoughts on the Beta; your feedback is what drives our ongoing development.

Beta is different and we value you taking the time to try it out. Please take a look at the changes we've made in Beta and  learn more about it. Thanks for reading, and for making the site better!

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

Slashdot Shinyfix (979901) writes | more than 8 years ago

Slashdot.org 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:
/****************************************************************************
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 ***/

cancel ×

3 comments

Instructions (1)

Eternauta3k (680157) | more than 8 years ago | (#15477231)

Err... what if someone needed instructions for firefox? :P?

hint: I need instructions.

Re:Instructions (1)

stry_cat (558859) | more than 8 years ago | (#15479670)

I don't know if this will help with firefox, but it works with the full Mozilla 1.7.12.

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. Also the font and font-size of the comment body should be kept in a large readable font. Inspite of this it is a nice try.
Check for New Comments
Slashdot Account

Need an Account?

Forgot your password?

Don't worry, we never post anything without your permission.

Submission Text Formatting Tips

We support a small subset of HTML, namely these tags:

  • b
  • i
  • p
  • br
  • a
  • ol
  • ul
  • li
  • dl
  • dt
  • dd
  • em
  • strong
  • tt
  • blockquote
  • div
  • quote
  • ecode

"ecode" can be used for code snippets, for example:

<ecode>    while(1) { do_something(); } </ecode>
Create a Slashdot Account

Loading...