Highlight AO3 Tags @highlight-ao3-tags - Tumblr Blog

Color Code AO3 Tags

Here’s a screenshot of a draft I made just to get a bunch of my example tags together in one post. It’s not the longest group of tags I’ve seen, obviously, but reading it takes some concentration, right?

Look at this version of it. You can tell right away that There’s two tags that I wouldn’t like, in red, two that I love, in blue, one that I like when done right, in green, and a Trans Character, with the flag.

Now you’re thinking it sounds hard to make that, right? Even just making that skin to hide authors that came out a while ago was a lot of effort. So I decided to make it easier for you. I’ve made a spreadsheet that will give you the code you need to put in the css box after you fill in the other bits.

It has:

6 different lists for different formatting of tags.

3 different lists for different formatting of authors.

16 pride flags with space for more.

1 list to hide authors.

1 list to hide works.

1 list to hide series.

#ao3 #how to ao3 #ao3 skin #highlight tags #archive of our own #finally got to this post #after having the spreadsheet for months #I just keep making tiny edits

theimpurelily

woops made myself sad

#svsss #😭😭😭#this is so pretty honestly #and they are so expressive and now I am sad

Hi, I'm loving the colored tags options; could you explain why there are two columns for one color in sheets?

In the template? Mostly because I didn't want to think of more colors!

Might also partially be because my personal system is [love this tag | love this tag, but it's not an exact match and if it bolds too many things accidentally it's going to annoy me] + [fics with this are hit or miss | this is not an official tag, but it appears on the freeform often so hopefully this will get it] + [cannot read this tag | readable, but CAREFULLY] + [Podfic | Podfic related tags] so when I had to set up the template it made sense to me to have it be two with the same color?

I figure since the idea is that you can change the given colors to whatever colors work for you it wouldn't really affect anything?

#asks #for a second I thought I had published /my/ personal version which does actually have to columns and completely forgotten #but I never got around to troubleshooting or writing up a guide for exclusions #so I did not actually do that #... my personal version of my shared spreadsheets are a lot more extensive but also need to be fixed every time I add more things #which makes them really hard to share unless we talk occasionally lmao

Added an i to the end of the matches.

[href*="match"] ⇒ [href*="match"i]

Added a script to color the cells according to the color they have inside.

Spreadsheet to AO3Skin

1. Make a copy of the spreadsheet (find links here)

1.1 From “Editor View” click on File > Make a copy

1.2 From “Template View” click on “USE TEMPLATE” on the top right. It’s the blue button.

1.3 From the “Copy View” click on the “Make a copy” button.

2. Rename your copy (optional)

3. Explore your options. There’s a description on the first sheet. There’s also individual posts for each page here on tumblr (intro | input | tags | pride).

4. Add your names and your tags, any and all that you want, change anything to your preferences.

5. Create a site skin. You can follow the steps here if you don’t know how to make one. If you would like the tags to appear over a different site skin you can follow the steps here. If you like to switch between themes and don’t want to update the preferences twice, you can find how to do that here.

6. Go back to the Intro + Output sheet. Select the big box framed with black, copy that

Note: if you copy in certain devices, it might get double ""quotation marks"" as well as one at the start and end of the code block. You can copy from a different device, or use a text editor to Find&Replace "" with "

7. Paste the it inside the CSS box and click “Submit”

8. Click “Use” at the bottom of the page it takes you to.

#spreadsheet #sheets #mine

Spreadsheet

Version June 6, 2022

Editor view - allows comments (here)

Preview as a template (here)

Make a copy with no preview (here)

#spreadsheet

AO3 Updates

2021-04-01 - hiding all works by an author is possible

2022-06-05 - hiding a series is now possible

#ao3 updates

Spreadsheet: Pride

My system was fairly simple. Blue for FAV, Red for OOF, Orange for ????, Green for Podfic, and Purple for Asexual Characters. Then tumblr added the thing where if a tag said “asexual” it got colored with the flag colors and !!! but I didn’t think it would be possible until I found this Multicolored text skin on ao3 and realize it was.

Because of how the gradient works, it's kind of hard to make the text more readable while making it just color the font. However, I've also given you the option to have the flag just be the background, and it also looks neat.

You can set the direction as "top to bottom" (which is normal flag direction) or "left to right" (which makes the colors extent a little over it and I think makes it neater for the version that only colors the letters)

If you only want some of the flag options given in the pride sheet, check the box on the column "Color This?" If you want them all, click the checkbox in the intro + output sheet.

You can add more flags in the pride sheet, and change the color codes to things you like. Unlike the other sheets, this time you can’t just give a CSS name or a HEX code. Since it needs a transparency setting, we’re now using RGB format. Most sites that give you HEX codes will also give you the RGB codes. Be sure to enter them as three numbers separated by a comma.

#sheets

Spreadsheet: Tags

The third sheet on the spreadsheet is tags.

It has space for six different lists, which you can customize the color, the background, and if the font is bold or not. You can find which colors to use here, or here, or anywhere on the internet.

Feel free to change the numbers at the top (1-6) to something easier to identify (Love, Fave, Hate, Warning, 😍, 😱, 🚫, 🛑, Bold Blue, Blue, Red).

Tag Matching

/ start and ending /

