Actions

Work Header

How to: Block fanfics & Block specific users & Hide too-long tag fields

Chapter Text

Wei Wuxian stared at the veritable wall of tags taking up all the space on his phone. He had just wanted to go looking for some fanfics! Why did he have to scroll down thousands of tags?!

"This person is clearly abusing the tagging system..." he muttered.

Lan Wangji nodded solemnly. "Hm. Must have courtesy and integrity."

Wei Wuxian chuckled. "That's right. I wonder how many of your sect's rules this story breaks?"

"As many rules as this story has tags."

Wei Wuxian burst out laughing. "Hahah! Can't believe a fanfic is trying to have 3000 tags! There's the Gusulan Wall of Rules, and then there's this wall of tags! It hurts my eyes to look at it." He brushed away a tear of mirth. "Well, Lan Zhan, we can't just let other readers suffer like this. Let's do something about it!"

And so, both Wei Wuxian and Lan Wangji created a guide on how to block troublesome fanfics to protect the tired fingers of mobile-readers that didn't like scrolling down past over-tagged fics:

 

 

 

-x-

 

 

 

You might have recently come across a specific fic that updates daily and has exactly 2211 tags as of the 19th of February 2021 (I'm really not joking, I counted them myself), most of them tags not relevant to the story itself. Those tags are altogether 9211 words long! Can you imagine scrolling past that much? The fic started in the Modao Zushi fandom, but the author has recently started tagging new fandoms, often some that don't even appear in the fic.

If you're someone who looks at recently updated fics regularly, especially if you're on mobile, dealing with that can be a pain. It's a lot to scroll past. Or sometimes, there's a fic that updates daily that you don't want to read and you're tired of seeing it pop up, so you'd like to hide it permanently.

Here's how to do it! You do not need to download anything, all you need is an account on AO3.

We will be using the site skins for this. Just copy the instructions:

 

 

How to block a fic

 

Click on the 'Hi, *your penname*' option in the upper right corner of the screen. Choose 'My Dashboard'. Then, just after 'Preferences', select 'Skins'.

 

Site skins and work skins are a way to change the appearance of the site or whatever work you publish. We will be creating a site skin.

Select 'Create site skin'. At the top, the option 'Write Custom CSS' should be automatically selected, with its button greyed out. If that's not the case, click on it.

Ensure that the first option, 'Type', has 'Site skin' selected and not 'Work skin'. A site skin is meant for the entire site. Give this new skin whatever title you want.

Underneath, in the CSS area, enter this:

 

.work-20963498 {
  display: none !important;
}

 

 

 

 

Then click 'Submit'. Once the skin is created, do not forget to click on the 'Use' option so that the skin is applied.

 

 

And there! The story won't appear again. If you want to use this technique to block several fics, then it'll need to appear like this:

 

.work-20963498,
.work-12292116,
.work-16264226,
.work-24559057,
.work-16619540 {
  display: none !important;
}


Just add a line with '.work-' followed by the ID of the story. Each line for each story should be separated by a comma, except the last one.

The ID of the story can be found in the story's link. 

 

 

 

 

How to use this blocking feature when you're already using another site skin (ex: Reversi, Chained Melody, etc.)

 

If you are using a site skin such as Reversi, you will need to merge the two skins so that you can have both Reversi and this blocking feature at the same time.

To combine several skins, copy-paste the code of the Reversi skin available here (or whichever skin you use) on a new skin you've created in the space marked 'CSS' where you can add text, and then just underneath the Reversi code, copy-paste the blocking feature. The order they appear in doesn't matter. Put one code above another or vice-versa.

Let's show how this works with an example. I will use one of the public site skins called 'Workings Hide meta skin by AO3' available here. This is the code of that skin:

 

/* SKIN: Workings Hide meta*/
.works-show .meta {
  display: none;
}



It's quite short. Now what you need to do is create a new skin following the previous instructions, and then paste onto it the code for the blocking feature and 'Working Hide meta skin by AO3'. The order doesn't matter. You could have one code after the other or vice-versa and it would work the same.

Here's the complete code:

 

/* SKIN: Workings Hide meta*/
.works-show .meta {
  display: none;
}

.work-20963498 { display: none !important; }

 

You can combine more than two skins by just copy-pasting several bits of code together in one skin. 

 

 

Extra features

 

AO3 has several public site skins available. Some change the aesthetic style of the site, others will hide certain things you don't want to see. So if you want relationship tags to be hidden, or the date, etc., then you can take a look.

Here's a great one:

The scroller. If you want fics with too many tags to automatically have some of the tags hidden without you needing to block them first, there's some code here that I use in my own skin. It's a public site skin that adds a scroller whenever the tag field gets too long. You can choose what is considered 'too long' by changing the measure. The default is 7.5, but you can modify that number according to your tastes.

The scroller code gives a result that looks like this:

 

 

And finally, a user here shows you how to make a skin that hides tags after a certain amount appears, on each story. The amount of tags visible can be modified. I haven't used it personally, so I don't know the finer details, but the link explains things well enough.

 

 

Confused by all the options? Unsure of what to use? Here's the skin I use, with several features.

 

If this is all a bit too complex, then let me give you a copy of the site skin I use. I use 3 features: the blocking feature; the feature that puts a scroller on a fic's tag area when there are too many tags (see image above); and finally, a feature that puts the AO3 fonts at 110%. Here's what it looks like:

 

 

 

Do you want the same options as I use? Then use the following skin.

Go on 'Skins', 'Create Site Skin' and paste this into the CSS option:

 

.work-20963498,
.work-12292116,
.work-16264226,
.work-24559057,
.work-16619540 {
  display: none !important;
}

li.blurb .tags {
  max-height: 8.5em;
  overflow-y: auto;
}

#workskin {
  font-size: 110%;
}

 

The paragraph at the start is the blocking feature, with several multi-fandom and heavily tagged fics already blocked.

The scroller is in the middle. You can adjust the 8.5 to whatever size fits your desires. The bigger it is, the more tags show up before you need to scroll down. The original public skin I took the code from uses 7.5 but I changed it to suit my needs.

The bit of code at the end is the size of the font. You can change that percentage according to your eyesight.

One you have created the site skin, don't forget to click on the 'Use' option or else it won't activate. And of course, site skins only work if you are logged in.

 

I hope this will be of use. :)

 

If you have questions, don't hesitate to speak up. If you would like to request a specific feature, tell me and I'll see what I can do. If you have tips or know useful stuff, then leave a comment and I'll share it here (with proper credit, of course).

 

 

 

-x-

 

 

 

And so, their guide completed, Wei Wuxian and Lan Wangji were finally able to go back to flirting in peace.