Forgot your password?
typodupeerror
User Journal

Journal: Slashdot Redesign

Journal by TheDawgLives

Well, I got tired of waiting for the new slashdot, so I replaced my user.css in opera with Michael's entry, with a few minor modifications...

  • First, I added a footer to the slashboxes, so each one is rounded.
  • Second, for some reason in Opera, I had to set the z-order of the slashbox content in order to be able to click on the links.
  • Third, I played with the fonts in the slashboxes a little bit.
  • Fourth, I put the same background from the slashboxes behind the briefarticles, just to spruce them up a bit.
  • Finally, I did my usual ad-hiding tricks.

Overall, I think it looks really nice, and is a vast improvement to the original slashdot css. I prefer it over the other two finalists. The only thing I really wish is that it had a javascript menu, but I guess it's not that big of a deal, since I didn't write my own.

Here are the screenshots:
Slashdot Header and slashboxes
Alternate briefarticles

*note: the main page is really the only page that works well. The other pages still need to be flushed out. Since Michael did all the hard work, you'll have to get his permission to get the css and images to implement this on your own.

-TheDawg

Slashdot.org

Journal: slashdot.css

Journal by TheDawgLives

If you're like me, then you HATE square corners and banner ads. And you also use opera to browse slashdot.
I'm going to share a supersecret secret with you. I use my own user.css in opera to browse slashdot. It rounds the corners and gets rid of the banner ads.

Here's a preview: http://freethelaplandsix.com/art/slashdot/Clipboard01.jpg
In order to use this, you'll need these images: http://freethelaplandsix.com/art/slashdot/corner-lt.png, http://freethelaplandsix.com/art/slashdot/corner-slt.png, and http://freethelaplandsix.com/art/slashdot/corner-srt.png.

If you like it, here's the code!

