Stories
Slash Boxes
Comments

Slash Open Source Project

Slashcode Log In

[ Create a new account ]

Slash + CSS

posted by vroom on Tuesday September 06, @10:43AM   Printer-friendly   Email story

We've been working for some time now on getting Slash to utilize CSS and also updating it's old crufty HTML while we're at it. We've moved Slash to HTML Strict 4.01. Slashcode.com and use.perl.org are currently running on this code. You can take a look at the markup, or log in and take a look around.

If you'd like to see what Slashdot might look like you can activate the Slashdot stylesheet on Slashcode.com in Firefox by choosing View > Page Style > Slashdot. I'm sure you can do the same thing with other browsers but you're on your own for the specifics of how to do so.

If you're a developer feel free to install a test site and play around with the new code. It's currently available as the freshest code in CVS.

ie:
$cvs -d:pserver:anonymous@cvs.sourceforge.net:/cvsroot/slashcode login
CVS password: (hit return, there is no password)
$ cvs -d:pserver:anonymous@cvs.sourceforge.net:/cvsroot/slashcode co
slash

Note we only suggest you use this on a test site. The code is still in being actively developed and changed.

For live sites you'll want to stick to using tags. The latest non-css tag is T_2_5_0_76.

Instructions for grabbing T_2_5_0_76:

$cvs -d:pserver:anonymous@cvs.sourceforge.net:/cvsroot/slashcode login
CVS password: (hit return, there is no password)
$ cvs -d:pserver:anonymous@cvs.sourceforge.net:/cvsroot/slashcode co -r
T_2_5_0_76 slash

Light mode is now just handled by css. It will probably still see some further refinement, however we appreciate any feedback on that, handheld support and similar things.

We hope this goes a long way towards making Slash more easily customizable from a design standpoint, and welcome any feedback you might have.

