Permablocking Specific Tags - Site Skin

by Eli0t

Chapter 3: Knowing when something was removed

Summary:

The current way this is done, you don't see any information about the thing being hidden. Here is how to add something to signify that a blurb was removed

Hey, so sorry there aren't any images right now, I'll add some later.  But for now, here is a bit of an update for those who don't want the muted tagged work blurbs to completely disappear (so you know when something is removed).  

So if our current code is: 

 

.blurb:has(a[href*="/tags/Violet%20the%20Hippo/works" i])
{
  display: none !important;
}

that would remove the work blurb entirely.  So we're going to add a new part in addition to that. 

.blurb:has(a[href*="/tags/Violet%20the%20Hippo/works" i]):before
{
  content: "Work blurb removed for containing a muted tag";
}

 

That will add a little note into the blurb box that says whatever is written in the quotes.  In this case "Work blurb removed for containing a muted tag".  

but it won't show up if we just added that in addition to the first bit of code.  This is because that first bit of code just makes the entire box (including the line we added) disappear.  So we need to edit it to only remove the child elements.  You can do this like so:

.blurb:has(a[href*="/tags/Violet%20the%20Hippo/works" i]) > *
{
  display: none !important;
}

 

That will remove all of the elements inside the blurb box, except for the note we added about it having a muted word.  

 

So, combined, your code will be like this:

 

.blurb:has(a[href*="/tags/Violet%20the%20Hippo/works" i]):before
{
  content: "Work blurb removed for containing a muted tag";
}
.blurb:has(a[href*="/tags/Violet%20the%20Hippo/works" i]) > *
{
  display: none !important;
}

 

Notes section:

• This should still work with all of the other fancy options for selection like :is() and :not(), you just need to copy it exactly. 
  
  
• If you are using an :is() selector to select for multiple possible tags, there isn't a way to make the text say which tag caused the blurb to be muted.  
• You cannot add a link to the work to bypass the mute.  Only plain text can be added sadly.  If you want to be able to access the work despite having the muted tag, change your code to this (plus the other half from before with the muting note):
  .blurb:has(a[href*="/tags/Violet%20the%20Hippo/works" i]) > *:not(.module) {
  display: none !important;
}

  Just the header will show up under the note we added. There are ways to also remove things like the ratings boxes and fandom tags if you just wanted the link and nothing else, but that seemed too specific for a general tutorial like this. Ask in the comments if you want the code for that!

 

 

Hope this helps!

Notes:

Let me know if you are having any trouble! <3

Series this work belongs to:

• Part 1 of AO3 Skins
• Part 1 of :has() selector