Skip to content

how to hide "moved" badge with CSS?

Solved Customisation
12 2 3.9k 1
  • wrote on last edited by
    #1

    Hi , I am talking about the moved labels with arrows on the badge that is listed on topics list… how can I target them with CSS?

    Screenshot 2024-03-21 at 15.09.36.png

  • @phenomlab hi Mark, my question is for the “harmony theme”, I believe your code is for the “Persona” ? It is not working…

    wrote on last edited by phenomlab
    #4

    @crazycells no, it was for harmony if I recall correctly. I’ll need to check if not.

    EDIT - the below CSS will hide those types of badges from the topic list

    span.badge.border.border-gray-300.text-body {
        display: none;
    }
    

    The below will hide the same from the topic view

    a.badge.badge.border.border-gray-300.text-body.text-decoration-none {
        display: none;
    }
    

    It’s important to note that this will target other “action” badges also. If you’d like to target specific text whilst leaving other badges alone, this will likely require custom JS to do so. The CSS I provided above is active on Sudonix.

  • Hi , I am talking about the moved labels with arrows on the badge that is listed on topics list… how can I target them with CSS?

    Screenshot 2024-03-21 at 15.09.36.png

    wrote on last edited by
    #2
  • wrote on last edited by
    #3

    @phenomlab hi Mark, my question is for the “harmony theme”, I believe your code is for the “Persona” ? It is not working…

  • @phenomlab hi Mark, my question is for the “harmony theme”, I believe your code is for the “Persona” ? It is not working…

    wrote on last edited by phenomlab
    #4

    @crazycells no, it was for harmony if I recall correctly. I’ll need to check if not.

    EDIT - the below CSS will hide those types of badges from the topic list

    span.badge.border.border-gray-300.text-body {
        display: none;
    }
    

    The below will hide the same from the topic view

    a.badge.badge.border.border-gray-300.text-body.text-decoration-none {
        display: none;
    }
    

    It’s important to note that this will target other “action” badges also. If you’d like to target specific text whilst leaving other badges alone, this will likely require custom JS to do so. The CSS I provided above is active on Sudonix.

  • phenomlab phenomlab has marked this topic as solved on
  • @crazycells no, it was for harmony if I recall correctly. I’ll need to check if not.

    EDIT - the below CSS will hide those types of badges from the topic list

    span.badge.border.border-gray-300.text-body {
        display: none;
    }
    

    The below will hide the same from the topic view

    a.badge.badge.border.border-gray-300.text-body.text-decoration-none {
        display: none;
    }
    

    It’s important to note that this will target other “action” badges also. If you’d like to target specific text whilst leaving other badges alone, this will likely require custom JS to do so. The CSS I provided above is active on Sudonix.

    wrote on last edited by
    #5

    hi @phenomlab , this code is removing all badges includes “pinned”, can we specifically target the “moved” label?

  • hi @phenomlab , this code is removing all badges includes “pinned”, can we specifically target the “moved” label?

    wrote on last edited by
    #6

    @crazycells not with CSS as this is a shared class and would likely have an undesirable affect as I mentioned earlier in the previous post.

    It should be possible with some custom js which I could easily put together.

  • @crazycells not with CSS as this is a shared class and would likely have an undesirable affect as I mentioned earlier in the previous post.

    It should be possible with some custom js which I could easily put together.

    wrote on last edited by
    #7

    @phenomlab Thanks a lot Mark, let me ask first on nodebb community… I have some reasons but let’s see if I can convince them to add this 😄

  • @phenomlab Thanks a lot Mark, let me ask first on nodebb community… I have some reasons but let’s see if I can convince them to add this 😄

    wrote on last edited by
    #8

    @crazycells ok. No issues. Sharing classes like this was always going to cause issues.

  • @crazycells ok. No issues. Sharing classes like this was always going to cause issues.

    wrote on last edited by
    #9
  • wrote on last edited by
    #10

    @crazycells good, but I think it would have made sense to cover all of them.

  • @crazycells good, but I think it would have made sense to cover all of them.

    wrote on last edited by
    #11

    @phenomlab yeah but I believe they already have their own components…

    component=“topic/pinned” and component=“topic/locked” were already exist, just “moved” was missing…

  • @phenomlab yeah but I believe they already have their own components…

    component=“topic/pinned” and component=“topic/locked” were already exist, just “moved” was missing…

    wrote on last edited by
    #12

    @crazycells ah, I see. That makes sense.


Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • CSS codes to prevent votes to disappear

    Solved Customisation nodebb
    3
    1 Votes
    3 Posts
    1k Views
    crazycells
    @phenomlab yes, it is thanks a lot…
  • Unable to change icon in NodeBB navigation

    Tips navigation nodebb
    1
    7
    1 Votes
    1 Posts
    896 Views
    No one has replied
  • build nodebb Warning in entrypoint size limit

    Solved Performance nodebb
    2
    0 Votes
    2 Posts
    1k Views
    phenomlab
    @eeeee they are nothing to worry about, and can be ignored.
  • NodeBB: Consent page

    Solved Configure nodebb consent
    16
    4 Votes
    16 Posts
    6k Views
    phenomlab
    @DownPW I still do not see any issues.
  • restarting nodebb on boot

    Unsolved Configure nodebb
    3
    1 Votes
    3 Posts
    2k Views
    phenomlab
    @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.
  • Link vs Refresh

    Solved Customisation nodebb blog customization
    20
    2
    8 Votes
    20 Posts
    7k Views
    phenomlab
    @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
  • NodeBB 1.19.3

    Solved Performance nodebb 1.19.3 performance
    33
    4 Votes
    33 Posts
    16k Views
    DownPW
    @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 [image: 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
  • nodebb dropdown menu

    Solved Configure nodebb
    5
    1
    0 Votes
    5 Posts
    3k Views
    JAC
    @phenomlab said in nodebb dropdown menu: @kurulumu-net You set it like the below example taken from this site [image: aae36790-3257-4bb2-ad5a-0d744309876a-image.png] Which presents this [image: 77f47260-2941-4afe-9614-8e17dcfc8c19-image.png] Very interesting… I actually thought this wasn’t possible, as I remember it being asked in the NodeBB forum. Is this something new that’s been implemented? I’ll 100% be doing that when I’m on the laptop over the weekend.