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)
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
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 'catpost' 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
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.
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.