Work Text:
I’ve made a quick skin that adds a border and alternates 3 colors for the relationship tags, 3 colors for the character tags and 3 colors for the additional tags. To make them as separate as they can.
I went for subtle shades of the same color but you can choose every color you want for every category of tags.
(thank you pi, for this masterpiece of a fic btw)
Install the skin
- Make sure you're logged in your account on AO3
- go to my dashboard and then click on Skins (in the menu on the right)
- click on the button create new skin.
- Make sure Type is Site Skin
- Add a Title to your skin. Those titles should be unique across the site so, something like 'YOURUSERNAME-bordertags' should do fine.
- Select and Copy ALL the code you'll find in here.
- Paste the code in the field 'CSS'
- click SUBMIT
- click USE
This color scheme will work fine with the light theme. If you want to use it on reversi you'll need to change the colors to some more suitable to a darker background.
How to customize colors
This is simple. It works with hex color codes and you can find the codes for those simply by googling 'hex color codes'! Google have a small tool color wheel that will give you those codes!
Or, idk, use Coolors.co to create nice palettes.
The codes needs to be structured like this: #ffb98a basically an hashtag and 6 characters that can be numbers or letters.
This skin uses 10 different colors: 1 for the border and then 3 colors that are in rotation for the 3 different types of tags: Relationships, Characters and Additional Tags. I personally used the Ao3 red for the border and then 3 different oranges, 3 different yellows and 3 different greys, similar enough to themselves to appear to be all part of the same tag category but different enough that I do not visually merge the tags together. But you can absolutely choose 10 wildly different rainbow colors! Just consider how text will look on them.
The 3 colors will alternate themselves in the skin.
The code itself is heavily commented, so hopefully it will be clear at first glance where to put the color codes! The comments look like this:
/*This change the Relationship Tags. Alternating 3 different colors
To Personalize this you'll need to change the code that starts with an hashtag
with a different color code!
To find different color codes just google 'Hex Color Picker'
*/
.tags li.relationships:nth-of-type(3n 1) a.tag {
background-color: #ff8e43;
}
.tags li.relationships:nth-of-type(3n 2) a.tag {
background-color: #ffa366;
}
.tags li.relationships:nth-of-type(3n 3) a.tag {
background-color: #ffb98a;
}
those #ff8e43 etc. etc? there's where you'll need to change the code.
Oh! on the subject of rainbow stuff
I also have pride flags themed skins if you prefer those. they also have tags with the border around them!