Skip to content

creating topic specific widgets

Solved Customisation
  • @crazycells Ok, here goes

    • In your ACP, go to Appearance->Custom Content->Custom Javascript

    Add this code, changing “224” to the actual ID you want to target ⚠

        $(document).ready(function(){
        $(window).on('action:ajaxify.end', function (data) {
            var thisid = $('#topic_id').val();
            if(thisid == 224 // Change this value to the topic ID you want to target ) {
               $("#thiswidget").removeClass("hidden");
               $("#thiswidget").addClass("show");
            }
            else {
                // Nothing to do here
            }
        });
        });
    

    Ensure you have enabled both of these

    19abeade-8619-4cee-8347-860b26e09813-image.png

    Save

    • In the ACP, go to Appearance->Custom CSS/LESS
    • Add new CSS classes as below at the top of the window
    .hidden {
    display: none;
    }
    .show {
    display: block !important;
    }
    
    • In the ACP, go to Extend->Widgets.
    • Choose topic.tpl from the widget target selection
    • Create a new HTML widget and drag this into the Topic Footer section (or wherever you want it to appear)

    Paste this code inside the HTML area

    <input type="hidden" id="topic_id" name="topic_id" value="{tid}">
    <div class="hidden" id="thiswidget">This text should only appear if the ID matches</div> 
    
    • Save the widget layout, and now reload the site.
    • Select the topic you are specifically targeting, and open it

    If all went according to plan, you should see the below text appended at the bottom of the screen just before any other widget you may have in that area

    8bb053be-82f5-48bb-bc61-d6399b6c4ca3-image.png

    What have we done here ?

    Essentially, we have injected two new lines of code into the topic stream using the topic widget

    2d2b03a7-205f-436c-87e4-0f667b0a58bb-image.png

    We set a class of hidden so that the widget won’t display unless there is a match to the ID we are targeting

    Then, this jQuery code looks for the ID we want, and if there is a match, it removes the hidden class and replaces it with show meaning it will display

    170b5593-3b65-4b89-a4d4-d99e68fc64c8-image.png

    Adding hidden input fields into the HTML stream and then using jQuery to obtain the value is an old trick, but very reliable, and low in terms of performance needs. You may wonder where the {tid} value comes in ? This is from the API itself - more detail here

    Basically, this part

    02d6974e-311d-4175-8237-cb85785a8e1a-image.png

    Final parts

    Obviously, you’ll want to fashion the widget to present to your tastes - this is fine, but don’t delete anything here other than
    This text should only appear if the ID matches
    inside the code block 😃

    Hope this helps.

  • @phenomlab thanks a lot.

  • @phenomlab what does this do?

    <input type="hidden" id="topic_id" name="topic_id" value="{tid}">

    this is creating an input button inside HTML widget. I replaced the tid value with 2213 for the topic id…

  • @crazycells that creates a hidden input field which is required for the jQuery script to collect the topic id. Don’t modify this otherwise the script won’t work 😮

  • @phenomlab said in creating topic specific widgets:

    @crazycells that creates a hidden input field which is required for the jQuery script to collect the topic id. Don’t modify this otherwise the script won’t work 😮

    do other “hidden” or “show” classes custom? sorry, I am confused since I thought those were custom classes… we do not use “hide” class but it is in the CSS… Is it a default class in NodeBB?

  • @crazycells hide is a class in the CSS of NodeBB, so yes, you can use that. However, you shouldn’t mix that up with type="hidden" as this is HTML code and not CSS.

  • @phenomlab said in creating topic specific widgets:

    @crazycells hide is a class in the CSS of NodeBB, so yes, you can use that. However, you shouldn’t mix that up with type="hidden" as this is HTML code and not CSS.

    Thanks for the clarification.

    What about the class="hidden" in div section ?

  • @crazycells You need that part, yes 🙂 The jQuery class gets toggled, and if that does not exist as a class, then the widget won’t be hidden which defeats the point.

  • phenomlabundefined phenomlab has marked this topic as solved on
  • @phenomlab said in creating topic specific widgets:

    @crazycells You need that part, yes 🙂 The jQuery class gets toggled, and if that does not exist as a class, then the widget won’t be hidden which defeats the point.

    Hi @phenomlab , unfortunately, I could not make it work… I am posting screenshots, maybe you can detect my mistake…

    Additionally, can you please let me know which classes are custom classes, I am still confused about this 😄 I prefer not to use simple words as custom classes since it might be confusing (we have lots of custom CSS in our forum) ? Additionally if hide class exists, why are we re-defining it?

    Screen Shot 2022-02-15 at 3.13.00 PM.png

    Screen Shot 2022-02-15 at 3.13.20 PM.png

    Screen Shot 2022-02-15 at 3.12.29 PM.png

  • @crazycells Odd. Can you PM me your site where this is running ? I’ll also need to create an admin account if ok with you ?

  • @crazycells as discussed, the reason why this didn’t work is that you have other JS functions that didn’t work correctly which were crashing and preventing the code o provided from running 😁

  • @phenomlab said in creating topic specific widgets:

    Save

    In the ACP, go to Appearance->Custom CSS /LESS
    Add new CSS classes as below at the top of the window

    .hide {
    display: none;
    }
    .show {
    display: block !important;
    }
    

    In the ACP, go to Extend->Widgets.
    Choose topic.tpl from the widget target selection
    Create a new HTML widget and drag this into the Topic Footer section (or wherever you want it to appear)

    Thanks a lot for your help @phenomlab . It is fixed and working… Just a quick note in case others want to use it… the above code should be as below:

    .hidden {
    display: none;
    }
    .show {
    display: block !important;
    }
    
    
  • @crazycells said in creating topic specific widgets:

    Additionally if hide class exists, why are we re-defining it?

    We’re not 🤭 I misspelled it - it should be hidden


Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation💗

  • 3 Votes
    12 Posts
    51 Views

    @crazycells ah, I see. That makes sense.

  • 2 Votes
    4 Posts
    170 Views

    @Panda said in Sidebar Widget is no longer on the side!:

    Ah, so sidebar wont work on mobile?

    Correct. If you review the docs on bootstrap, you’ll notice that it is designed on a grid system

    https://getbootstrap.com/docs/5.0/layout/grid/

    What I mean by changing the category is moving it on here to general as you posted it in bugs, when it isn’t.

  • Whitespace fixes in Nodebb

    Solved Customisation
    18
    7 Votes
    18 Posts
    761 Views

    @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.

  • NodeBB Theme/Skin Switcher

    Solved Customisation
    38
    7 Votes
    38 Posts
    2k Views

    @Teemberland great spot ! You should create a PR for that so they can include it in the official repository.

    Just be aware that any subsequent releases will overwrite your fix without the PR.

  • 3 Votes
    9 Posts
    388 Views

    The real issue here is that most people consider forums to be “dead” in the sense that nobody uses them anymore, and social media groups have taken their place. Their once dominant stance in the 90’s and early 00’s will never be experienced again, but having said that, there are a number of forums that did in fact survive the social media onslaught, and still enjoy a large user base.

    Forums tend to be niche. One that immediately sticks out is Reddit - despite looking like it was designed in the 80s, it still has an enormous user base. Another is Stack Overflow, which needs no introduction. The key to any forum is the content it offers, and the more people whom contribute in terms of posting , the more popular and widely respected it becomes as a reliable source of information.

    Forums are still intensely popular with gamers, alongside those that offer tips on hacking etc.

  • 3 Votes
    3 Posts
    238 Views

    @phenomlab thanks a lot, this combination works best 👍

    .posts-list .posts-list-item .content { overflow: auto; max-height: 600px; }
  • Display tweets in widget [NodeBB]

    Solved Customisation
    29
    4 Votes
    29 Posts
    2k Views

    @phenomlab brilliant, many thanks Mark 😁

  • 0 Votes
    3 Posts
    671 Views

    @phenomlab many thanks Mark 😁.