Skip to content

creating topic specific widgets

Solved Customisation
  • Hi @phenomlab ,

    I would like to add a count down widget with HTML. But I want to show this count down only when a related topic is opened… Let’s say topic id:1234

    Can you help me to customize the CSS code?

    Let’s say, I will give this element a custom class: showonlyinTopic1234 with HTML…

    showonlyinTopic1234 {
    display: none;
    }
    

    Then, what id or class should I use in CSS to show this in topic id 1234?

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

  • @crazycells This is in fact a bit more complex than it sounds from the outset. Essentially, what you’re asking for is that the widget will only fire when the topic ID is (for example) 1234. This can be done with JS but you’ll need to create a listener that runs on each page load to ensure it executes properly.

    I can provide a very simple code example which shows how this will work if you’d like ?

  • @phenomlab said in creating topic specific widgets:

    I can provide a very simple code example which shows how this will work if you’d like ?

    Yes, please. A simple example would be great.

  • @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 💗

Related Topics
  • 3 Votes
    12 Posts
    272 Views

    @crazycells ah, I see. That makes sense.

  • Upgrade issues

    Solved Configure
    2
    2 Votes
    2 Posts
    141 Views

    Use this code

    git fetch # Grab the latest code from the NodeBB repository git checkout v3.x git reset --hard origin/v3.x

    And you will have the latest version without specifying it

    https://docs.nodebb.org/configuring/upgrade/

  • 2 Votes
    18 Posts
    508 Views

    @Panda You’ll need to do that with js. With some quick CSS changes, it looks like this

    d619844f-fbfe-4cf1-a283-6b7364f6bf18-image.png

    The colour choice is still really hard on the eye, but at least you can now read the text

  • 2 Votes
    26 Posts
    1k Views

    @Panda said in Interesting Widget code, but can’t fetch API:

    How did you drop that widget into the post there?
    I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already?

    Yes, here

    https://sudonix.org/topic/414/corporate-bullshit-generator?_=1687774393044

    It’s not a “post” or “topic” in the common sense. It is actually a page in it’s own right and leverages nodebb-plugin-custom-pages. This in turn creates a new “route” which behaves like a page, meaning it is then exposed for widgets.

    @Panda said in Interesting Widget code, but can’t fetch API:

    Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that?

    By this, I mean create all the required code in an external JS file that is reachable by the NodeBB instance - so, in “public” for example - or in my case /public/js. The widget then “calls” that file and because it runs outside of the scope of NodeBB, you just need to return the values to the widget.

    Hope this makes sense?

  • 11 Votes
    47 Posts
    3k Views

    @DownPW Seems fine.

  • 36 Votes
    55 Posts
    4k Views

    @DownPW I see why. The code relies on the existence of

    [component="topic/quickreply/container"]

    However, this by definition means that the below has to be enabled

    aeef638f-4188-489d-a9f2-f3a26dbca9d8-image.png

    It will then work

    7fb38631-e0f3-46ef-b652-00929d927b13-image.png

    For some unknown reason, this is hidden in Harmony, and only shows if you select it. In v2, it seems that the <section> is deleted altogether in Persona if “Quick Reply” is disabled, meaning it won’t fire as it can’t locate that specific component.

    The downside is that you might not want the quick reply function, but I think it’s a PITA to scroll up to the top of the post just to reply, so I have it on 🙂

  • 0 Votes
    5 Posts
    402 Views

    @qwinter this particular site uses the code I wrote if you want to see it in action. It’s a information and intelligence gatherer I designed for collecting various information security articles from around the globe and consolidating them in one place.

    Essentially, each “post” is in fact generated by the script, and the NodeBB API.

    https://hostrisk.com/

  • Avatar on Topic Header

    Solved Customisation
    9
    0 Votes
    9 Posts
    537 Views

    @jac said in Avatar on Topic Header:

    @downpw said in Avatar on Topic Header:

    Great Plugin 🙂

    I make it a bit cleaner via this CSS code:

    /*------------------------------------------------------------------*/ /*---------------- nodebb-plugin-browsing-users -----------------*/ /*------------------------------------------------------------------*/ /*Space between the avatar and the RSS icon */ .topic [component="topic/browsing-users"] { margin-bottom: -5px; padding-left: 10px; } /*Space between avatars*/ .pull-left { float: left!important; padding-right: 5px; }

    Do you have a screenshot of how this looks with the CSS change?

    Just added this change, thanks @DownPW 🙂