Display Options Threshold:
The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.
  • w00t

    (Score:0)
    by Anonymous Coward on Tuesday September 06, @11:57AM (#6241)
    About time guys!
    • Re:w00t by Anonymous Coward (Score:0) Tuesday September 06, @02:02PM
    • Re:w00t by Anonymous Coward (Score:0) Tuesday September 06, @02:11PM
  • looks good

    (Score:1)
    by hrbrmstr (7098) on Tuesday September 06, @11:59AM (#6242)
    ( http://www.rudis.net/ )
    latest firefox - changed styles - beautiful (though still ugly...you know what i mean)

    not a <table> element to be found in the page source.

    great job, folks!
  • I love it

    (Score:0)
    by Anonymous Coward on Tuesday September 06, @12:18PM (#6243)
    It's about time!

    Anyway, I'm at work, so I can't look at the slashdot css, but the default one looks really impressive. kudos
  • Opera

    (Score:0)
    by Anonymous Coward on Tuesday September 06, @12:55PM (#6244)
    Works fine in Opera. The curvies and wavies appear better too than they do on slashdot.

    However, the "View->Styles->Slashdot" option does not stay selected between pages. I'm not sure if that's just plain how it works, or something is not right somewhere.

    Looks great, to me. Just make it all validate properly, and you're golden.

  • Put content first

    (Score:0)
    by Anonymous Coward on Tuesday September 06, @01:44PM (#6246)
    Please, before another 8 years go by, put the stories just after the title. This makes it much less aggravating for cell phone and PDA browsers. Not to mention text browsers like 'links' which is my second favorite /. browser out there.

    You can still position everything just fine with CSS for graphical browsers, they won't see a difference. But for text browsers, users won't have to hit Page Down forty times before getting to the first story.


  • Why html 4.01?

    (Score:0)
    by Anonymous Coward on Tuesday September 06, @02:02PM (#6249)
    Why, why, why, why are you not using xhtml? Why even bother to modernize it, if you're going to bring it up to 2001 standards in 2005?
  • Fabulous!

    (Score:0)
    by Anonymous Coward on Tuesday September 06, @02:06PM (#6250)
    Amazing work! I'm very excited to see this happening. All the best!
  • by Anonymous Coward on Tuesday September 06, @02:09PM (#6251)

    While it's probably done to allow for more CSS flexibility (rounded corners and all), posts structure could be much simplified:

    • Articles could be organized in a single list (of articles), probably unordered. Definition list could even be considered but would make harder the creation of a unity between the storie's title and content (which would be the price of some more flexibility)
    • The pair of "divs" around the h3 title of stories are not really necessary, and even for the sake of styling a single one would probably be enough.
    • The "div class="details" for the subtitle should be dropped and replaced by a h4 or an h5
    • A single div around the content is more than enough, and I fail to see the role of the one around the image-link (the div of class "topic"), the link+image should be styled directly
    • The 2 divs around links are likewise unneeded, the "ul" should be styled instead, one div could be kept for styling purposes but more is unnecessary clutter of the code

    On the other hand, the fair use of paragraph tags is really cool, makes the code look much cleaner, and the use of lists nearly everywhere where they may be used is nice.


  • by Anonymous Coward on Tuesday September 06, @02:22PM (#6255)
    I am glad to see this CSS refreshening of the Slash looks, but I was *very sad* to see that there is STILL no automatic detection for mobile browser support! I tried with my AvantGo, Pocket IE, my phone's Openwave UP.Browser and Netfront browsers and NONE of these are supported properly.

    To make things even worse the CSS version of Slashdot is not as compatible anymore with these mobile browsers as they are not so CSS-capable as desktop browsers are. In other words: sh*t. :(

    What I need is a special mobile version of Slashdot that loads AUTOMATICALLY when the 10-15 most popular mobile browsers hit the slashdot.org site.
  • xhtml

    (Score:1)
    by ARC (7109) on Tuesday September 06, @02:38PM (#6257)

    Guys xhtml, 4.01 strict is a waste of time, innovate don't regress! Also it's ok to use tables when you are displaying tabular data (a calendar, stock chart, etc.). CSS-driven and standards-based design is about semnatic, relevant markup, not simply ejecting tables.

    May I refer you to some important reading material:

    Bullet Proof Web Design [simplebits.com]

    Web Standards Solutions [simplebits.com]

    and important sites:

    www.csszengarden.com [csszengarden.com]

    www.simplebits.com [simplebits.com]

    www.alistapart.com [alistapart.com]


    • Re:xhtml by Enrico Pulatzo (Score:1) Tuesday September 06, @03:41PM
      • Re:xhtml by ARC (Score:1) Tuesday September 06, @04:00PM
        • Re:xhtml by Enrico Pulatzo (Score:1) Tuesday September 06, @06:39PM
          • Re:xhtml by ARC (Score:1) Wednesday September 28, @09:27AM
    • Re:xhtml by Anonymous Coward (Score:0) Wednesday September 28, @05:16PM
  • by Anonymous Coward on Tuesday September 06, @02:43PM (#6259)
    I can't click and drag to select multiple lines of text on the front page of slashcode in FireFox on Windows which is real annoying. good luck with the upgrade!
  • by standardsman (7120) on Tuesday September 06, @02:45PM (#6260)
    Running the main page of this site through validator.w3.org, reveals 8 HTML errors. Even if you switched to HTML 4.01 transitional, you'd still have 4 errors. So you've got some work to do there. When validating the article page itself, there's 9 errors. Valid HTML, will keep you from having CSS issues in some cases. As for the CSS itself, if you run that through a validator (a good one's at http://jigsaw.w3.org/css-validator/ [w3.org] ), you'll also find you have an error and a couple warnings to deal with. valid code, will keep you from having issues with your design and wasting time by accident. In the future, if you want to change the entire design for a specific holiday or do it permanently, it won't take much to change things without accidentally discovering an issue you need to clean up before a particular design could work.
  • a question

    (Score:1)
    by darksoul (7133) on Tuesday September 06, @03:26PM (#6263)
    call me a hypocrite or a rebel or whatnot but I find the original layout of this site (red white blueish gradient bg) better and more aesthetic. Can't both styles available on slashdot?
  • by Anonymous Coward on Tuesday September 06, @03:37PM (#6265)
    IE 5.50.4522.1800, Windows 4.90.3000. There's huge spacing between the articles. This makes the page look horribly broken. The good old HTML which is still used on Slashdot worked fine.
  • Safari

    (Score:0)
    by Anonymous Coward on Tuesday September 06, @04:10PM (#6271)
    Looks good in Safari :-)
    • Re:Safari by Anonymous Coward (Score:0) Thursday September 08, @11:40AM
  • Camino

    (Score:0)
    by Anonymous Coward on Tuesday September 06, @04:18PM (#6272)
    Camino seems to be good :)
  • Konqueror

    (Score:0)
    by Anonymous Coward on Tuesday September 06, @04:21PM (#6274)
    I cannot see the stylesheet in Konqueror [konqueror.org] 3.4.1
    • Re:Konqueror by Anonymous Coward (Score:0) Tuesday September 06, @06:23PM
  • by darkforge (7148) on Tuesday September 06, @04:23PM (#6275)
    I've just filed a bug: [ 1283326 ] CSS: New SlashCode is illegible on Treo 650 [sourceforge.net]

    I bet it's probably illegible on other handheld devices as well... try it on yours!


  • by Anonymous Coward on Tuesday September 06, @04:34PM (#6277)
    Not that I print slashdot often, but it's a common thing missed when sites get stylized with CSS. Go to print preview (I did so in Mozilla 1.7.11 and IE6 on WinXP SP1) and the first page is dominated by the category icons, one per line, that are lined up horizontally in the regular screen view. You'd probably want to exclude those icons from the print media altogether (which is a snap to do in CSS). This applied to both the slashdot and slashcode skins. I'm not an SF user, so I'm posting here instead of creating an account to post the bug report. --jay
  • Divitis

    (Score:1)
    by l0b0 (7151) on Tuesday September 06, @05:05PM (#6278)
    Good work, but currently looks like a case of divitis [wikipedia.org]. Oh yeah, and XHTML.
    • Re:Divitis by Anonymous Coward (Score:0) Wednesday September 07, @02:12AM
  • by Anonymous Coward on Tuesday September 06, @05:06PM (#6279)
    Of course with "a good browser", you can select the stylesheet to use when alternative stylesheets are available. In IE you can't.
    But even "good browsers" like Firefox, Mozilla and Opera don't handle this correctly. When you click on a link that fetches the next page from the same site, the style sheet selection is undone and you again need to pull out the same 3-level menu selection to switch style to the one you want.

    Only Konqueror handles this "correctly", by remembering the style you selected for tht site.
    However, solutions using a cookie are available, like the one describled in this article on A list Apart: http://www.alistapart.com/articles/alternate/ [alistapart.com]

    When using this method, some clickable widget on the page can be used to select style, while the menu item still works.
    Slashdot should incorporate something like this, or the stylesheet selection will be useless to 99% of its users.
  • heh.

    (Score:0)
    by Anonymous Coward on Tuesday September 06, @05:48PM (#6284)
    "it's old crufty"->"its old crufty" You guys don't know the difference between "it's" and "its"? heh. heh. heh. heh.
    • Re:heh. by Anonymous Coward (Score:0) Monday September 19, @09:19AM
  • css errors

    (Score:0)
    by Anonymous Coward on Tuesday September 06, @07:37PM (#6288)
    Error: Unknown property 'word-wrap'. Declaration dropped.
    Source File: http://www.slashcode.com/base.css [slashcode.com]
    Line: 22

    Error: Expected identifier for ID selector but found '#404'. Ruleset ignored due to bad selector.
    Source File: http://www.slashcode.com/base.css [slashcode.com]
    Line: 48

    Error: Selector expected. Ruleset ignored due to bad selector.
    Source File: http://www.slashcode.com/slashdot.css [slashcode.com]
    Line: 244

    Error: Expected end of value for property but found '2px'. Error in parsing value for property 'padding'. Declaration dropped.
    Source File: http://www.slashcode.com/slashdot.css [slashcode.com]
    Line: 488
  • highlighting

    (Score:0)
    by Anonymous Coward on Tuesday September 06, @09:22PM (#6289)
    I've got a bit of a reading problem that's helped by highlighting text as a read it.. for some reason sites with funky new CSS don't highlight very nicely. if you are also in firefox try it your self. Start highlighting at "We've" at the top of this article, and try highlighting the words as you read them. Probably a problem with the browser rather than the CSS - annoying all the same.
  • Serif fonts?

    (Score:0)
    by Anonymous Coward on Tuesday September 06, @10:16PM (#6290)
    I'm seeing serif fonts here. This is not good. My eyes are bleeding.
    • Yeah, by Anonymous Coward (Score:0) Wednesday September 07, @05:08AM
  • Plzplzplz

    (Score:0)
    by Anonymous Coward on Tuesday September 06, @11:17PM (#6291)
    Use a sans-serif font PLLLLLEEEEAASE. Otherwise, oh my god it rocks.
  • by Anonymous Coward on Wednesday September 07, @04:38AM (#6296)
    It can be a whole lot better. I see you do the same mistake many other sites do: Instead of using the native header tags, you use a div and a class. This leads to unneccessary clutter, and frankly doesn't look too good if you use a browser which doesn't support CSS (just disable the stylesheet to see what I'm talking about). Granted, those browsers aren't too common anymore, but you should still cater for them.

    A good rule of thumb is to try and use as little divs as possible, since they at this point doesn't carry the same semantic weight as h1, p and uls do.

    - Wertigon
  • by Anonymous Coward on Wednesday September 07, @04:48AM (#6297)
    Menu route:
      At the bottom of the View -> Style menu.

    Toolbar route:
      Hit the view toolbar toggle if the view bar isn't already shown.
      Hit the stylesheet dropdown ("Author mode").
      Select a stylesheet from the bottom of the list.
  • Status is Failure.

    (Score:0)
    by Anonymous Coward on Wednesday September 07, @05:16AM (#6302)
    I still see 'small' and 'b' elements in the source.

    Bad developers. No cookie.
  • divitus galore

    (Score:1)
    by Bob Easton (7047) on Wednesday September 07, @05:07PM (#6305)
    Simply killing the two extra divs for every will save bandwidth. They aren't needed. Style the h4 directly.
  • Jaggys

    (Score:0)
    by Anonymous Coward on Wednesday September 07, @06:46PM (#6307)
    Please fix the Jaggys on the icons, it hurts my eyes/
  • Few differences

    (Score:0)
    by Anonymous Coward on Tuesday September 13, @05:09PM (#6311)
    This is just because some people are bound to complain if there's but a pixels difference :P..

    The headlines padding (+nav header padding) is a little too much, and I'm not sure about the username coloring.
  • This is a test

    (Score:0)
    by Anonymous Coward on Wednesday September 14, @12:49AM (#6312)
    asd
  • Problem

    (Score:0)
    by Anonymous Coward on Friday September 16, @05:54PM (#6313)
    Biggest problem is on Firefox I can no longer select more than one paragraph with the mouse unless I start on the first paragraph. I presume this is because each paragraph is in a DIV section or something? I don't really know that much about it. It's been driving me nuts at use Perl;, and I'm not looking forward to it driving me nuts on slashdot.
  • How cool is this

    (Score:1)
    by PCCybertek (7236) on Thursday September 22, @03:08PM (#6320)
    ( http://www.pccybertek.com/ | | Last Journal: Thursday September 22, @02:56PM )
    I like the red look. I really like the way you can instantly change the view, thats the CSS I assume. Looking forward to when there's a couple style sheets to chooses from.
  • by Anonymous Coward on Thursday September 22, @04:52PM (#6321)
    The vertical listing of Nick, Password, Name, Subject just eats up a ton of linebreaks, and creates a great void of whitespace on the righthand side. Couldn't we at least have the Nick and Password fields reside on the same line? Right now it's a crazy big form.
  • by Anonymous Coward on Thursday September 22, @04:55PM (#6322)
    Could it? You know, have URLs be automatically linked so that they don't need to have <URL: blah > silliness added? There's nothing "automatic" about the current URL auto-link.
  • by Anonymous Coward on Friday September 23, @02:44PM (#6324)

    I know that this is probably not the place to ask, but would it be possible to add a title attribute to the comments links? I frequently find myself bookmarking comments on slashdot and other slash based sites by right clicking on the comment id link. In firefox at least the default bookmark title gets set to that comment id which is completely unhelpful.

    All that would be needed is to change:

    <a href="//slashdot.org/comments.pl?sid=163167&amp;ci d=13630176">#13630176</a>

    to:

    <a href="//slashdot.org/comments.pl?sid=163167&amp;ci d=13630176" title="$comment_title">#13630176</a>

    And now my bookmark title would get set to that title, which would far more helpful

    Thanks,
    hostyle


  • by ChristTrekker (1204) on Thursday September 29, @10:26AM (#6328)

    I thought this site was completely dead! ☺ Very glad to see that it's not.

    This change was much needed. Valid HTML+CSS makes the geeks' favorite web site look more respectable. Thanks for all the hard work to make it happen.

    Does clearing this hurdle mean we'll see some more updates here regarding slash development? For instance, about a migration to Apache 2?


    --
    Constitutionally Correct [cpne.org] ⇐
  • by Anonymous Coward on Tuesday October 04, @10:22AM (#6330)
    Could you please fix the problem with the logo image (top left) disappearing and refreshing when I move my mouse onto or back off of it?

    Is it meant to display a different image on focus/blur?
    If so, why not cache it? (there is javascript in the page already...)

    I noticed it on /. where I use the logo link to get back to the home page (as the home link at the footer often links to a category page instead).

    It reminds of a monkey-bashing click-thru ad, as it seems to evade my mouse cursor every time I take aim.

    (Running IE6 on win XP, and also on win2K, btw)
  • 1 reply beneath your current threshold.