just saw one of your screenshot showing the ao3 tags, just wanted to ask and know how were you able to add emojis and change the colors of the tags (as well the relationship tag and etc.)? it looks fantastic and amazing!!! if you have a tutorial on it i am very grateful and you have saved my reading life!!!
I do provide custom CSS styling as a service (not AO3, rates in bio), so hopefully this isn’t counterintuitive to my freelance hustle, but I also believe in the gift culture built around AO3. So, I’ll try to give you the basic tools to understand this yourself and encourage you to explore further. However, I feel I have to toe the line here. I am 100% willing to build it for someone, help troubleshoot, or provide some 1:1 specific guidance (information at the bottom).
This is not straightforward or easy to answer, so I’ll do my best, but please feel free to ask for clarification if anything is unclear.
Or, maybe it is, and I’m just overthinking.
Let’s find out!
First, this is done at the Siteskin level. Second, there are actually two sets of tags you need to be aware of: li tags, which are most of the site - your works page, searching, etc, and dd tags, which only exist in the work itself.
Now, why is this relevant? - li tags can have the ‘has’ statement to apply a blanket style (eg, any relationship tag has a / and is therefore prefaced by a heart) - dd tags must be specific and cannot use has statements.
Within the li tags, there are the following sets to be aware of:
Fandom Tag - the one LI tag that must be specific IME
Relationship tag
Character tag
Freeform tag
To set a style for an li tag - specifically, let’s do the romantic relationship tag, you need to invoke this at the siteskin level. Tags run off the URL, and that slash can, naturally, interfere with URLs, so for tag URLs that contain a slash, you’ll use the following text: ‘*s*’. From there, just specify the colour. In this case, I am using a medium pink with a dark pink text colour.
To add the emoji beforehand, you need to cite it. Not all emotes work within AO3, and some require knowing their HTML ID. Luckily, Heart works just fine. To set it before the tag text, you’ll need to specify ‘::before’, which means it will need to be its own separate entry
Now for the dd tags. These are the tags from within the fic itself, which include the following types:
Rating
Category
Warning
Fandom
Relationship
Character
Freeform
Aside from the slight name difference and the incredibly specific nature of the tah, meaning you need the URL of the specific tag, they behave the exact same way. But luckily, you can use commas to separate these, so you don’t have to make an entirely separate statement to be invoked before your first curly bracket.
Beyond this, I’d like you to use your browser’s Inspect Element feature to identify the elements you want to change and find colour schemes that work best for you and your visual interpretation of data.
Again, I’m happy to clarify anything unclear and provide guidance on a 1:1 basis (you can DM me or join one of my servers). I have my rates in my bio for custom Carrds and other CSS stylings. While I haven’t done it for AO3 to date, there is significant ground to cover with Tags. There’s no reason to pay for this kind of work when you can find and edit it 100% in AO3; however, if you’d rather not expend the effort, we can talk.
