Skip to content

Target the posts counter in categories using CSS and jQuery

Let's Build It
  • For those who have delved as deep into styling NodeBB as I have, this is for you 🙂

    It’s relatively easy to achieve this look when a topic is updated (note the different coloured posts card)

    84655243-fa6c-4007-9588-944e4a4800e1-image.png

    Here, we simply target the below class

    body:not(.user-guest) li.unread .stats-postcount
    

    However, it’s not so simple an affair to achieve the same look in the category view as the two DIVs are identical and have no unique classes

    c4ee50a6-5f48-4cd3-a103-3a15cb9c6461-image.png

    0fe2c02c-1b7d-451c-a3c4-bbcb7ce21115-image.png

    To work around this, we can use a very simple function that adds an ID to the “posts” DIV as shown below (this is placed in /admin/appearance/customise#custom-js)

    $(document).ready(function() {
            $(window).on('action:ajaxify.end', function(data) {
        // Select the div using its class
        $('.card.card-header.border-0.p-2.overflow-hidden.rounded-1.d-flex.flex-column.align-items-center').each(function() {
            // Check if the div contains the word "Posts"
            if ($(this).text().trim().includes("Posts")) {
                // Assign the id 'updated-posts' to the div
                $(this).attr('id', 'updated-posts');
            }
        });
    });
    });
    

    This code will first look for the classes .card.card-header.border-0.p-2.overflow-hidden.rounded-1.d-flex.flex-column.align-items-center in the DOM, and if there, it will add the ID of updated-posts, meaning you can then target with the same CSS you are using in the recent view. See below

    c4e1119b-89dd-4cc0-b433-862d83c73782-image.png

    You’ll see that the ID has been added as required, and this means we can now adjust the original CSS so it looks like the below

    body:not(.user-guest) li.unread .stats-postcount, body:not(.user-guest) .unread #updated-posts
    

    NOTE: body:not(.user-guest) is being used so that the effect is not being applied to those who are not logged in as that wouldn’t make any sense - your mileage here may vary though.

    6d1ea244-a15d-449f-b674-db9e7063f1b4-image.png

    Doesn’t that look better? For the life of me, I can’t understand why these two elements do not have ID’s set already, but there you go.

    Enjoy.

  • Very great 😉


Related Topics
  • 21 Votes
    110 Posts
    13k Views
    @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
  • Changing the look of recent cards

    Announcements
    1
    1
    2 Votes
    1 Posts
    314 Views
    No one has replied
  • New message CSS problem

    Unsolved Customisation
    11
    1
    2 Votes
    11 Posts
    870 Views
    @DownPW hi. Sorry for digging up an old post, but I’m going through items still unresolved and was looking to get an understanding of where you are currently with this?
  • [NodeBB] greeting message

    Solved Customisation
    2
    1
    3 Votes
    2 Posts
    705 Views
    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358
  • [NODEBB] Welcome Message

    Solved Customisation
    20
    2
    13 Votes
    20 Posts
    3k Views
    @DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system. I’ve not seen this issue myself but would like to see some examples of screenshots if possible.
  • About this category

    Pinned Let's Build It
    5
    2 Votes
    5 Posts
    604 Views
    I’m going to be adding some new posts to the labs category, and will use this going forward when writing code that could easily be adopted by others (a great example is the OGProxy, which I will move here). If you have any ideas of would like a walkthrough of how to set something up, then this is the place it should go.
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    1k Views
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.
  • CSS Help on my Flarum

    Solved Customisation
    5
    2
    2 Votes
    5 Posts
    677 Views
    @mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.