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💗

  • Upgrade issues

    Solved Configure
    2
    2 Votes
    2 Posts
    131 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
    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?

  • Link vs Refresh

    Solved Customisation
    20
    8 Votes
    20 Posts
    923 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

  • 13 Votes
    21 Posts
    2k Views

    @pobojmoks that’s easily done by modifying the code provided here so that it targets background rather than border

    In essence, the below should work

    $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $('.recent-card-container').each(function(i) { var dataId = $(this).attr("data-cid"); var color = $('[role="presentation"]', this).css("background-color"); console.log("data-cid " + dataId + " is " + color); $('[data-cid="' + dataId + '"] .recent-card').attr("style", "background-color: " + color); }); }); });
  • Fontawesome 5

    Unsolved Customisation
    14
    1 Votes
    14 Posts
    671 Views

    @pwsincd hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?

  • Display tweets in widget [NodeBB]

    Solved Customisation
    29
    4 Votes
    29 Posts
    2k Views

    @phenomlab brilliant, many thanks Mark 😁

  • 9 Votes
    47 Posts
    4k Views

    @phenomlab said in RSS parser script [NodeBB]:

    @jac Not yet. Sorry. Have some other work commitments I need to prioritise. Hoping to get to this over the weekend.

    No worries at all mate, thanks 👍🏻

  • WordPress & NodeBB

    Solved WordPress
    6
    0 Votes
    6 Posts
    511 Views

    @jac That won’t matter. You just redirect at nginx or apache level and it’ll work. The generally accepted standard though is to use a subdomain.