Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Series:
Part 5 of AO3 Site Skins
Collections:
Ao3 Skins
Stats:
Published:
2025-12-21
Updated:
2025-12-22
Words:
668
Chapters:
3/?
Kudos:
47
Bookmarks:
24
Hits:
2,780

Site Skin Add-Ons

Chapter 2: Replace the Content Icons With Text Labels

Summary:

A site skin that replaces the content icons (for warnings, completion status, relationships and ratings) in blurbs with color-coded text labels. Additionally, multiple relationship tags or ratings are no longer grouped together under one icon. For example, you will see an "F/F, F/M, M/M" label instead of the "Multi" icon if both of these types of relationships are tagged in a story.

The label colors and the text that replaces the icons can be easily customized.

Notes:

Feel free to use or edit this code any way you like, but please credit me by linking to this chapter or the GitHub repository.

Credits and inspiration:

  • I got the idea for this skin from the Flat Squares skin by milkfatzero.
  • While searching for inspiration, I also found the Blurb icons to text add-on skin by memorizingthedigitsofpi. She had a kind of similar idea, so check it out if my skin isn't exactly what you're looking for.

(See the end of the chapter for more notes.)

Chapter Text

Please note that I have minimized the labels for warnings in work blurbs, as the warnings can also be found in the tags and there is no need to duplicate them. Therefore, there are now only labels for general warnings or for "Creator chose not to warn" (CNTW).

 

Preview Images

Warning for dark mode users: The images are quite bright.

Click here to see the previews

One relationship type - before:

Work blurb with text labels instead of content icons

One relationship type - after:

Work blurb with text labels instead of content icons

Multiple relationship types - before:

Work blurb with text labels instead of content icons

Multiple relationship types - after:

Work blurb with text labels instead of content icons

 

How to Add and Customize This Skin

General instructions on how to add, combine and customize a site skin are in Chapter 1 of this work.
The code for this skin is here on GitHub (there are buttons at the top that let you copy or download the whole file).

For the colors, I chose the default colors of the AO3 icons, but you can easily change them in the upper section of the code by replacing the hex codes (for example: #78A700 ist the color for Gen) there with other hex or rgb(a) codes. I commented there which color belongs to which label. If you accidentally deleted the comments, just grab the commented version of the code from the repository again.

You can also change the names of the labels by replacing the text that is always behind content: and between quotation marks.

Notes:

If you find any errors while using the code shared here, you are welcome to report them to me. But please check first if you are using the latest version from the GitHub repository and update your skin if you aren't—maybe the issue has already been fixed.

Please also specify the device, operating system, and browser that you are using, as well as whether you combined the code with another site skin.

If you want to like/reblog this skin on tumblr, you can find the tumblr post here.