Can we have an official NodeBB-Stylish/userscript topic now?



  • @Kuro yeah, I figured it out.
    I had them inside of this bracket that messed it up.


  • 🚽 Regular

    I changed a few things for myself, mainly the mentions and blockquotes.

    If anyone's interested, I can post the CSS tomorrow.



  • Minimize the vote buttons.

    .topic [component="post/upvote"],
    .topic [component="post/downvote"] {
        border-radius: 4px;
        padding: 5px !important;
        padding-right: 2px !important;
    }
    
    span[component="post/vote-count"] {
        padding: 2px 5px;
    }
    
    .votes {
        padding-left: 10px;
    }
    

    I recommend you also choose a background color that blends more into the background, I use the slate theme, so my background color is this

    .topic [component="post/upvote"],
    .topic [component="post/downvote"] {
        background: #333;
    }
    


  • @asdf said:

    Hiding tufty's disgusting avatar:

    img[component="user/picture"][data-uid="291"] {
      visibility: hidden;
    }
    
    .avatar-wrapper[data-uid="291"] > img {
      visibility: hidden;
    }
    

    To replace tufty's avatar with a "T" on a red background (like the standard letter avatars):

    /* Topic List and Topic */
    
    img[component="user/picture"][data-uid="291"] {
        display: none;
    }
    
    /* Topic List - Topic Creator */
    
    .avatar a[href="/user/tufty"] {
        background-color: #990d10;
        width: 46px;
        height: 46px;
    }
    
    .avatar a[href="/user/tufty"]::before {
        content: "T";
        height: 100%;
        width: 100%;
        line-height: 46px;
        font-size: 2.4rem;
        margin-right: 15px;
        vertical-align: middle;
        text-align: center;
        color: #eee;
        font-weight: normal;
        display: inline-block;
    }
    
    /* Topic List - Most Recent Reply */
    
    .card a[href="/user/tufty"] img.user-img {
        display: none;
    }
    
    .card a[href="/user/tufty"] {
        background-color: #990d10;
        width: 24px;
        height: 24px;
        display: inline-block;
    }
    
    .card a[href="/user/tufty"]::before {
        content: "T";
        height: 100%;
        width: 100%;
        line-height: 24px;
        font-size: 1.5rem;
        vertical-align: middle;
        text-align: center;
        color: #eee;
        font-weight: normal;
        display: inline-block;
    }
    
    /* Topic */
    
    .icon a[href="/user/tufty"] {
        background-color: #990d10;
        width: 46px;
        height: 46px;
        line-height: 46px;
        font-size: 2.4rem;
        margin-right: 15px;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        color: #eee;
        font-weight: normal;
    }
    
    .icon a[href="/user/tufty"]::before {
        content: "T";
        height: 100%;
        width: 100%;
    }
    
    /* Profile Page */
    
    .avatar-wrapper[data-uid="291"] > img {
        display: none;
    }
    
    .avatar-wrapper[data-uid="291"] {
        background-color: #990d10;
        width: 136px;
        height: 136px;
    }
    
    .avatar-wrapper[data-uid="291"]::before {
        font-size: 7.5rem;
        vertical-align: middle;
        text-align: center;
        content: "T";
        line-height: 128px;
        color: #eee;
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    

    Screenshots:
    1_1458761640865_WTDWTF_TuftyAvatarReplacement2_Cropped_2016-03-24.PNG

    0_1458761640865_WTDWTF_TuftyAvatarReplacement1_Cropped_2016-03-24.PNG

    Edit: Add support for the avatar in the Most Recent Reply card in the Topic List.
    Edit 2: Add screenshots at request of @loopback0


  • :belt_onion:

    Turns out the Topic title is there in the top bar, but the fools put a display none on it.... I guess they hate tabbed browser users.

    .header [component="navbar/title"] { display: block !important; clear: both; }

    Yay now I can tell wtf topic I'm on without having to decypher the URL.

    boo you can't have a newline after the end of a code block before the next line of text?wtf


  • I survived the hour long Uno hand

    @darkmatter Nice find! This is probably theme dependant but it looks nice like this on my theme:

    /*Darkmatter's topic bar fix*/
    .header [component="navbar/title"]::before {
        content: 'Topic: ';
    }
    .header [component="navbar/title"] { 
        display: block !important; clear: both;
        font-size: 20px;
        padding-left: 50px;
    }
    

    ETA: Eh, crap, it looks shitty on the non-topic pages. Backed off a bit:

    /*Darkmatter's topic bar fix*/
    
    .header [component="navbar/title"] { 
        display: block !important; clear: both;
        font-size: 20px;
        padding-left: 30px;
    }
    


  • @darkmatter @Yamikuronue @Kuro how's that look?

    I had to do some weird CSS to make it not push the button bar over, but I think it should work across browsers.


  • I survived the hour long Uno hand

    @ben_lubar Teensy. I bumped the font size up and put some padding over to make it look like a header in my stylish

    Your version:

    0_1458752993433_upload-ba3ab535-2409-401d-bb2f-7326706927af

    Compared to:

    0_1458753013220_upload-90b594da-4a4c-4f57-9e5f-52d579482f33

    with Stylish turned on.

    That said, my stylish works a lot better now with your not-bumping-the-bar fix :D



  • @Yamikuronue Could also use some padding-bottom IMO...


  • I survived the hour long Uno hand

    @NedFodder

    .header [component="navbar/title"] { 
        font-size: 20px;
        padding-left: 30px;
        padding-bottom: 10px;
    }
    

    0_1458753099898_upload-b66f4359-1969-49eb-83c4-307b58417e8c


  • FoxDev


  • I survived the hour long Uno hand

    Things that are driving me crazy: When there's a 30px image with 10px margins, moving the text below it over 50px doesn't line it up with the text beside it!

    ...wait.....

    grabs mspaint

    Holy crap it is lined up. It just looks wrong. My eyes must be tired.

    .header [component="navbar/title"] { 
        font-size: 20px;
        padding-left: 50px;
        padding-bottom: 10px;
    }
    


  • @ben_lubar

    0_1458753203585_upload-f0ff5aff-ddd1-42b0-afcb-7a790de73e6b

    Window width is 1000px. The problem is that the button bar gets pushed down due to all the floating rules, and the fact that the thread position indicator changes size doesn't help.

    Or, with @Yamikuronue's updated version:

    0_1458753813946_upload-3c24b579-d70c-4544-bceb-e8c7add95c05

    Sorry, old picture was with me trying to remove the max-width rule, which worked better, but would cause issues on long topic titles (by putting everything onto a third line in the header).



  • @ChaosTheEternal how's it look now?



  • @ben_lubar A lot better with the buttons more condensed. That should help with the wrapping bar issue in general too.



  • @ben_lubar Just noticed, it looks like the search button still needs tweaking. It overlaps the notification button.

    media (max-width:1199px)
    #search-form {
        padding: 0;
        margin-right:0;
    }
    media (max-width:1199px)
    #search-form #search-button {
        padding-left:4px;
        padding-right:4px;
    }
    #search-form #search-button.hidden {
        border:0;
    }
    

    Looks like those will fix it, and make the search button size consistent with the rest of the header buttons.


  • Winner of the 2016 Presidential Election

    @ChaosTheEternal If you mean that I can click the "invisible" search button while the search form is open to reopen that form... then you didn't fix it.

    Filed Under: Just saying



  • @Kuro I'm able to do that on the full width styling as well. It's a fairly narrow strip in both cases.

    When I get more time, I'll see if there's something to tweak in there. Hard to look into when it auto-closes as soon as it loses focus.

    Gave it a look. The strip is because of the border on the button, so I corrected my CSS above to account for that (as well as correct it to only apply for the narrower desktop mode).


  • Notification Spam Recipient

    Interesting. When I'm halfway between fully-mobile layout and normal desktop layout, the title bar fix doesn't apply.
    It also doesn't apply in full-mobile either, but meh.
    0_1458755691059_upload-fba44925-55b3-478f-878c-8cc0a94fea0e

    Edit: It's like I'm in Phablet mode! Not a phone, not a tablet!


  • FoxDev

    @Tsaukpaetra said:

    When I'm halfway between fully-mobile layout and normal desktop layout, the title bar fix doesn't apply.

    Yep; there's a @media query that hides the title bit below a width of 992px


  • Notification Spam Recipient

    @RaceProUK said:

    Yep; there's a @media query that hides the title bit below a width of 992px

    Huh. TMYK.

    Also, saw a for a second that turned into a checkmark, which then disappeared. Anyone know what that's about?
    Edit: And can someone fix the min-heigh of the composer editor thing? Fscking annoying!


  • Winner of the 2016 Presidential Election

    @Tsaukpaetra
    That spinner -> checkmark thing indicates that the server took some time.

    Filed Under: If you want to see it for an extended period of time, ask @ben_lubar to run some Drawf-Fortress simulations on the server :P

    Addendum: The min-height issue is adressed in the stylish posted at the top, I think...


  • Notification Spam Recipient

    @Kuro said:

    The min-height issue is adressed in the stylish posted at the top, I think...

    I wouldn't mind too much if the actual composer window was able to be made that smallshort, just that the container it's in doesn't know the proper height it should be.

    I can't install Stylish on this machine for some reason (I think InfoSec is blocking the app store servers now) so I can't test any of these things....



  • @Kuro said:

    @Tsaukpaetra
    That spinner -> checkmark thing indicates that the server took some time.

    Actually, that means you lost connection to the server. In this case, it was because I installed updates. I mentioned on IRC that I wondered if anyone would notice, but I guess only the people not on IRC noticed.


  • Winner of the 2016 Presidential Election

    @ben_lubar said:

    In this case, it was because I installed updates

    So where is the official update and version topic?

    Filed Under: Don't be a @Jeff


    Also:

    add

    /* Disappearing composer is annoying! */
     div.composer .write-preview-container{
     min-height:inherit !important;             
     }
    

    To the default css, pls. (can probably also be 0, I assume)


  • Notification Spam Recipient

    @ben_lubar said:

    only the people not on IRC are on the forums

    FTFC


  • Discourse touched me in a no-no place

    Request: screenshots when people post CSS tweaks.


  • Winner of the 2016 Presidential Election

    I didn't like whatever @ben_lubar did to the "There are X new posts / topics" popup, so I banished it to the bottom where it wouldn't bother me.
    Then I stopped noticing it, so I applied some animation.

    @keyframes pulsating-new-topics-alert{
        0% { background-color:#375a7f; box-shadow: 0px 0px 0px #FFF; }
        10% { background-color:#779abf; box-shadow: 0px 0px 10px #FFF; }
        100% { background-color:#375a7f; box-shadow: 0px 0px 0px #FFF; }
    }
    
    /* Ban the new-topic banner to the taskbar. */
    #new-topics-alert{
        position:absolute;
    	bottom:5px;
        z-index: 1300;
        animation-name: pulsating-new-topics-alert;
        animation-duration:2s;
        animation-iteration-count:infinite;
    }
    

    Filed Under: No screenshot due to animation


  • Trolleybus Mechanic

    Sept 11th was "Over a year ago".

    OR WAS IT?

    .timeago
    {
        font-size:0.75em;
    }
    .timeago:after
    {
      content:")";
    }
    .timeago:before
    {
        content:attr(title) "("
    }
    

    http://i.imgur.com/ZurRfQN.png


  • Discourse touched me in a no-no place

    Or for just the timestamp...

    .timeago:before
    {
        font-size:12px;
        content:attr(title);
    }
    .timeago {
        font-size:0px;
        text-decoration: none;
    }
    

    0_1458763266873_upload-c195c211-f9b8-42a4-af3e-5c235f90aaae



  • Noticed many people have complained about how faint the lines between posts are on here, so I took a look. Turns out that the <hr>s being used have their border-style set to none, so no matter what you do, they will almost certainly be very hard to see. Fixed that with:

    hr {
        border-style: inset;
    }
    

    And viola:

    0_1458764263419_upload-6be09500-8d94-485a-a94f-0134133d8ab9


  • FoxDev

    @abarker said:

    Turns out that the <hr>s being used have their border-style set to none

    border-top is overridden to a single pixel solid line, though the colour is #eee, which may as well be white.
    This should work:

    hr {
        border-top: 3px solid #7f7f7f;
    }
    


  • @RaceProUK said:

    border-top isAll borders are overridden to a single pixel solid line, though the colour is #eee, which may as well be white.
    This should work:

    Nope. Here's a sample of what that gives you:

    0_1458764875316_upload-9b05749c-25de-41c6-b107-bf9dc6d989d2

    That first <hr> is at #bdbdbd (not sure where that came from), the second one hangs onto the #5397ab "attention grabbing" color from when your post was streamed in, and the third has the #7f7f7f your style specified.

    Contrast that with the CSS I posted:

    0_1458765230273_upload-4267ff09-dff4-45b6-ad15-2b0e6d2d8f80

    The color of the <hr>s is more consistent, and the custom styling doesn't seem to interfere with the client-side changes that occur to grab your attention.

    I went with the CSS I id because most browsers default to displaying <hr>s with border-style: inset, and the style for the themes appears to be border-style: none. Changing it to border-style: inset works and it's simple.


  • FoxDev

    @abarker This is the default CSS rule:
    0_1458765640424_upload-bd9c3e78-08b5-45bc-bd2c-35ed89fd4c88
    As you can see, only border-top is overridden. And yes, that is from one of the between-post <hr>s.


  • Winner of the 2016 Presidential Election

    @RaceProUK Have you tried adding !important

    Filed Under: :trollface:


  • :belt_onion:

    @ben_lubar said:

    @Kuro said:

    @Tsaukpaetra
    That spinner -> checkmark thing indicates that the server took some time.

    Actually, that means you lost connection to the server. In this case, it was because I installed updates. I mentioned on IRC that I wondered if anyone would notice, but I guess only the people not on IRC noticed.

    Which... is actually kinda nice, since NodeBB is one of those "always connected" forums. Unlike Discourse, which would just randomly drop connection with no user notification...


  • Winner of the 2016 Presidential Election

    With some help from @RaceProUK :

    I don't need the counter on the unread-icon at the top. It goes up way too high way too fast and doesn't convey any meaningfull stuff that the color of the links doesn't already give away.
    You can remove the red counter by adding

    .unread-count.fa-inbox::after{
    display:none !important;
    }
    

    Filed Under: No Screenshot because it's seriously the same as if you had no unread topics

    addendum: adding !important just to mess with @RaceProUK

    Addendum2: Fixed the CSS to only block out the counter on the inbox!



  • @RaceProUK Yes, that's the default rule ... if you use the default skin. The beauty of my style vs. yours is that mine works the same with other skins as it does with the default skin. Can you say the same for yours?


  • FoxDev

    @abarker There are other themes? 🚎


  • 🚽 Regular

    Here is what I have done for block quotes and mentions:

    /* Add border around blockquote text */
    blockquote {
        border: 2px solid #4e5d6c;
        border-left: 8px solid #4e5d6c;
    }
    
    /* Make text size in block quotes larger and italicized */
    blockquote p:last-child {
        font-size: 14px;
        font-style: italic;
    }
    

    Mentions:

    /* Change mentions formatting */
    a.plugin-mentions-a {
        text-decoration: none;
        padding: 0.2em;
        font-weight: bold;
        color: #df691a
    }
    

    Basically added a thicker border around the block quotes, and edited mentions to something slightly easier to distinguish, yet doesn't look odd or misplaced (especially in topic lists).
    The colors were done with the Superman theme in mind, so YMMV.
    Here is the preview:
    http://i.imgur.com/OY40ZRC.png



  • The little status circle that sits over avatars is distracting, and it doesn't give me information I care about.

    .status {
        display: none; 
    }
    

    0_1458828376900_Capture.PNG


  • Trolleybus Mechanic

    Let's fix blockquotes!

    Make them stand out with some shading.

    blockquote
    {
     background-color:#F6F6F6 !important;
     border:1px solid #e6e6e6 !important;
    }
    

    And speaking of quotes, fuck you NodeBB for assuming I don't want to see nested quotes. The last thing I need is more information hidden behind annoying UX I don't want.

    /* N-level deep quotes show */
    .topic .posts .content > blockquote > blockquote > *:not(.blockquote)
    {
        display:block !important;
    }
    
    .topic .posts .content blockquote i.fa.pointer.toggle
    {
        display:none !important;
    }
    

    http://i.imgur.com/OR5Kwr0.png


  • Trolleybus Mechanic

    Next up, Fuck You Whitey Whitespace.

    I need borders around posts. Otherwise with all the whitespace and inconsistent fontsize and spacing, I literally can't tell where one post ends and the other begins without paying a lot of attention.

    OMFG borders what a brand new and innovative concept!

    This also effects topic lists. Add a border so it isn't just a glob of text. Especially confusing is that thin color-changing line that runs down the side. I know it is supposed to be a category indicator, but it just looks like a borken lifeline of some sorts. So it just looks like broken UI and that everything should be connected. Added borders, and increased the thickness of that line so that it is the same size as avatar images.

    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;
    }
    

    http://i.imgur.com/Xi8SOj4.png

    http://i.imgur.com/QmXahCz.png


  • kills Dumbledore

    @Lorne-Kates That looks awful.

    IMO, YMMV HTH etc.


  • Trolleybus Mechanic

    Inputs MUST have borders. Text floating in a sea of whitespace with no UX indicators is not acceptable at all. Ever.

    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;
    
    }
    

    http://i.imgur.com/4az5YLI.png


  • Trolleybus Mechanic

    @Jaloopa said:

    @Lorne-Kates That looks awful.

    IMO, YMMV HTH etc.

    You look awful.

    Feel free to do border collapse. Or don't do rounded borders except on the first and last elements in the list. But I can now tell where one message ends and the other begins.

    Edit:

    ul.posts>li, ul.topic-list>li
    {
        border: 1px solid #6b6b6b !important;
        padding:0.25em;
        border-bottom:none !important;
    }
    
    ul.posts>li:first-child
    {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    ul.posts>li:last-child
    {
        border-bottom:2px solid #6b6b6b !important;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    

  • kills Dumbledore

    @Lorne-Kates said:

    You look awful.

    Aww, you noticed. I did it especially for you



  • @Erufael said:

    Here is what I have done for block quotes

    Hmm, that's not bad. I came up with this for the quotes before I saw yours:

    blockquote {
        background-color: rgba(220,220,220,0.4);
    }
    

    0_1458845034479_upload-3a2054f4-c3a5-4317-8102-710c6e392cbd

    As the shot shows, each nested quote will have a progressively darker background than the last, though it shouldn't get darker than the blend color of rgb(220,220,200) - about #ddd.

    @Lorne-Kates said:

    I need borders around posts. Otherwise with all the whitespace and inconsistent fontsize and spacing, I literally can't tell where one post ends and the other begins without paying a lot of attention.

    So the method that @RaceProUK and I discussed (starting here) wasn't enough for you? You had to put ugly ass borders all the way around the posts? Well, at least it only affects you.


  • 🚽 Regular

    @abarker Ooo, not bad. I kinda like the background thing. But then, themes.



  • I still don't think the thin blue line is sufficient to highlight a post, so I added this.

    .topic .posts>li.highlight{animation-duration:8s;animation-name:highlightfade}
    @keyframes highlightfade{0%{background-color:rgba(255,255,0,.3)}40%{background-color:rgba(255,255,0,.3)}}
    

    I originally was trying to use a transition, but the .highlight class lasts a really long time now (because people were complaining about it being too short), so I ended up just using an animation instead. After 3.2 seconds the yellow background color starts fading out to nothing.

    No clue how well it'll play with themes, but I went ahead and changed my original code from fully-opaque pale yellow to pure yellow with only 30% opacity, so your theme will provide the other 70% of the background color. With a white background, it produces about the same shade of pale yellow as I had before.


Log in to reply