• treyb

  • Post #1
  • Edited

Need a little help please. I am trying to hide a single tag from showing on the main page. The below is the CSS I am trying, but it isn't working. Any advise?

.IndexPage .DiscussionListItem-info > .item-tags, .UserPage .DiscussionListItem-info > .item-tags {
	[href="/t/push-to-socials"], {
	    display: none !important;
	}

  }

  • treyb

    Sorry, I don't think there's a solution of pure CSS. If the following doesn't work, you will prolly need the help of JS.

    I got kinda close, it works by me adding the CSS code via the browser inspector. But I am not sure if this will work by adding the following code via the flarum admin panel:

    
/* 1) Hide the "push-to-socials" tag by its background color or .fa-check icon */
.TagLabel[style*="--tag-bg: #8c00ff;"] {
  display: none !important;
}

/* 2) If the *next sibling* is that "push-to-socials" tag, restore the right corners on the current tag */
@supports selector(:has(+ *)) {
  .TagLabel:has(+ .TagLabel[style*="--tag-bg: #8c00ff;"]) {
    border-radius: 8px !important;
  }
}

    Here I am testing using discuss Solved tag and the following seems to be working.

    Few options. Either target the tags labels with :has, fav icon or bg colour using the browser inspector.

    Explanation

    Option 1 hides the tag by matching the text "Solved" in the TagLabel-name element.
    (Note: :contains() works in many browsers but isn’t officially CSS-standard. Test this first.)

    /* Hide the Solved tag by targeting its text */
.TagsLabel .TagLabel:has(.TagLabel-name:contains("Solved")) {
    display: none !important;
}

    Option 2 hides the tag by targeting the "Fav icon" (fa-check) inside the Solved tag. This is safer as the icon is unique to Solved tags.

    /* OR hide based on the checkmark icon (if unique to Solved tags) */
.TagsLabel .TagLabel:has(.fa-check) {
    display: none !important;
}

    If ":has()" isn’t supported in your browser:

    Option 3 Use this alternative to hide the entire tag container for Solved tags which targets the tags bg colour:

    /* Hide the entire Solved tag */
.TagsLabel .TagLabel[style="--tag-bg: #6DBB3E;"] {
    display: none !important;
}

      Wellwisher I tried these as well last night and Option 3 was the only one that somewhat worked on my site. However, this removes the entire end, and the rounding is missing from the right side.

        treyb

        Sorry, I don't think there's a solution of pure CSS. If the following doesn't work, you will prolly need the help of JS.

        I got kinda close, it works by me adding the CSS code via the browser inspector. But I am not sure if this will work by adding the following code via the flarum admin panel:

        
/* 1) Hide the "push-to-socials" tag by its background color or .fa-check icon */
.TagLabel[style*="--tag-bg: #8c00ff;"] {
  display: none !important;
}

/* 2) If the *next sibling* is that "push-to-socials" tag, restore the right corners on the current tag */
@supports selector(:has(+ *)) {
  .TagLabel:has(+ .TagLabel[style*="--tag-bg: #8c00ff;"]) {
    border-radius: 8px !important;
  }
}

            Is it possible to display more tags? Before "More..." on the left?

              treyb
              no, this is general question, it is just kinda related to your post title.

              You want to hide, and I want to show more tags 🙂