Skip to content

Threaded post support for NodeBB

Let's Build It
146 5 116.5k 1
  • wrote on last edited by DownPW
    #58

    nope

    Sorry I was on my way back from work @phenomlab

    So in fact I’m already going to try adding .threaded to the CSS code.

    When I activate Thread mode, everything is OK however when I deactivate Thread mode, certain classes remain and are not deleted

    For example here, without Thread mode, the background is not returned to vanilla and the same thing for the border-radius :

    0a214db5-6435-49dc-b04d-52842ba0b28d-image.png

  • nope

    Sorry I was on my way back from work @phenomlab

    So in fact I’m already going to try adding .threaded to the CSS code.

    When I activate Thread mode, everything is OK however when I deactivate Thread mode, certain classes remain and are not deleted

    For example here, without Thread mode, the background is not returned to vanilla and the same thing for the border-radius :

    0a214db5-6435-49dc-b04d-52842ba0b28d-image.png

    wrote on last edited by
    #59

    @DownPW For clarity, I didn’t change all of the classes - only the two you posted last

    Threading off

    fe3562db-edee-4f63-a8aa-1eb59c1279ea-image.png

    Threading on

    a92e0031-cf0c-416e-a1f7-53a6cb3a6631-image.png

  • wrote on last edited by DownPW
    #60

    yep but these 2 class have problem, on your screens, with Threading Off, background color use –bs-body-navbar and not –bs-body-bg.
    And if you seen topi event is not transparent like vanilla

  • yep but these 2 class have problem, on your screens, with Threading Off, background color use –bs-body-navbar and not –bs-body-bg.
    And if you seen topi event is not transparent like vanilla

    wrote on last edited by phenomlab
    #61

    @DownPW That should make no difference?

    Just remove it from the class

    .page-topic .topic .posts.timeline .timeline-event, .page-topic .topic .posts.timeline > [component="post/placeholder"], .page-topic .topic .posts.timeline > [component=post] {
        border-left: none;
        transition: transform 0.3s ease !important;
        background: var(--bs-body-bg);
        /* background: var(--bs-body-navbar); */
        border-radius: var(--bs-border-radius);
    }
    

    9871c5b3-1b9b-415b-b848-0f663341fc09-image.png

  • wrote on last edited by DownPW
    #62

    that makes all the difference 🙂

    Vanilla is like this:

    image.png

  • yep but these 2 class have problem, on your screens, with Threading Off, background color use –bs-body-navbar and not –bs-body-bg.
    And if you seen topi event is not transparent like vanilla

    wrote on last edited by
    #63

    @DownPW said in Threading support for NodeBB:

    And if you seen topi event is not transparent like vanilla

    It is for me

    6d89cea9-6311-48d1-8eea-07b7b827eafd-image.png

  • wrote on last edited by
    #64

    nope for me

    image.png

  • wrote on last edited by DownPW
    #65

    no return to vanilla background

    blink2.gif

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

  • no return to vanilla background

    blink2.gif

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    wrote on last edited by
    #66

    @DownPW Because your CSS has not been altered dude.

    ebe21e6c-5409-498f-a5dd-605403c52622-image.png

    Try now. It works for me?

  • wrote on last edited by DownPW
    #67

    I have not the same result :

    image.png

    I have bs-body-bg with thread ON

  • I have not the same result :

    image.png

    I have bs-body-bg with thread ON

    wrote on last edited by
    #68

    @DownPW Isn’t that correct, or do you want --bs-body-navbar ?

  • no return to vanilla background

    blink2.gif

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    wrote on last edited by
    #69

    @DownPW said in Threading support for NodeBB:

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

  • @DownPW said in Threading support for NodeBB:

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    wrote on last edited by
    #70

    @DownPW Right. Hold on.

  • wrote on last edited by DownPW
    #71

    or maybe for each modification this must be specified twice ?

    THREAD OFF

    /* Start of threaded CSS rules */
    .page-topic .topic .posts.timeline .timeline-event,
    .page-topic .topic .posts.timeline > [component="post/placeholder"],
    .page-topic .topic .posts.timeline > [component="post"] {
      border-left: none;
      transition: transform 0.3s ease !important;
      background: var(--bs-body-bg);
      /* background: var(--bs-body-navbar); */
      border-radius: var(--bs-border-radius);
    }
    

    THREAD ON

    /* Start of threaded CSS rules */
    .page-topic .topic .posts.timeline .timeline-event,
    .page-topic .topic .posts.timeline > [component="post/placeholder"],
    .page-topic .topic .posts.timeline > [component="post"].threaded {
      border-left: none;
      transition: transform 0.3s ease !important;
      /* background: var(--bs-body-bg); */
      background: var(--bs-body-navbar);
      border-radius: var(--bs-border-radius);
    }
    

    Same things for other modif like border radius

  • or maybe for each modification this must be specified twice ?

    THREAD OFF

    /* Start of threaded CSS rules */
    .page-topic .topic .posts.timeline .timeline-event,
    .page-topic .topic .posts.timeline > [component="post/placeholder"],
    .page-topic .topic .posts.timeline > [component="post"] {
      border-left: none;
      transition: transform 0.3s ease !important;
      background: var(--bs-body-bg);
      /* background: var(--bs-body-navbar); */
      border-radius: var(--bs-border-radius);
    }
    

    THREAD ON

    /* Start of threaded CSS rules */
    .page-topic .topic .posts.timeline .timeline-event,
    .page-topic .topic .posts.timeline > [component="post/placeholder"],
    .page-topic .topic .posts.timeline > [component="post"].threaded {
      border-left: none;
      transition: transform 0.3s ease !important;
      /* background: var(--bs-body-bg); */
      background: var(--bs-body-navbar);
      border-radius: var(--bs-border-radius);
    }
    

    Same things for other modif like border radius

    wrote on last edited by
    #72

    @DownPW Try now.

  • wrote on last edited by
    #73

    🙂

    One or 2 classes are missing in Thread ON mode but this is the logic I want.

    What have you done that I can understand and modify?

  • 🙂

    One or 2 classes are missing in Thread ON mode but this is the logic I want.

    What have you done that I can understand and modify?

    wrote on last edited by
    #74

    @DownPW Good…

    Added

      li.pt-4.threaded {
        background: var(--bs-body-navbar) !important;
    }
    

    Modified

      .page-topic .topic .posts.timeline .timeline-event,
      .page-topic .topic .posts.timeline > [component="post/placeholder"],
      .page-topic .topic .posts.timeline > [component="post"] {
        border-left: none;
        transition: transform 0.3s ease !important;
        background: var(--bs-body-bg); 
        border-radius: var(--bs-border-radius);
      }
    
  • wrote on last edited by DownPW
    #75

    hmm Ok
    For once I don’t understand the logic 🙂

    Just one thing I have added befor one Thread ON mode :

    image.png
    image.png

  • hmm Ok
    For once I don’t understand the logic 🙂

    Just one thing I have added befor one Thread ON mode :

    image.png
    image.png

    wrote on last edited by
    #76

    @DownPW Caching issue I think. Seems to work ok for me

    Threading On

    00542631-8e3c-4ca7-b7ec-bb851a883bdb-image.png

    Threading Off

    f82a0eba-8361-4900-93e1-2af05e3b33a3-image.png

  • wrote on last edited by DownPW
    #77

    Hmm problem, incognito mode and on your screen = not thread mode with Threadinf ON 🙂 (see my last self post/last post)

    And I see this rest of thread ON border-radius on vanilla :

    image.png

    Seem very hard to understand


