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
  • Opening links in nodebb widget

    Solved Configure nodebb
    6
    4 Votes
    6 Posts
    3k Views
    phenomlab
    A more efficient way of including this would be to not over complicate it and leverage a standard iframe (providing the CSP headers of the remote site permit this) like below <iframe src="https://www.classmarker.com/online-test/start/?quiz=gag66aea7922f0a5" width="700" height="800"></iframe> This works first time every time on your site as intended.
  • TNG + Nodebb

    General tng genealogy nodebb plugin
    4
    0 Votes
    4 Posts
    2k Views
    phenomlab
    @Madchatthew said in TNG + Nodebb: you have to try and use duck tape and super glue to change something to make it do what you want it to do I couldn’t have put that better myself.
  • NodeBB recent cards customisation

    Solved Customisation nodebb recent cards
    3
    1
    2 Votes
    3 Posts
    1k Views
    JAC
    @phenomlab thank you very much for the assistance Mark, massively appreciated as always. The great thing about this is it’s all documented for other NodeBB users that come looking for solutions . Looks far better .
  • What is this bar called?

    Solved Customisation nodebb
    92
    1
    36 Votes
    92 Posts
    41k Views
    DownPW
    This is good
  • Difficult to move posts now, on mobile.

    Bugs nodebb
    16
    1
    5 Votes
    16 Posts
    5k Views
    phenomlab
    @DownPW Yes, it is. It’s set far too low meaning other elements with a higher preference will sit over the top of it.
  • what does sound/mute button do?

    Solved Customisation nodebb
    20
    1
    9 Votes
    20 Posts
    6k Views
    phenomlab
    @crazycells Yeah, looking at the plugin itself, that’s a hard coded limit [image: 3d6dbc10-185b-4102-9470-0c2731a10750-image.png] I’ll probably remove that… eventually…
  • Detect if user is admin

    General nodebb javascript code
    2
    0 Votes
    2 Posts
    2k Views
    phenomlab
    @pwsincd I think you can use userData.isAdmin = isAdmin; if I’m not mistaken - see https://community.nodebb.org/topic/15128/how-to-hide-whitelist-user-field-only-to-owner-or-admin?_=1648802303112 for an example
  • [NodeBB] Creating new user to auto post content

    Solved Customisation
    3
    0 Votes
    3 Posts
    2k Views
    JAC
    @phenomlab many thanks Mark .