Skip to content

Custom badges

Solved Customisation
  • What is the best way/plugin to have custom badges like the twitter blue check mark?

    blue verified.png

    @phenomlab I see you have these colorful ones… which are quite close:

    Screen Shot 2022-11-16 at 11.54.02.png

  • @crazycells I expect the quickest way to do this will be using groups. I do something similar - I have a “verified” group, and once a new member starts engaging, they are added here so I know they are actually who they say they are.

    In terms of CSS, I use

    .group-label {
        margin-right: -12px;
        margin-top: 1px;
        width: 22px;
        height: 22px;
        border-radius: 11px;
        line-height: 21px;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        overflow: hidden;
    }
    small.label.group-label.inline-block i {
        margin-top: 1px;
        margin-left: 0px;
        vertical-align: middle;
        display: flex;
        justify-content: center;
    }
    

    It wouldn’t take much effort to get these to look like the blue Twitter check mark.

    As a point of interest (and convenience), Font Awesome has something extremely close

    59db89f5-2c7a-4052-8106-31264d7fa05f-image.png

    Sadly, it’s part of the PRO set, so unless you have a license, it’s not within reach

    1b9bde0a-1b83-41e5-a0ba-5b1131a68332-image.png

    However, I have a license, and could easily make a PNG out of this without too much effort for those who don’t (not cheap AT USD 99.00 per year).

    If you’d rather not use groups, you can use native CSS, but you are limited in terms of targets. For example, the author badge is easy because you can simply target the [itemprop="author"] class. However, posts from other users will not have this, and that’s where the groups come to the rescue.

    If any interest, I can put some code together to show you how this would work.

  • @phenomlab yes, actually, I am using the groups for badges already… it is very similar to the “ranks” you are using here, but rather than words, we went with “stars” , in our forum depending on your post count or upvote count you can get from 1 to 5 stars… and getting 1 star is quite work, because it requires minimum 500 posts or upvotes… for example…
    we have 5 stars max.
    Screen Shot 2022-11-16 at 14.29.38.png
    or another member with 2 stars…
    Screen Shot 2022-11-16 at 14.29.54.png

    I am still not clear on how to create this badge, but let me first try with CSS codes. I think something similar to a blue check should be enough for us. Unfortunately, we are using the free version of font awesome…

    I will get back to you after trying.

  • @crazycells no issues. Keep me posted. As a side note, would the stars on your forum look better with a transparent background rather than the blue?

  • @phenomlab said in Custom badges:

    @crazycells no issues. Keep me posted. As a side note, would the stars on your forum look better with a transparent background rather than the blue?

    this color comes from our logo… we have two colors in the logo, blue and red… so we are using this color and red color for all the badges, so it looks compatible with our general theme and most importantly it makes easier to spot the “stars”… this is kind of to encourage more people to contribute and get stars…

    gamification works 🙂

  • @phenomlab how can I target one specific group with CSS codes?
    With this CSS, other group badges turn into rounds as well.

  • Screen Shot 2022-11-17 at 13.28.34.png

    actually, it looks very good (quite acceptable for our case 🙂 ), thanks for the CSS codes; however CSS codes affect other group badges too…

    group name: verified

    how can I restrict CSS codes to this group? I checked the inspector, I can only see group links, but not specific names…

  • @phenomlab

    Thank you very much for the code.

    In my case, I would like to display the group labels after the user level label because as it is it’s not very nice

    Same for Author Badge

    6e43f17a-ed43-451c-b68f-4f3a5bc71078-image.png

  • @DownPW and @crazycells could you let me have URL’s where I can see examples of what you’ve posted?

  • @phenomlab Prod server

  • @DownPW Something like this?

    879aa7c9-5e97-4c5f-bb82-014524653254-image.png

    CSS modifications

    .topic-owner-post [itemprop="author"] {
        float: left;
    }
    // Add these to (or edit) the existing classes you have
    .user-level-topic {
        float: none;
    }
    .group-label {
        margin-top: -1px;
    }
    .topic-owner-post [itemprop="author"]:after {
        margin-top: 1px;
        height: 18px;
    }
    
  • @phenomlab

    yep but I have not the same result as you with this code :

    24bc3b0a-29a3-45f7-8e6b-bc72f6248bda-image.png

    The username is after the userlevel badge 😒

  • @DownPW Can you put the code back to what I provided? I see you are making changes

  • @DownPW Thanks. Seems I forgot this

    [itemprop="author"] {
        float: left;
    }
    

    And this which will fix the overlap on the reply label

    .topic [component="post/parent"] {
        margin-left: 15px;
    }
    
  • @phenomlab Ha yes very good thanks dude 😉 You’re the best always 😉

  • @crazycells Let’s try this

    In /forum/admin/manage/groups/verified, remove the highlighted section

    1c9e1406-d641-4e6c-8a03-e452c9462768-image.png

    We are then left with no text, but a clearer looking icon

    149c24c4-c95c-4a6e-8dc4-52340e4d0bed-image.png

    Now remove the previous CSS blocks I provided here

    Add replacement CSS

    .post-header a[href*="/forum/groups/verified"] {
        margin-right: 3px;
        margin-top: 1px;
        border-radius: 50%;
        line-height: 20px;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        overflow: hidden;
    }
    small.label.group-label.inline-block i {
        margin-top: 1px;
        margin-left: 0px;
        vertical-align: middle;
        justify-content: center;
        display: flex;
    }
    .post-header a[href*="/forum/groups/verified"] .group-label {
        min-width: 20px;
        display: flex;
        justify-content: center;
    }
    .group-label {
        vertical-align: -6px;
    }
    
    

    You should land up with something like this

    16a50d49-f765-46c9-a480-344a592baf13-image.png

    As you can see, this forces the stars out of alignment, but I don’t think this is too much of a sacrifice, and could be remediated with additional targeted CSS if need be.

    Essentially, because NodeBB doesn’t provide an id field (which would be a lot easier), we have to use wildcard CSS such as .post-header a[href*="/forum/groups/verified"] but make it targeted in the sense that it will only fire if it is part of the post stream, hence .post-header at the beginning.

    We then use .post-header a[href*="/forum/groups/verified"] .group-label to target the actual label (but only when we have a wildcard match in the CSS) meaning we can set a minimum width so that the circle doesn’t look quashed (we need to validate this on Firefox though as additional CSS might be required due to how the webkit engine will render this in contrast to mozilla).

    Finally, we use .group-label to force alignment in terms of height to prevent it wandering out of the inline-block.

    This is already active on your forum, so nothing for you to do but (hopefully) admire 🙂

    Let me know.

  • phenomlabundefined phenomlab referenced this topic on
  • @phenomlab

    Just one things my friend.

    I search a css class for display groupname on group icons mouse over but don’t find it.
    if you have that in your hat I’m a taker 😉

  • @DownPW Mmmmm, yes, the fastest way to do that would be to use the title attribute. Bootstrap has native support for that

    8e9af7a4-b69c-4573-93cb-72dce2d8bcf3-image.png

    If you added this attribute then hovered over the element, you’d see this

    4cd5440b-649f-4817-be85-08ff54a8859b-image.png

    It’s possible to write jQuery to handle this - aside from that, you’d need to hack into the post template which I wouldn’t recommend. There isn’t any native CSS that will do this for you sadly, so the title="" attribute is the best way forward but won’t do anything without custom JS.

    EDIT - I actually have a requirement for this myself, so will probably write some code to do it over the coming days/weeks (really depending on how much free time I have).


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
  • nodebb-plugin-custom-pages

    Solved Customisation
    5
    3 Votes
    5 Posts
    596 Views

    @DownPW it’s possible, yes, but you may inadvertently end up targeting other elements using the same class which of course isn’t desired.

    Can you provide a link in DM for me to review?

  • restarting nodebb on boot

    Unsolved Configure
    3
    1 Votes
    3 Posts
    284 Views

    @eeeee said in restarting nodebb on boot:

    can I just run nodebb under nodemon for auto restarts?

    It’s a better method. Nodemon just looks for file system changes and would effectively die if the server was rebooted meaning you’d have to start it again anyway. Systemd is the defacto standard which is how the operating system interacts in terms of services, scheduled tasks etc.

  • [NodeBB] Custom fields plugin

    Unsolved Customisation
    5
    0 Votes
    5 Posts
    882 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 ?

  • is "night mode" shifting the forum several pixels up?

    Solved Configure
    8
    4 Votes
    8 Posts
    614 Views

    @crazycells hmm. Good point. I actually use my own version of the dark mode plugin, so not entirely sure. However, I think the CSS is probably the same. I’m not at my PC currently but can check and advise later.

  • NodeBB 1.19.3

    Solved Performance
    33
    4 Votes
    33 Posts
    3k Views

    @phenomlab

    I find the problem Mark 😉

    The error message indicated this path :

    http://localhost:4567/assets/plugins/nodebb-plugin-emoji/emoji/styles.css?v=6983dobg16u

    I change the path url on config.json

    47bacc80-f141-41e4-a261-3f8d650cc6f6-image.png

    And all it’s good 🙂

    Weird, I didn’t have to change that path before 1.19.3

    But this does not prevent the problem from a clean install with Emoji Plugin

    EDIT: After test, that resolv the problem installation for 1.18.x but not for 1.19.x (I have other error message when I run ./nodebb Setup

    For resume: NodeJS 16_x with 1.18.x is ok

  • Social icon (Nodebb)

    Solved Customisation
    7
    0 Votes
    7 Posts
    1k Views

    @phenomlab said in Social icon (Nodebb):

    @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine

    73e805e1-997b-41bf-9259-51c5052ca8fc-image.png

    fixed 🙂

  • nodebb-plugin-customize error

    Solved Customisation
    25
    2 Votes
    25 Posts
    2k Views

    @phenomlab it work, thanks 🙂

  • [NodeBB] custom Gravatar image not showing

    Solved Customisation
    6
    1 Votes
    6 Posts
    1k Views

    @jac said in [NodeBB] custom Gravatar image not showing:

    @phenomlab said in [NodeBB] custom Gravatar image not showing:

    @jac are you using Custom ?

    Sure am mate 👍🏻

    Confirmed Fixed