Work Text:
As previously stated, you can use this skin alongside the normal one you already use. The way skins work on AO3 is you can "stack" them. This is a small one and goes on top, and anything that isn't styled by it is styled by the skins below it. Personally I use Reversi, which is why the example images have a dark background.
Because you need to actually select the tags, implementing this skin won't be as simple as many others. I will go through my process of selecting the tags and converting them into the code seen here. It takes absolutely no coding experience, just a bit of copy-pasting and some find-and-replace -use.
Here's an example of what the final code will look like:
a[href*="/Fluff/"],
a[href*="/Human*s*Monster%20Romance/"],
a[href*="/Hurt%20No%20Comfort/"],
a[href*="/Slow%20Romance/"],
a[href*="/One%20Shot/"],
a[href*="/Pre-Relationship/"] {
color: #ab4fe8;
}a[href*="/Toxic%20Relationship/"] {
color: #dc2222;
}
And here's what the colored tags will look like. Here I'm showcasing the color only. In the wild they will be formatted normally among the other tags:
Note that you can color any link you want with this method, including ship and fandom tags. I just have opted to not showcase any in my examples.
How to use
Select your username in the upper right corner
Select "Skins"
Select "Create Site Skin"
Make sure "Type" is "Site skin". Give this any title you want, AO3 demands it must be unique
Copy-paste the code in the CSS-part
To add this skin "on top" of your old one, open up the advanced settings. Make sure "add on to archive skin" is selected. Then add a parent skin, the skin you want to use and add the tag coloring on. New skins inherit all their styles from the parent, unless the style is specified by the new skin
How the code works
The first part tells which element to apply the color to. It selects a link with the string "/Fluff/" somewhere in the URL. Here's where you can learn more about this specific CSS selector. The star makes it so it only looks for a partial match.
Different tags are listed below each other, separated by commas. Note that the very last tag doesn't end in a comma. A comma after the last tag will break the code.
After all the tag selectors there's the rule we will apply to all the elements selected. "color" is a property referring to the font color, the value after it is the color you can choose. Here I'm using hex colors. Use an online hex color picker to choose the color you want.
It is important that the rules will be wrapped in curly brackets, {}, that there's a colon after the word "color", that the color is in some standard color format such as hex color, and that there's a semicolon after the color value. If any of these are wrong, the code will not work. I will help troubleshoot this, just ask me in the comments.
You can see in my code example that there are two "blocks" of code separated by an empty line. This is to show that you can pick as many categories to color as you like. Personally I sort my tags into four categories: bad tags, good tags, interesting tags and fandom tags which include characters and pairings.
How to select the tags
We will want to copy the link URLs of the tags we want and paste them to any program with a find-and-replace -feature. It can be your basic notepad, but I suggest you use excel or any spreadsheet application. The spreadsheet comes in handy for keeping them all organized in their own cells, as well as if you want to select multiple types of tags you plan to color different colors later. There's a section on this sorting later.
How copy the links is I use a Firefox addon called "Fast copy links". You can do the copy-pasting manually, I just don't want to. This addon makes it so I can hover on a tag and press control + c and it will copy the link to a clipboard in the addon. You can select as many tags as you like, but for the first time around I suggest sticking with just a few so you can see how the process works, so in case you mess up and have to start from the beginning it wont be as large a setback.
When your tags are in the spreadsheet (or text editor) we will add the CSS around them by using find-and-replace.
So lets say your tag is "Fluff", its URL will look like this: https://archiveofourown.org/tags/Fluff/works.
Open up find-and-replace, usually by pressing control + H. Put "https://archiveofourown.org/tags" to the "find" box, "a[href*="" to the "replace" box, without the outer quote symbols. There should be one " at the end of a[href*=", not two. Then replace all.
The tags should then look like this:
a[href*="/Fluff/works
We have now replaces the beginning of the URL with the beginning of the CSS code. Now, put "works" to the "find" box, ""]," to the "replace" box, without the outer quote symbols. There should be one " at the beginning of "],. Then replace all.
The tags should then look like this:
a[href*="/Fluff/"],
We are now done with editing the tag URLs to a working code. Just copy them all, paste them to the CSS section of the skin, delete the last comma before the curly brackets and pick a color you like, and you're ready to enjoy the colored tags! But there's a few things I like to do after this, which I'll walk you through next.
Cleaning up duplicates
Usually I end up copying a single tag multiple times. There are many way to use excel to delete the duplicates, but what I like to do is I select "Conditional formatting > Highlight cell rules > Duplicate values", and then use the "Sort and filter" to sort the tags alphabetically so all the duplicates will be next to each other. Then I simply delete all the duplicates manually. Again, you can be fancier with this if you so desire.
Sorting the tags
Usually I copy all the tags I want to highlight, not caring about the category and color they'll end up in later, as this is the point where I sort them. I read through each one and assign them a number in a cell next to them. So for example, the tags I want to color green I label with "1" and the ones I want to color red I label "2". You can label them how you want, "fave", "ick", "bad", "red", "a", "b", etc. After I've labelled them, I use the "Sort and filter" to show me only the tags with the label "1", for example. Then I look through them once more to make sure they're all in the same category. After checking, I copy-paste them to the code. I work through all the labels like this.
Hiding tags
You can use this same method to hide tags. The most straight-forward way is to just replace the "color: #ffffff;" with "visibility: hidden;". This makes it so the tag will still take the space it normally would, but the text is invisible. This is good if you don't want to know what a tag says, but want to be aware that something is being hidden. Here's how it will look like, using the tags of this work as an example. I've hidden the "AO3 Tutorial" -tag.
If you want to hide a tag so you can't even tell it was ever there, that's a bit more involved as AO3 adds commas and some formatting around each link. But it is still doable and fairly simple. Heres what the code will look like for the example spoiler tags:
ul.commas li:has(a[href*="/Spoiler/"]),
ul.commas li:has(a[href*="/Spoiler2/"]) {
display: none;
}
And here's how it will look like. Compare to the example above. Again, I've hidden the "AO3 Tutorial" -tag.
How this bit of code works is it looks at the tags listed on a work including all the formatting around them and selects elements with a specific string in the URL. Then, for the elements that match the criteria it sets their display to "none". This makes the browser act like the element was never there. And as before, you can chain on as many of these as you like, just remember to remove the comma directly before the curly brackets.