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
  • What’s going on with NodeBB?

    Performance nodebb script die
    20
    8 Votes
    20 Posts
    5k Views
    phenomlab
    @cagatay The most reliable way to upgrade Node.js on Ubuntu depends on how you originally installed it. Method 1: Using NVM (Recommended) If you already use Node Version Manager (NVM), upgrading is simple. NVM allows you to keep both versions and switch between them if needed. Install Node 22: nvm install 22 Switch to Node 22: nvm use 22 Set it as your default: nvm alias default 22 Verify the change: node -v Method 2: Using NodeSource (PPA) If you installed Node.js via apt using the NodeSource repository, you need to update the repository script to point to the new version. Remove the old NodeSource list (optional but cleaner): sudo rm /etc/apt/sources.list.d/nodesource.list Download and run the NodeSource setup script for Node 22: curl -fsSL [https://deb.nodesource.com/setup_22.x](https://deb.nodesource.com/setup_22.x) | sudo -E bash - Install/Upgrade Node.js: sudo apt-get install -y nodejs Verify the installation: node -v Method 3: Using the ‘n’ Package If you have npm installed, you can use the n interactive manager. Clear the npm cache: sudo npm cache clean -f Install the ‘n’ helper: sudo npm install -g n Install Node 22: sudo n 22 Update your shell: hash -r Troubleshooting Permission Denied: If you see permission errors using Method 2 or 3, ensure you are using sudo. Path Issues: If node -v still shows version 20 after upgrading via NVM, restart your terminal or run source ~/.bashrc. Conflicts: Avoid mixing these methods. If you switch from apt to nvm, it is best to sudo apt remove nodejs first to avoid path conflicts.
  • navigation menu panel on mobile

    Solved Customisation nodebb css
    8
    1
    7 Votes
    8 Posts
    3k Views
    phenomlab
    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check. EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right… .bottombar-nav { padding: 0px !important; } I’ve removed this so it reflects stock Harmony.
  • 4 Votes
    7 Posts
    3k Views
    crazycells
    @phenomlab oh no, that is 1 cent on the video, but you are right, symbols are similar… I just converted it to $1 , since it is more intuitive in daily life…
  • SEO and Nodebb

    Performance nodebb seo
    2
    2 Votes
    2 Posts
    2k Views
    phenomlab
    @Panda It’s the best it’s ever been to be honest. I’ve used a myriad of systems in the past - most notably, WordPress, and then Flarum (which for SEO, was absolutely dire - they never even had SEO out of the box, and relied on a third party extension to do it), and NodeBB easily fares the best - see below example https://www.google.com/search?q=site%3Asudonix.org&oq=site%3Asudonix.org&aqs=chrome..69i57j69i60j69i58j69i60l2.9039j0j3&sourceid=chrome&ie=UTF-8#ip=1 However, this was not without significant effort on my part once I’d migrated from COM to ORG - see below posts https://community.nodebb.org/topic/17286/google-crawl-error-after-site-migration/17?_=1688461250365 And also https://support.google.com/webmasters/thread/221027803?hl=en&msgid=221464164 It was painful to say the least - as it turns out, there was an issue in NodeBB core that prevented spiders from getting to content, which as far as I understand, is now fixed. SEO in itself is a dark art - a black box that nobody really fully understands, and it’s essentially going to boil down to one thing - “content”. Google’s algorithm for indexing has also changed dramatically over the years. They only now crawl content that has value, so if it believes that your site has nothing to offer, it will simply skip it.
  • Q&A Plugin Changes NodeBB

    Solved Customisation nodebb q&a plugin
    25
    1
    6 Votes
    25 Posts
    11k Views
    cagatay
    @phenomlab said in Q&A Plugin Changes NodeBB: float: right; left: 10px; } worked thank you
  • Top Ranked Forums

    Chitchat nodebb top ranked
    9
    1
    3 Votes
    9 Posts
    3k Views
    phenomlab
    The real issue here is that most people consider forums to be “dead” in the sense that nobody uses them anymore, and social media groups have taken their place. Their once dominant stance in the 90’s and early 00’s will never be experienced again, but having said that, there are a number of forums that did in fact survive the social media onslaught, and still enjoy a large user base. Forums tend to be niche. One that immediately sticks out is Reddit - despite looking like it was designed in the 80s, it still has an enormous user base. Another is Stack Overflow, which needs no introduction. The key to any forum is the content it offers, and the more people whom contribute in terms of posting , the more popular and widely respected it becomes as a reliable source of information. Forums are still intensely popular with gamers, alongside those that offer tips on hacking etc.
  • Dark Theme Upper Padding

    Solved Customisation nodebb
    7
    1
    6 Votes
    7 Posts
    2k Views
    crazycells
    @DownPW great! thanks a lot… this code solves my problem.
  • [NODEBB] Wallpapers BUG on Firefox Mobile ?

    Solved Customisation nodebb wallpaper firefox mobile
    9
    1
    0 Votes
    9 Posts
    3k Views
    phenomlab
    @downpw I’m inclined to agree with this. There isn’t much else you can do, and provided it works with no odd looking artefacts in other browsers, then ok. The :before and :after are pseudo classes and very well supported across all browsers (except perhaps Internet Exploder, but who uses that these days ?)