Related Topics
  • NodeBB Twitter / X embeds

    Let's Build It twitter script
    34
    21 Votes
    34 Posts
    16k Views
    DownPW
    @phenomlab said: @DownPW thanks for spotting (and fixing) this issue. I admittedly threw this together quickly for @jac some time ago, and it hasn’t had any love since. If OK with you, I’ll merge these changes into the github repository? No problem dude
  • Material View Support for Stock NodeBB

    Unsolved Let's Build It material view javascript css
    51
    4
    15 Votes
    51 Posts
    27k Views
    DownPW
    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS
  • Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    6k Views
    phenomlab
    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them. More importantly, if you reload the site, you’ll notice that the ranks are now icons. I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.
  • Why CSS acts different in Desktop?

    Bugs nodebb
    11
    4 Votes
    11 Posts
    4k Views
    phenomlab
    @DownPW I’d have to agree with that.
  • Setup OGProxy for use in NodeBB

    Moved Let's Build It ogproxy opengraph npm node
    110
    2
    21 Votes
    110 Posts
    55k Views
    phenomlab
    @crazycells said in Setup OGProxy for use in NodeBB: are they cached for each user separately? No. It’s a shared cache @crazycells said in Setup OGProxy for use in NodeBB: additionally, this is also handling youtube videos etc, right? No. This is handled by nodebb-plugin-ns-embed
  • Title on homepage of nodebb forum

    Solved Customisation nodebb
    2
    1 Votes
    2 Posts
    2k Views
    phenomlab
    @eveh Welcome board The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; } Note, that you will need to adjust your CSS code to suit your own site / requirements.
  • Nodebb Hashtag plugin

    Solved General
    15
    1 Votes
    15 Posts
    6k Views
    phenomlab
    @jac Great ! I’ll close this off.
  • NodeBB vs Discourse

    Chitchat nodebb discourse board
    25
    6 Votes
    25 Posts
    14k Views
    RiekMedia
    @phenomlab said in NodeBB vs Discourse: Hetzner eh ? I use them also. In fact, Sudonix is hosted in Nuremberg yes i’m also at hetzner, i have been a customer there for years with a reseller account for domains. My VPS that I host there are also in Nuremberg