Skip to content

Threaded post support for NodeBB

Let's Build It
146 5 111.1k 1
  • 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

    @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

  • 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

    @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

  • 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

    @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

  • nope for me

    image.png

  • 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

    @DownPW Because your CSS has not been altered dude.

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

    Try now. It works for me?

  • 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

    @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

    @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

    @DownPW Right. Hold on.

  • 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

    @DownPW Try now.

  • 🙂

    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?

    @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);
      }
    
  • 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

    @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

  • 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
  • Custom Page - nodebb

    Solved Customisation custom-pages nodebb
    13
    2
    5 Votes
    13 Posts
    3k Views
    I’m happy to see this
  • What’s going on with NodeBB?

    Performance nodebb script die
    20
    8 Votes
    20 Posts
    5k Views
    @cagatay The most reliable way to upgrade Node.js on Ubuntu depends on how you originally installed it. Method 1: Using NVM (Recommended) If you already use Node Version Manager (NVM), upgrading is simple. NVM allows you to keep both versions and switch between them if needed. Install Node 22: nvm install 22 Switch to Node 22: nvm use 22 Set it as your default: nvm alias default 22 Verify the change: node -v Method 2: Using NodeSource (PPA) If you installed Node.js via apt using the NodeSource repository, you need to update the repository script to point to the new version. Remove the old NodeSource list (optional but cleaner): sudo rm /etc/apt/sources.list.d/nodesource.list Download and run the NodeSource setup script for Node 22: curl -fsSL [https://deb.nodesource.com/setup_22.x](https://deb.nodesource.com/setup_22.x) | sudo -E bash - Install/Upgrade Node.js: sudo apt-get install -y nodejs Verify the installation: node -v Method 3: Using the ‘n’ Package If you have npm installed, you can use the n interactive manager. Clear the npm cache: sudo npm cache clean -f Install the ‘n’ helper: sudo npm install -g n Install Node 22: sudo n 22 Update your shell: hash -r Troubleshooting Permission Denied: If you see permission errors using Method 2 or 3, ensure you are using sudo. Path Issues: If node -v still shows version 20 after upgrading via NVM, restart your terminal or run source ~/.bashrc. Conflicts: Avoid mixing these methods. If you switch from apt to nvm, it is best to sudo apt remove nodejs first to avoid path conflicts.
  • 3 Votes
    2 Posts
    2k Views
    Very great
  • 5 Votes
    3 Posts
    3k Views
    Very good like always
  • Threaded chat support for NodeBB

    Let's Build It threaded chat code
    35
    1
    19 Votes
    35 Posts
    15k Views
    @DownPW said in Threaded chat support for NodeBB: Better like this : add shadow and border-left on self answer Of course - you style to your own requirements and taste I’ll commit that CSS we discussed yesterday also
  • 11 Votes
    14 Posts
    6k Views
    @dave1904 excellent news. Thanks for the feedback
  • Link vs Refresh

    Solved Customisation nodebb blog customization
    20
    2
    8 Votes
    20 Posts
    6k Views
    @pobojmoks Do you see any errors being reported in the console ? At first guess (without seeing the actual code or the site itself), I’d say that this is AJAX callback related
  • [NodeBB] username cards

    Solved Customisation nodebb
    8
    5 Votes
    8 Posts
    3k Views
    @phenomlab Aha…nice to know. As always thank you for the reply and information.