If you would like to get the tag "Time Travel" and only the tag "Time Travel" would change. you paste the end bit of the URL (https://archiveofourown.org/tags/Time%20Travel/works) including the forward slashes (/). This won’t affect tags like "Time Travel Fix-It" or "Alternate Universe - Time Travel" because it is limiting it at the start and end of “Time Travel”

Make it “/Time Travel” and you would highlight "Time Travel Fix-It"

Make it “Time Travel/” and you would highlight “ Alternate Universe - Time Travel"

Symbols / & ! -

If you were manually writing the code, you’d have to make sure that all spaces are %20, but the spreadsheet will take it and turn it into that. It does not replace other symbols, since ao3 does weird things (like ship slash / turning into *s*) that are too many to account for. Just copy the tag from the url.

Case Sensitivity

Keep in mind that the match is case sensitive, so you might need to add "Time Travel", "Time travel" and, "time travel"

False Positives

Matching gets any tag that contains it what you added. Do you like "evil!Character" AUs? Getting just evil would match with “Neville Longbottom”, “Devil”.

Color Settings

Font Color

Find any color name supported by CSS, or use a HEX code. Make sure to include the # symbol when using that.

Font Decoration

Strike-through and underlines, also available with a wigly line!

Font Weight

Bold or not. But bold is the only one that I, the maker of this find useful, so it's what I added.

Background

Want to completely black out the tag? make the Font Color and the Background the same.

#sheets

Spreadsheet: Input

When this started there was one input sheet, it has grown since then, but seeing as this is authors and works, I don’t quite know what to name it, so input stays.

Work URL

Column A is for the works you want to hide. It extracts the work ID from a given link, as long as it is an ao3 link, but you can just do the work ID yourself. To hide works, it uses the code given by ao3 in this post

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

Username / User ID

To be honest, I hid a user and Do Not Remember who they are. I don’t think I’ll find them again even if I try to find them, but I think it would be beneficial to anyone else to keep track of who they hide. It’s not really a column that’s useful to the spreadsheet, but I hope it is useful to you.

The User ID can be found in the AO3 profile page: https://archiveofourown.org/users/USER/profile. Besides the “My user ID is:” line. The column should be filled only with numbers. Usernames will not be accepted.

There’s four ways you can hide an author. Hide everything [works, bookmarks, comments], hide only [works and bookmarks], hide either comments, or bookmarks. Pick which one you want.

.user-000, .blurb.user-000, .comment.user-000, .bookmark .user-000 { display: none !important; }

Color Users

This section is to give authors a color, or just make their names bold. You have three columns for this, by default named [1, 2, 3] but you can just change them to whatever helps you remember what the list is about. (I have suggested things like [Love, Fave, Hate, Warning] or emojis [😍, 😱, 🚫, 🛑])

You can use any color you would like, you can find HEX codes on this website, and a list of named colors that CSS understands, and most browsers can get here.

Paste the author’s name, not their pseud.

#sheets

Spreadsheet: Output

Find the spreadsheet here [Set Link Later]

The spreadsheet has its own set of instructions, since it existed before this blog did. That’s what this sheet is for. It displays the generated CSS for you to copy into your own site skin in the big box. (instructions here)

The poor planning of this project means that the option to Highlight All Flags is here.

Clicking it, will give you this message. It’s okay. Just don’t change the other things in that sheet.

#sheets

Other resources:

Dyslexia Friendly Skin by ElectricAlice also known as ao3skin on tumblr

Site of HEX color codes

Pride color codes

#resources

How to add Your Skin as a Parent Skin.

You have your Highlights Skin, and like... Reversi is great for Night Mode, but sometimes you just want the Light Mode still. Now, the quick solution might be to make two skins, one with the code and no Parent Skin (x), one with the code and Reversi as a Parent Skin (x). This brings up a new problem, though, now any time you make a change you have to make it to both skins, and while that gives you more control with colors that look good in one and not the other, it is a bit of a bother to do both.

1. Follow “Create a Skin” Post up to step 4. Leave the CSS box blank and instead scroll down to the bottom and click on “Show ↓”

2. Ignore the “Conditions” box and, once again, scroll all the way down to the “Parent Skins” box. Click on “Add parent skin”

3. Add Reversi, or a different desired skin, as shown on this post. Click to “Add parent skin” for a second time.

4. It works the same way as adding a public site skin. It really works the same way as adding one Parent Skin, but sometimes it’s nice to have the possibility pointed out.

#basics

How to add the Highlighter skin on top of a different skin.

I personally like to have Reversi on whenever I feel like I need Night Mode on and would probably choose it over my color-coded tags.The good thing is: you don’t have to. If you followed the instructions in this post you already have your skin made. So now we’re going to modify it.

1. Make your way back to the “My Site Skins” page (https://archiveofourown.org/users/USERNAME/skins). Click on Edit.

2. Scroll down to the bottom and click on “Show ↓”, besides “Advanced”

3. Ignore the “Conditions” box and, once again, scroll all the way down to the “Parent Skins” box. Click on “Add parent skin”

4. Type the name of the skin you would like, and the full name should be suggested.

5. Select the suggestion you want, and it should show up like this. Now you just click “Update”

#basics

How to create an AO3 Site Skin.

1. Go to your profile (https://archiveofourown.org/users/USERNAME)

2. Click on “Skins”, it should be under “Preferences” and over the break that starts with “Works” if you are doing this while on desktop. It can also be found with the link (https://archiveofourown.org/users/USERNAME/skins) or (https://archiveofourown.org/skins)

3. Click on the button for “Create Site Skin” or with this link (https://archiveofourown.org/skins/new?skin_type=Skin)

4. Add your title and your description. Since this is made for this blog, which is just the log of a spreadsheet that gives you CSS, leave the top option as “Write Custom CSS”

5. Paste the given code inside the CSS box and click “Submit”

6. Click “Use” at the bottom of the page it takes you to.

Changed skin and would like to go back? Follow instruction number 2 and get back to the “Skins” page. Your new skin should show up like this:

Related Tutorials: add highlight skin to a different skin || add highlight to 2+ skins and only keep one list

#basics

Trending Blogs

Recently Viewed Blogs

Highlight AO3 Tags