nuzak's Journal: Slashdot User CSS

Slashdot quietly added some nice new functionality to its latest revision, but also made a number of visual design choices that are ... regrettable. I'll spare you further comments, suffice to say that until now I wasn't compelled to fix it up til now.

For anyone wanting to apply this style sheet, I recommend Stylish. Once installed, you'll find its icon on your status bar (probably off to the far right side -- it looks like a write/wordpad icon). Right click that, select "write style", select "for slashdot.org" and replace whatever is in the window with this CSS:

(Those not using Firefox+Stylish shouldn't have much trouble snipping out the relevant CSS).

/*
  * slashdot_suckless.css
  *
  * License:
  * Do Whatever The Hell You Want Public License.
  * You can claim you wrote it for all I care.
  *
  * Fixes in this CSS:
  * - Lightens and reduces size of the super-obtrusive reply buttons below every post.
  * - Slims the chunky comment frame outline from 4px to 1px.
  * - Article categories moved to the right and de-emphasized (fixed font size, I'm sorry!)
  * - That is all for now.
  *
  */

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("slashdot.org") {

.nbutton{
        background: #eee !important;
        color:#666 !important;
        padding: .1em 0 !important;
}

.nbutton p b a {
        background: #eee !important;
        padding: .1em 0.25em !important;
        color:#666 !important;
}

.contain {border: 1px solid #e6e6e6 !important; border-top: none !important;}

.comment .full div.title, .comment .full div.details {margin: 0 !important }

/* The article categories were always a typographical disaster. Fixes here. */

div.article div.title h3 span { float: right !important; font-size: 10px !important; }

div.article div.title h3 span a { text-decoration: none !important; }

/* I can't easily get rid of the extraneous colon, but I can make them part of the styling */

div.article div.title h3 span:before { content: "::" !important; }

div.article div.title h3 span:after { content: ":" !important; }

}

I'll update this as I find more things to fix. Suggestions are welcome: feel free to send me snippets of individual fixes.

I'm aware of total re-theme packages (many of which are listed by stylish) and I'm not particularly interested in them. Adblocking is also something I won't add here, since I take care of that with a separate addon (and only for the most annoying ads).