Lorne's "Let's Make This UI Less Shit" stylesheet thread



  • NEEDED: Borders around some fucking shit. I'm goddamn tired of inputs with no borders, so it just looks like floating text. Fuck you. Input widgets have borders for a fucking reason.

    Edit to this shit as I make them.

    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("what.thedailywtf.com") {
    
    blockquote
    {
     background-color:#F6F6F6 !important;
     border:1px solid #e6e6e6 !important;
    }
    
    ul.posts>li, ul.topic-list>li
    {
        border: 1px solid #6b6b6b !important;
        border-radius: 5px;
        padding:0.25em;
    }
    
    ul.topic-list>li div.card
    {
        border-left-width:4em !important;
    }
    
    .timeago
    {
    font-size:0.75em;
    }
    .timeago:after
    {
      content:")";
    }
    .timeago:before
    {
        content:attr(title) "("
    }
    
    input.title.form-control
    {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #cccccc !important;
    margin-bottom:0.25em !important;
    }
    
    select.form-control.category-list
    {
        padding: 0px !important;
        height:1.5em !important;
    }
    
    .tags-container input
    {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #cccccc !important;
    
    }
    
    
    
    
    }
    


  • Also, borders around posts in a thread and on a list. Because FUCK YOU, I don't want to just guess where one whitespace-filled node ends and a nother whitespace-filled node begins.



  • wish list:
    restrict width of text in posts. Ideal paragraph width is like ~15 words across.
    make the "there are new posts" box not move everything else on the page when it appears
    kill the fadeaway when clicking on a post or whatever



  • @Lorne-Kates said:

    Also, borders around posts in a thread and on a list. Because FUCK YOU, I don't want to just guess where one whitespace-filled node ends and a nother whitespace-filled node begins.

    I don't know what you're talking about. A 1-pixel wide, very light gray line isn't enough of a divider for you?



  • @fwd said:

    Ideal paragraph width

    That's because people have made it a habit to not read, and therefore can't bother themselves with digesting anything complex.



  • @Lorne-Kates

    how do you make the post/reply buttons border-radius.

    I tried a[component="post/reply"] { border-radius:4px; } and that didn't seem to work



  • @Dragnslcr said:

    @Lorne-Kates said:

    Also, borders around posts in a thread and on a list. Because FUCK YOU, I don't want to just guess where one whitespace-filled node ends and a nother whitespace-filled node begins.

    I don't know what you're talking about. A 1-pixel wide, very light gray line isn't enough of a divider for you?

    The everywhere repeated reply/quote buttons (neither of which seems to be accept a selection as a quote) and updownvote crap aren't enough as separators?



  • ITYM Lorne's "Let's Make This UI Less Shit But Not Include Screenshots" stylesheet thread. :tropical_drink:





  • Dammit, that backfired.


  • Discourse touched me in a no-no place

    @xaade said:

    how do you make the post/reply buttons border-radius.

    Why would you want to do that, Jeff?



  • @FrostCat because rectangles having sharp corners are a distraction to me. They draw my eyes to the corner of the buttons, taking my eyes away from the function in the middle.

    Rounded buttons don't do this. Rounded buttons appear to have pressure on the corners, directing my eyes to the center.



  • @xaade I'd go for a.no-select myself



  • @xaade said:

    That's because people have made it a habit to not read, and therefore can't bother themselves with digesting anything complex.

    No. It's how most eyes work. @PJH excepted, of course. I agree, this maximum widescreen styling bugs me, too.

    div .content {
        max-width: 100ex;
    }
    


  • @calmh

    repeated reply/quote buttons … and updownvote crap aren't enough as separators?

    They shouldn't be on a separate row, so the point should be moot. Float them right at the top (or bottom) of the content, gain a bunch of space per comment, and thus increase the information density. Save on scrolling effort.



  • @boomzilla It's definitely an efficiency gain. I'm not arguing that. Just like my deal with rounded buttons.

    On the internet, of course, it doesn't matter, the whole point is quick digesting of data.

    I'm speaking in general. We've seem to have lost the art of reading / listening.



  • @tufty said:

    thus increase the information density. Save on scrolling effort.

    Too dense and then you lose efficiency on parsing.

    UI is not a concrete thing, it's give and take.



  • @xaade said:

    I'm speaking in general

    Then you shouldn't use phrases like, "That's because.."



  • @boomzilla Yes, father... :rolleyes:


  • :belt_onion:

    Which of the dozens of UI themes is this CSS for? All of them? The default theme? A specific theme?


  • Discourse touched me in a no-no place

    @xaade said:

    Rounded Women friendly buttons don't do this.


    Filed under: FTFY


  • @DoctorJones

    I don't know why people relate finding efficiencies to reduce effort as a feminine trait.

    If someone's definition of masculinity involves more effort as a bragging right, then evolution must be unmanly.


  • Discourse touched me in a no-no place

    @xaade relax man, it was a reference to this:


  • :belt_onion:

    @DoctorJones I thought it was a joke about how women don't like to date squares, they only like the cool guys.


  • Discourse touched me in a no-no place

    @darkmatter said:

    @DoctorJones I thought it was a joke about how women don't like to date squares, they only like the cool guys.

    It's like an ogre, it has layers.



  • @DoctorJones

    Had I known about that device, the joke would have been funny.


    Holy hell that thing...

    Ok, so it's supposed to be round, but the screen is still square... function still wins over form.... and the designer still doesn't get it.


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.