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
  • External Links - New Window

    Solved Customisation nodebb links settings
    8
    2 Votes
    8 Posts
    2k Views
    phenomlab
    @Sampo2910 search the forum here for ogproxy which is the client side version of that plugin I wrote. It’s in use here on this forum.
  • NodeBB upgrade now cant post

    Solved Bugs nodebb
    5
    2 Votes
    5 Posts
    2k Views
    phenomlab
    @Panda yes, for some reason, that is the case. If you need an urgent response, it’s probably better to post here because of the time difference.
  • Chevron up before & after

    Solved Configure nodebb
    11
    1
    4 Votes
    11 Posts
    3k Views
    cagatay
    @crazycells you are right thank you.
  • Title on homepage of nodebb forum

    Solved Customisation nodebb
    2
    1 Votes
    2 Posts
    2k Views
    phenomlab
    @eveh Welcome board The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; } Note, that you will need to adjust your CSS code to suit your own site / requirements.
  • Bootstrap Version

    Solved Customisation nodebb bootstrap
    8
    5 Votes
    8 Posts
    3k Views
    Madchatthew
    @phenomlab That will be nice once they have completed that. It will be interesting to see how long that takes. So for now I will use custom css to make it look the way I want. Frameworks just make things a little faster. Thanks @phenomlab
  • 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…
  • NodeBB templates

    Locked Chitchat themes templates nodebb
    12
    4 Votes
    12 Posts
    5k Views
    phenomlab
    Placing this here for reference https://sudonix.com/topic/216/nodebb-js-script-css-theme-switcher Further information and posts can be found at this link
  • Display tweets in widget [NodeBB]

    Solved Customisation
    29
    4 Votes
    29 Posts
    13k Views
    JAC
    @phenomlab brilliant, many thanks Mark