body, div, form, h1, h2, h3, h4, h5, h6, #links ul li, #links ul, #topnav, img { padding: 0; margin: 0; } body { color: #000; position: relative; } sup { margin: 0 0 -.3em 0; padding: 0; } a { color: #600; } a:visited { color: #000; } a:hover { text-decoration: none; } img { border: none; } #jump { display: none; } /* layout */ #frame { margin: .8em; position: relative; } #contents { width: auto; z-index: 1; position: relative; padding: 0; margin: 0 0 0 7.2em; } #messages, #submit, #comments, #login, #pollBooth, #wide, #search, #authors, #topics { overflow: visible; height: 100%; z-index: 2; position: relative; margin: 0 0 1em 0; padding: 0; } #articles, #users-blocks, #polls { overflow: visible; height: 100%; z-index: 2; position: relative; margin: 0 15.6em 1em 0; padding: 0; } #poll-content legend { display: none; } /* Header */ #logo h1 a { text-indent: -700em; display: block; text-decoration: none; float: left; position: relative; } #topnav { z-index: 0; position: relative; height: 80px; margin: 0 0 .1em 0; } #topnav h4 a { text-align: center; padding: 0 .6em; text-decoration: none; } #topnav h4 { text-align: center; margin: 0 auto; white-space: nowrap; } #topnav ul { position: absolute; right: 0; margin: 0; width: 55%; list-style: none; } #topnav li { float:left; text-align: center; width:19%; } #slogan h2 { padding: .3em; margin: 0 0 .3em 0; clear: both; } /* links */ #links { float: left; width: 6.6em; z-index: 0; position: relative; padding: 0; } #links div.block { padding: 0; margin: 0 0 1em 0; position: relative; } #links div.title { background: #999; padding: 0; margin: 0; position: relative; } #links h4 { margin: 0; padding: .3em .6em; color: #fff; position: relative; } #links h4 a, #links h4 a:visited { color: #fff; } #links div.content { padding: .3em .3em .6em .3em; position: relative; } #links em { font-weight: bold; margin: .3em 0 .3em .8em; font-style: normal; } #links h2 { background: #ddd; position: relative; font-size: 130%; margin: 0 0 0 -.2em; padding: 0 .2em; } #links h2 a, #links h2 { color: #444; } #links ul li { list-style: none; } #links ul { margin: 0; } #navigation-content li.user { background: #ddd; position: relative; margin: 1em 0 0 0; padding: .2em 0 0 0; color: #444; } #navigation-content ul ul { margin: 0; padding: .3em 0 .3em .6em; background: #fff; } /* slashboxes */ #slashboxes { float: right; width: 15em; z-index: 0; position: relative; margin: 0 0 .3em 0; padding: 0; } #slashboxes div.block { margin: 0 0 1em 0; position: relative; } #slashboxes div.title { background: #999; padding: 0; margin: 0; position: relative; } #slashboxes h4 { margin: 0; padding: .3em .6em; color: #fff; position: relative; z-index: 4; } #slashboxes h4 a, #slashboxes h4 a:visited { color: #fff; } #slashboxes div.content { margin: 0; padding: .3em .6em .6em .6em; position: relative; } #slashboxes h4 img.map { position: absolute; right: .3em; } #slashboxes ul { padding: 0 .3em; margin: 0 1em; position: relative; } /* login content */ #slashboxes #userlogin-content legend, #slashboxes #login-content legend, #login legend { display: none; } #slashboxes #userlogin-content fieldset, #slashboxes #login-content fieldset, #login fieldset { margin: 0; padding: 0; border: none; } /* olderstuff content */ #slashboxes #olderstuff-content ul { list-style: none; padding: 0; margin: 0; } #slashboxes #olderstuff-content ul li a { font-size: 150%; font-weight: bold; } #slashboxes #olderstuff-content ul li ul li a, #slashboxes #olderstuff-content p { font-size: 100%; font-weight: normal; } #slashboxes #olderstuff-content ul li ul { list-style: disc; padding: 0 0 0 1.3em; margin: 0; } /* General */ * html .generaltitle,* html .generalbody,* html .article .body,* html .article .details { position: relative; } .generaltitle { padding: 0; margin: 0; } .generaltitle div.title { background: #999; padding: 0; margin: 0; } .generaltitle h3 { margin: 0; padding: .3em .8em .2em .8em; color: #fff; } .generaltitle h3 a, .generaltitle h3 a:visited { color: #fff; } .generalbody { padding: 1em; margin: 0 0 1em 0; height: 100%; width: auto; z-index: 2; } /* articles */ .article { padding: 0; margin: 0; } .article div.title { background: #999; padding: 0; margin: 0; } #journal .article h3 { margin: 0; padding: .3em .8em .2em .8em; color: #fff; } #journal .article h3 a, #journal .article h3 a:visited { color: #fff; } .article .details { padding: .4em 1em; margin: 0; position: relative; } .article .body { padding: 1em; margin: 0; min-height: 50px; } .article .details strong { font-weight: bold; position: relative; } .topic { margin: 0 .4em .4em 0; float: right; position: relative; } .topic img { display: block; position: relative; z-index: 10; } .intro p { margin: 0 0 1em 0; position: relative; } .full { margin: 1em 0 0 0; position: relative; } div.storylinks { margin: 0 0 1em 0; padding: 0; } div.storylinks div { margin: 0; padding: 0; } div.storylinks ul { padding: .4em .4em .6em .4em; margin: 0; font-size: 75%; } div.storylinks ul li { border-left: 1px solid #555; padding: 0 .2em 0 .4em; list-style: none; display: inline; } div.storylinks ul li.more { border: none; font-weight: bold; } div.storylinks ul li.comments a { font-weight: bold; } /* Footer */ #footer { clear: both; z-index: 0; position: relative; font-weight: normal; } #footer em { text-align: center; padding: 1.6em 0; vertical-align: middle; font-style: italic; position: relative; } .copyright { clear: both; text-align: center; position: relative; } /* Bottom Nav */ .btmnav { color: #999; text-align: center; margin: 0 0 .4em 0; position: relative; } .btmnav ul li { margin: 0; padding: 0; list-style: none; display: inline; } .btmnav ul li a { border-left: 1px solid #555; color: #999; padding: 0 .4em; } .btmnav ul li.begin a { border: none; padding: 0 .4em 0 0; } .btmnav ul li a:visited { color: #000; } /* Usermenu */ #usermenu { background: #fff; margin: 0; padding: .3em; border: 1px solid #aaa; border-bottom: none; height: 100%; } ul.menu { padding: 0; font-size: 85.5%; margin: .3em 0 0 .3em; } ul.menu li { margin: 0; padding: 0; list-style: none; display: inline; white-space: nowrap; } ul.menu li a { border-left: 1px solid #ccc; padding: 0 .3em; width: auto; } ul.menu li a.begin { border: none; padding: 0 .3em; } ul.menu li a:visited { color: #600; } ul.menu li.selected a { font-weight: bold; text-decoration: none; color: #000; padding: 0 .3em; } .generalbody ul.menu, .submenu { margin: 1em 0 1em 0; padding: 0; font-size: 70%; font-family: sans-serif; display: block; } .generalbody ul.menu li, .submenu li { margin: 0; padding: 0; list-style: none; display: inline; } .generalbody ul.menu li a, .submemu li a { border-left: 1px solid #ccc; border-bottom: none; padding: 0 .3em 0 .3em; } .generalbody ul.menu li a.begin, .submenu li a.begin { border: none; padding: 0 .3em 0 .3em; } #usermenu ul.menu li.selected a, .generalbody ul.menu li.selected a, .submenu li.selected a { font-weight: bold; text-decoration: none; color: #000; } /* Messaging */ .message { padding: 1em; } .error { padding: 1em; color: #600; font-weight: bold; } /* Forms */ fieldset { margin: 0 0 1em 0; padding: 0 1em 1em 1em; border: 1px solid #aaa; } #footer fieldset, #slashboxes fieldset { border: none; } legend { color: #aaa; font-family: sans-serif; font-size: 75.5%; font-weight: bold; margin: 1em 0; } label { display: block; font-weight: bold; padding: 1em 0 0 0; } label.checkbox { font-weight: normal; } input.button { display: inline; margin: 1em 0 0 0; } /* Data tables */ .data_head { color: #fff; background: #600; font-size: 75.5%; font-family: sans-serif; } .data_head th { text-align: left; } .data_hl1 { background: #ccc; font-size: 75.5%; font-family: sans-serif; } .data_hl1 td { border-top: 1px solid #fff; } .data_hl2 { background: #ddd; font-size: 75.5%; font-family: sans-serif; } .data_hl2 td { border-top: 1px solid #fff; } .data_hl3 { background: #eee; font-size: 75.5%; font-family: sans-serif; } .data_hl3 td { border-top: 1px solid #fff; } /* Authors */ #authors h2 { display: inline; } #authors .intro { display: block; margin: .3em; } /* Misc */ .notes, .note { font-family: sans-serif; font-size: 75.5%; display: block; padding: .3em; } .note ul li { font-family: sans-serif; font-size: 68.5%; } pre { overflow: auto; position: relative; width: 90%; padding: 0 0 0 1em; margin: 0; } .lt_tb_col { background: #ccc; } .lt_text_col { color: #fff; } .right { text-align: right; } .sb_header { font-size: 125%; font-weight: bold; color: #600; } #ostgnavbar, .ad1, #advertisement-title, #advertisement-content { position: absolute; top: -10000px; left: -10000px; height: 0px; margin: 0px; width: 0px; padding: 0px; border: 0px; color: #000000; background: #000000; visible: false; } body { font-size: 100%; background: #000; } a { color: #066; } a:visited { color: #000; } .sb_header { color: #066; } /* Layout */ #frame { background: #fff; margin-bottom: 0; padding-bottom: 0; margin-top: .5em; } #articles, #messages, #subscribe, #submit, #comments, #login, #pollBooth, #wide, #search, #authors, #topics, #misc { overflow: visible; z-index: 2; position: relative; margin: 0 .3em 1em 0; padding: 0; } .aduserbox #articles, .admin #articles, div#search.aduserbox .generaltitle, div#search.aduserbox .generalbody { margin: 0 15.6em 1em 0; position: relative; } /* Header */ #logo h1 a { width: 275px; height: 74px; background: url("http://images.slashdot.org/title.gif") no-repeat; margin: 0; } /* test */ #topnav #topics { text-align: center; margin: .2em 0 0 275px; clear: both; } #topnav ul { text-align: right; } #topnav ul li img { margin: .2em 0; } #slogan h2 { display: none; } /* links */ #links div.block { background: #fff; } #links div.title { background: #066 url("http://localhost/corner-srt.png") top right no-repeat; } #links h4 { padding: .1em 0 0 .2em; font-weight: normal; } #links h2 { margin: 0; padding: 0; font-size: 120%; } #links h2 a, #links h2 a:visited { color: #066; } #links em { font-size: 80%; } #links div.content { padding: 0; font-size: 80%; line-height: 120%; position: relative; } #links div.content li a, #links div.content p { padding: 0 0 0 .3em; } /* slashboxes */ #slashboxes div.block { background: #ccc; margin: 0 .3em .3em 0; } #slashboxes div.title { background: #066 url("http://localhost/corner-slt.png") top left no-repeat; } #slashboxes h4 { font-weight: bold; font-family: sans-serif; font-size: 80%; color: #fff; padding: .4em .3em .3em .2em; } #slashboxes div.content { font-size: 80%; line-height: 120%; padding: .3em .3em .3em .2em; } #slashboxes small { font-size: 100%; } #slashboxes .title img { position: absolute; right: .3em; margin: -.13em 0 0 0; } /* Quick links content */ #slashboxes #index_qlinks-content ul, #slashboxes #index_qlinks-content li, #slashboxes #features_qlinks-content ul, #slashboxes #features_qlinks-content li { list-style: none; padding: 0; margin: 0; } /* poll box content */ #slashboxes #poll-content { list-style: none; padding: .3em .2em; } #slashboxes #poll-content form fieldset { padding: 0; } #pollBooth fieldset { padding: .3em 0 0 0; margin: 0; border: none; } /* General */ .generaltitle { margin: 0; background: #ccc; } .generalbody { background: #fff; margin: 0 .3em 2em 0; padding: 0; } /* articles */ .article div.future div.generaltitle div.title { background: #c33 url("http://localhost/corner-lt.png") top left no-repeat; } .article div.title, .generaltitle div.title, #pollBooth div.title#poll-title { background: #066 url("http://localhost/corner-lt.png") top left no-repeat; } #journal .article h3, .generaltitle h3, #pollBooth.aduserbox div.title#poll-title h4 { color: #fff; font-family: sans-serif; font-weight: bold; background: transparent; padding: .1em .8em 0 .8em; } .article .details { font-weight: bold; margin: 0; padding: 0; background: #fff; } .article .details strong { font-size: 80%; } .article .body { margin: 0; padding: 0; background: #fff; } div.storylinks { margin: 1em 0; padding: 0; } div.storylinks div { margin: 0; padding: 0; } div.storylinks ul { display: inline; margin: 0; padding: 0; } div.storylinks ul li { border-left: 1px solid #555; } /* Footer */ #footer { border-top: 1px solid #066; padding: .3em; font-family: sans-serif; } #footer .rightcontent { min-height: 2em; margin: 0 0 0 20em; text-align: center; font-style: italic; } #footer .rightcontent table td { font-style: normal; text-align: left; } #footer .search { text-align: left; position: absolute; top: 0; left: 1em; margin: 0; padding: 0; } #footer legend, #footer fieldset, #footer label { margin: 0; padding: 0; } #footer .copyright { font-size: x-small; color: #066; margin: 0 0 -.4em 0; } body.admin .frame #footer { background: #fff; margin: -1em 1em .5em 1em; padding-bottom: 0; } .clear { clear: both; } .inside { padding: 0; } /* Comments */ .commentBox { background: #066; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } .commentwrap { border: none; margin: 0 .3em; } #commentlisting { position: relative; margin: 0 .3em; } .comment { position: relative; } .commentTop .details { font-size: 100%; margin: 0; padding: 0; } .commentTop .details small { font-size: 80%; } .commentTop h4 a { color: #000; } .commentTop { background: #ccc; background: #ccc url("http://localhost/corner-lt.png") top left no-repeat; border: none; padding: .3em; } .commentSub { background: transparent; padding: .3em; font-size: 80%; border: none; margin: 0; } .commentBody { border: none; padding: .3em 0; } .comment_footer { background: #ccc; } .note ul { font-size: 140%; font-family: serif; } /* Poll */ .bar { width: 100%; border: none; } .barColor { background: #066; } .barPercent { color: #066; white-space: nowrap; padding: 0; background: none; } .barVotes { color: #000; background: none; padding: 0 0 0 .3em; } .totalVotes { font-size: 120%; } /* Bottom Nav */ .btmnav { color: #066; font-size: 80%; padding: 0 0 1em 0; margin: -.7em 0 0 0; } .btmnav ul li a { font-family: serif; color: #fff; border-left: 1px solid #066; } body.admin .btmnav a { color: #066; } .btmnav ul li a:visited { color: #fff; } /* Journal */ .journaldate { position: relative; } .generalbody #journalgeneric .article { height: auto; margin: 1em 0; } #journalgeneric div.storylinks ul li { margin: 0; padding: 0; border: none; } #journalgeneric div.storylinks ul li a { padding: 0 .4em 0 1em; border-left: 1px solid #000; } #journalgeneric div.storylinks ul li.edit a, #journalgeneric div.storylinks ul li.discussion a, #journalgeneric div.storylinks ul li.journalid a { border: none; } #journalgeneric .details { font-style: italic; font-size: 100%; font-weight: normal; background: #ccc; margin: 0 0 .3em 0; padding: 0 .1em; } #journalgeneric .details .adminoptions { font-style: normal; position: absolute; right: 0; font-size: 85%; margin: 0; } #journalgeneric .body { margin: 0 0 0 .3em; } /* Forms */ #admin input, textarea { width: 80%; } #admin input.button { width: auto; } /* Submit */ #submit fieldset { margin: 0; padding: 0; border: none; } #submit legend { display: none; } #submit .message { margin: 0 0 1em 0; padding: 0; } /* Misc */ pre, code { font-size: 80%; } /* Ad */ .ad1 { margin: .3em 0 0 0; padding: 0; text-align: center; } .ad2 { margin: 0; padding: 0; text-align: center; } .ad6 { margin: .2em .2em .2em 0; padding: 0; } /* Data Tables */ .data_head { background: #066; } .data_hl1 td, .data_hl2 td, .data_hl3 td { border: none; } .data_bgc1 { width: 20%; color: #fff; background: #066; } .data_bgc1 a { color: #fff; } .tb_col { background: #066; } /* Usermenu */ ul.menu a, ul.menu a:visited { color: #000; } .generalbody ul.menu li a { color: #066; } #usermenu { background: #066; padding: 6px 0 0 9px; margin: 0; border: none; } #adminmenu, #adminmenu a { color: #066; } #usermenu li, #usermenu-top li { display: inline; list-style: none; margin: 0; padding: 0 2px 0 1px; } #usermenu ul.menu a { background: url("http://images.slashdot.org/menu_r.gif") #ccc no-repeat top right; color: #000; height: 1em; padding: 5px 11px 0 1px; margin: 0 -.3em 0 0; text-decoration: none; border: none; } #usermenu li.selected { background: url("http://images.slashdot.org/menu_l_s.gif") #fff no-repeat top left; margin: 0 0 0 -9px; padding: 5px 2px 0 7px; } #usermenu li.selected a { background: transparent url("http://images.slashdot.org/menu_r_s.gif") no-repeat top right; color: #000; padding: 5px 11px 0 2px; text-decoration: none; } #usermenu li.selected b.begin { background: url("http://images.slashdot.org/menu_l_s_b.gif") no-repeat top left; margin: 0 0 0 -9px; padding: 5px 0 0 9px; } #usermenu li span.begin { background: url("http://images.slashdot.org/menu_l_b.gif") no-repeat top left; margin: 0 0 0 -9px; padding: 5px 1px 0 9px; } #usermenu li.selected b a.begin { padding: 5px 11px 0 2px; } #usermenu ul.menu a.end { background: url("http://images.slashdot.org/menu_r_e.gif") #ccc no-repeat top right; padding: 5px 11px 0 2px; } #usermenu li.selected a.end { background: transparent url("http://images.slashdot.org/menu_r_s_e.gif") no-repeat top right; color: #000; padding: 5px 11px 0 2px; } #usermenu-top ul { padding: 0; margin: 0 0 1em 0; } #usermenu-top li:before { content: "| "; } #usermenu-top li:first-child:before { content: ""; } .uslashboxes { background: #ccc; } /* Messages */ body.admin div.message { font-family: sans-serif; border: 1px solid #066; color: #066; margin: -.5em .1em .6em .1em; font-weight: bold; padding: .3em; background: #bdd; } body.admin div.message .error { border: 1px solid #600; color: #600; background: #ebb; } /* Admin */ body.admin .generaltitle { padding: 0 1em; margin: 0; background: #fff; } body.admin .generalbody .generaltitle, body.admin fieldset .generaltitle { padding: 0; margin: 0; } body.admin .generalbody { padding: 0 1em 1em 1em; margin: 0; background: #fff; } body.admin fieldset { padding: 0 1em 1em 1em; margin: 0; background: #fff; } body.admin { background: #000; } body.admin .contentsadmin { padding: .6em 0 0 0; margin: 1em; background: #fff; } body.admin #content { padding: 0 0 .1em 1em; } #st-display table { background: #066; color: #fff; } .admin_story_list, .submit_story_list { font-family: sans-serif; } #users fieldset { border: none; margin: 1em 0 0 0; padding: 0 1em 1em 1em; } #users legend { display: none; } /* Admin menu */ #adminmenu { margin: 0; background: #eee; border-top: 1px solid #ddd; padding: .1em; } #adminmenu ul { /* all lists */ list-style: none; z-index: 20; } #adminmenu ul { padding: 0; margin-top: 0; } #adminmenu ul li ul { border: 1px solid #066; border-top: none; padding: 0; margin: 0; } #adminmenu ul.nestedmenu a { display: block; text-decoration: none; padding: 0 0 0 .3em; } #adminmenu ul.nestedmenu li:hover { background: #ddd; } #adminmenu ul.nestedmenu li ul li a:hover { font-weight: normal; } #adminmenu ul li ul li a { display: block; width: 8em; text-decoration: none; padding: 0; } #adminmenu ul.nestedmenu li ul li { border-top: 1px solid #fff; border-bottom: 1px solid #ccc; padding: 0 0 0 .3em; width: 7.7em; margin: 0; } #adminmenu ul.nestedmenu li { float: left; margin: 0 .6em; } #adminmenu ul li ul { position: absolute; background: #eee; width: 8em; display: none; } #adminmenu ul li:hover ul { display: block; } #adminmenu ul li ul li:hover { border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; background: #ddd; } body .adminstoryform fieldset { background: #ccc; } body .adminstoryform legend { display: none; } .briefarticle { padding: .3em 1em; font-size: 80%} .briefarticle a { color: #000 } .future .briefarticle { background: #c33; } .briefarticles { reset; padding: 0; background: #ccc url("http://localhost/corner-lt.png") top left no-repeat; border-bottom: solid 2px #066; margin: .3em 0 1em 0;} .briefarticles .section { color: #333; } .briefarticles .storytitle { font-weight: bold; } .secpref_master td { border-bottom: solid 2px #066;} .secpref_nexus_row { color: #aaa; background: #ccc; } #sectionprefs_message { background: #066; font-size: 120%; color: #fff; font-weight: bold; text-align: right; } #sectional_pref {margin-top: -1.8em !important;} #sectionprefs_hdr {text-align: right; background: #066; font-size: 120%; color: #fff; } #sectionprefs_hdr a {float: left; color: #fff;} #sectionprefs_hdr span a {float: none; color: #fff; font-size: 10px; font-weight: bold; font-family: sans-serif; text-decoration: none;} #sectionprefs_hdr span { margin: -.3em 0; padding: 0 4px; height: 11px; width: 11px;}

Just use it as your user.css in opera and set the view on the slashdot tab to user.

If entropy is increasing, where is it coming from?

Working...