CSS
This tag belongs to the Additional Tags Category.
Parent tags (more general):
This tag has not been marked common and can't be filtered on (yet).
Works which have used it as a tag:
Pages Navigation
-
Skin for Recreating Bowser’s Inside Story DX’s Stats Display by SpookyTesting (FierySprites)
Fandoms: Super Mario & Related Fandoms, Mario & Luigi Series (Video Games)
17 Sep 2023
Tags
Summary
A work skin for recreating the Star Menu stats display from Mario & Luigi: Bowser’s Inside Story + Bowser Jr.’s Journey.
-
Skin for Recreating Discord’s Server Member List by SpookyTesting (FierySprites)
Fandoms: No Fandom
21 Sep 2023
Tags
Summary
A work skin for recreating the server member list used by the social platform Discord, circa September 2023.
-
[Site Skin] Keep Calm and Call Five-0 by orphan_account
Fandoms: Hawaii Five-0 (2010), Archive of Our Own
25 Sep 2023
Tags
Summary
The AO3 site skin that suits the devices with the resolution more than 1024 х 768. To use the skin, simply copy and paste the CSS code provided (e.g., github).
RU. Аннотация
Фандомный скин для сайта ао3. Подходит для устройств с разрешением экранов 1024 х 768 и выше. Чтобы использовать скин, просто скопируйте код (e.g., github).
-
Tags
Summary
The AO3 site skin that suits both mobile and desktop devices. To use the skin, simply copy and paste the CSS code provided (e.g., github).
RU. Аннотация
Скин для сайта ао3. Подходит как для мобильных телефонов, так и для десктопных устройств. Чтобы использовать скин, просто скопируйте код (e.g., github).
-
Skin for Recreating Persona Q2’s Dialog Select Box by SpookyTesting (FierySprites)
Fandoms: Persona Series, Persona Q2: New Cinema Labyrinth
26 Sep 2023
Tags
Summary
A work skin for recreating the dialog selection speech bubble from Persona Q2: New Cinema Labyrinth, along with the ability to add working hyperlinks.
-
Tags
Summary
A tutorial + live example on how to recreate Ao3 on mobile in your Ao3 fic using CSS and HTML.
Series
- Part 2 of Cool Coding Kumquats
-
Tags
Summary
Dark skin with a dash of yellow
-
Tags
Summary
Base from Reversi, grey text asset taken from Dark mode skin + extra features
Very lazily made.
-
Tags
Summary
A moderately spooky scary site skin for Halloween!
-
Mystery Work
Part of storage locker
Summary
This is part of an ongoing challenge and will be revealed soon!
-
Tags
Summary
Dark skin with pastel gradients
-
Tags
Summary
A work skin tutorial of a Rate My Professor page in AO3 (old UI).
See Chapter 1 for examples of the work skin, Chapter 2 for the complete CSS code of the work skin and step-by-step instructions on how to use a work skin, Chapter 3 for the HTML code template and Chapter 4 for explanation on how it all works.
-
Скин для воспроизведения страницы Фикбука на AO3 by Anonymous
Fandoms: No Fandom, Archive of Our Own, русреал - Fandom, Король и Шут | Korol i Shut (Band)
28 Oct 2023
Tags
Summary
Это сверстанный шаблон страницы фикбука (с подключаемым скином и гайдом по применению) в формате «фика внутри фика» для всех, кто пишет в русреаловых сеттингах и хотел бы таким образом добавить своим работам аутентичности.
Тег фандома стоит из-за фрагмента с примером.
-
Skin for Recreating Super Mario Galaxy’s Star Select by SpookyTesting (FierySprites)
Fandoms: Super Mario & Related Fandoms, Super Mario Galaxy
23 Oct 2023
Tags
Summary
A work skin for recreating the Star Select screen from Super Mario Galaxy.
-
Tags
Summary
A template for making a playable Murdle with an interactive grid and cards.
-
Tags
Summary
Blocks most Taboo/Controversial Tags and Warnings permanently for your AO3 account without third party add-ons.*
Have you ever wanted to simply not see any of the squicky fics you come across in search? Are you tired of adding tag after tag to the "Exclude" filter every time you come to the site?
I've got the solution!
A blocklist to be used with the Permablocking Specific Tags - Site Skin tutorial by Eli0t
*browser dependent
Updated: May 5th, 2025, to include specific Corrective Rape tropes where they aren't covered by the Major Archive Warnings.
-
RevLine Site Skin by DanganRonpaNextGenFics, DRNGF Old n Unrelated Works (DanganRonpaNextGenFics), littletoes101
Fandoms: No Fandom
27 Dec 2024
Tags
Summary
A site skin which combines Reversi & ByLine, and uses the Blurblings Shipper code too. I also made a few teensy tweaks and edits with colors but literally only on the work tags and nothing else. Check out the image within for an example!
-
How to create your work skins to have colored text by Goddess_of_the_arena
Fandoms: css - Fandom, Work Skins - Fandom, HTML - Fandom, AO3 help - Fandom
22 Feb 2025
Tags
Summary
This is a guide to make text in color, be it for a single word, a full paragraph, several paragraphs in a row, or even the whole chapter, also in different sizes. The tutorial also contains ready-to-use codes for you to add to your work skins.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 is for pure colored text.
CHAPTER 2 is for text in gradient color, both linear gradient and radial gradient.
CHAPTER 3 contains the steps to combine gradient background with gradient text. It also contains the links to each of the other guides of my CSS GUIDES series
CHAPTER 4 contains the links to eight sites where you can create your gradients and get the ready-to-copy code to paste in the CSS code of the workskin.Series
- Part 1 of CSS GUIDES
-
[Site skin] Butterflies (green) by orphan_account
Fandoms: No Fandom, Archive of Our Own
06 Nov 2023
Tags
Summary
The AO3 site skin that suits both mobile and desktop devices. To use the skin, simply copy and paste the CSS code provided (e.g., github).
RU. Аннотация
Скин для сайта ао3. Подходит как для мобильных телефонов, так и для десктопных устройств. Чтобы использовать скин, просто скопируйте код (на github).
-
[Site skin] Butterflies (purple) by orphan_account
Fandoms: No Fandom, Archive of Our Own
04 Nov 2023
Tags
Summary
The AO3 site skin that suits both mobile and desktop devices. To use the skin, simply copy and paste the CSS code provided (e.g., github).
RU. Аннотация
Скин для сайта ао3. Подходит как для мобильных телефонов, так и для десктопных устройств. Чтобы использовать скин, просто скопируйте код (на github).
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
Tags
Summary
Is it possible to create a piece of interactive fiction on AO3 that mimics a time loop? With a complex workskin, the answer is yes!
-
Tags
Summary
This is a tutorial/live example on how to align images to the left or right of the screen and have text wrap around them.
Series
- Part 13 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 2,891
- Chapters:
- 1/1
- Collections:
- 4
- Comments:
- 10
- Kudos:
- 156
- Bookmarks:
- 136
- Hits:
- 11,576
Bookmarked by ferager
10 May 2024
Bookmarker's Tags:
Bookmarker's Notes
How to Wrap Text around Images
La_Temperanza -
Tags
Summary
Bored with the default page dividers? This is a tutorial/live example on how customize your page dividers with no images needed (though I do show you how you could use images if you wanted to do such a thing).
Series
- Part 9 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 2,156
- Chapters:
- 1/1
- Collections:
- 7
- Comments:
- 92
- Kudos:
- 1,398
- Bookmarks:
- 910
- Hits:
- 60,663
Bookmarked by ferager
10 May 2024
Bookmarker's Tags:
Bookmarker's Notes
How to Make Customized Page Dividers
La_Temperanza -
CSS in Testing by InfinitysWraith
Fandoms: Ao3 Skins - Fandom, Work Skins - Fandom, css - Fandom
18 Apr 2022
Tags
Summary
This is a flaming dumpster filled with CSS and HTML experiments. It's not instructional, but I post the code and my own explanations for both our sakes. Feel free to steal the code or ask me questions- I don't know what I'm doing. :)
(Pics are mine though)
Chapter 5 is probably what you're looking for ;)
I'm not going to say I take requests, but I'm always looking for inspiration.
It seems I've broken Ao3 yet again. I can no longer add more code to my work skin so we're moving on to part two!
Series
- Part 1 of CSS in Testing
-
Css in Testing: Second in the Series by InfinitysWraith
Fandoms: Ao3-Skins, Work-Skins, css - Fandom
22 Aug 2023
Tags
Summary
𝔚𝔢𝔩𝔠𝔬𝔪𝔢 𝔱𝔬 𝔭𝔞𝔯𝔱 𝔱𝔴𝔬 𝔬𝔣 𝔴𝔥𝔞𝔱 𝔦𝔰 𝔫𝔬𝔴 𝔞𝔭𝔭𝔞𝔯𝔢𝔫𝔱𝔩𝔶 𝔞 𝔰𝔢𝔯𝔦𝔢𝔰 𝔟𝔢𝔠𝔞𝔲𝔰𝔢 ℑ 𝔟𝔯𝔬𝔨𝔢 𝔰𝔬𝔪𝔢𝔱𝔥𝔦𝔫𝔤 𝔦𝔫 𝔪𝔶 𝔩𝔞𝔰𝔱 𝔚𝔬𝔯𝔨 𝔖𝔨𝔦𝔫 𝔞𝔫𝔡 𝔠𝔞𝔫'𝔱 𝔞𝔡𝔡 𝔞𝔫𝔶𝔱𝔥𝔦𝔫𝔤 𝔪𝔬𝔯𝔢 𝔱𝔬 𝔦𝔱 :)
𝔜𝔬𝔲'𝔯𝔢 𝔴𝔢𝔩𝔠𝔬𝔪𝔢 𝔱𝔬 𝔞𝔰𝔨 𝔮𝔲𝔢𝔰𝔱𝔦𝔬𝔫𝔰, 𝔰𝔱𝔢𝔞𝔩 𝔠𝔬𝔡𝔢 𝔬𝔯 𝔬𝔣𝔣𝔢𝔯 𝔪𝔢 𝔦𝔫𝔰𝔭𝔦𝔯𝔞𝔱𝔦𝔬𝔫. 𝔍𝔲𝔰𝔱 𝔡𝔬𝔫'𝔱 𝔱𝔞𝔨𝔢 𝔪𝔶 𝔞𝔯𝔱𝔴𝔬𝔯𝔨 𝔴𝔦𝔱𝔥𝔬𝔲𝔱 𝔞𝔱 𝔩𝔢𝔞𝔰𝔱 𝔩𝔦𝔫𝔨𝔦𝔫𝔤 𝔪𝔢 𝔶𝔬𝔲𝔯 𝔣𝔦𝔠 ;)
ℑ𝔣 𝔶𝔬𝔲 𝔥𝔞𝔳𝔢𝔫'𝔱 𝔞𝔩𝔯𝔢𝔞𝔡𝔶, 𝔱𝔞𝔨𝔢 𝔞 𝔩𝔬𝔬𝔨 𝔞𝔱 𝓟𝓪𝓻𝓽 𝓞𝓷𝓮 𝔣𝔬𝔯 𝔪𝔬𝔯𝔢 𝔭𝔯𝔬𝔧𝔢𝔠𝔱𝔰.
Click me!
Ao3 done unleashed a monster right here and it's goddamn beautiful.
Series
- Part 2 of CSS in Testing
-
Decorations for Fic (HTML/CSS): Fan Art, Dividers, Embedded Songs, and More by Jnsn
Fandoms: No Fandom, Archive of Our Own
24 Jul 2021
Tags
Summary
NON-FICTION. This work shows some examples of use of HTML/CSS to decorate a fic with art and other things. The second chapter provides the HTML for each example.
- Language:
- English
- Words:
- 3,825
- Chapters:
- 3/3
- Collections:
- 2
- Comments:
- 8
- Kudos:
- 197
- Bookmarks:
- 154
- Hits:
- 4,692
Bookmarked by Rierse
14 May 2024
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
How make that fic fabulous!
-
Stats Icons with Hover Text [Site Skin] by ZerafinaCSS (Zerafina)
Fandoms: No Fandom, Site Skins - Fandom
06 May 2024
Tags
Summary
A site skin that replaces stats labels like "words", "bookmarks" and "hits" with icons. Instead, the text is displayed when you hover the mouse pointer over the icon or tap on it on mobile (like a tooltip). Available for light and dark mode. You can also change the icons to any color you want!
Previews and installation instructions are included.
Latest update: 05 March 2025
Series
- Part 2 of AO3 Site Skins
- Language:
- English
- Words:
- 874
- Chapters:
- 2/2
- Collections:
- 1
- Comments:
- 21
- Kudos:
- 54
- Bookmarks:
- 34
- Hits:
- 3,025
Bookmarked by ferager
21 May 2024
Bookmarker's Tags:
Bookmarker's Notes
Stats icons with hover text [Site skin]
ZerafinaCSS (Zerafina) -
Tags
Summary
This is an example story to demonstrate some CSS formatting options on the Archive. Click the "Hide Creator's Style" button and check out the related tutorial to see how it's done.
Bookmarked by Amphisbayna
25 May 2024
Bookmarker's Tags:
Bookmarker's Notes
Divide text into columns and spoilers
-
How to Block Tags With Site Skins (And Get Real Specific About It) by najio
Fandoms: No Fandom
25 Jun 2025
Tags
Summary
Just some info I've gathered over the past couple of weeks, about how to:
1. Block tags using Site Skins, block only fics that contain both tag A and tag B, and block fics with a tag that contains a certain phrase, unless they are a specific whitelisted tag
2. Highlight the tags in pretty colors! Or bold, or hide them!
3. Block mega-crossovers with a million different fandoms
4. Select for/block fics that are completed/rated something/have a certain category/don't have summaries
5. Block everything that doesn't have a certain tag, or one of a list of tags
6. Block orphan_account and tag block by author
7. Block only tags of specific types (fandoms, relationships, freeforms, etc.)
8. Block fics focused on original characters, and/or fics without any tags of a specific type
9. Block every pairing with two characters in it—case insensitive, any order, no matter how many other people are also in the tag
10. Block by number of tagsSeries
- Part 1 of Site Skins and CSS Quackery
- Language:
- English
- Words:
- 16,365
- Chapters:
- 25/25
- Collections:
- 2
- Comments:
- 427
- Kudos:
- 460
- Bookmarks:
- 502
- Hits:
- 21,495
Bookmarked by ferager
30 May 2024
Bookmarker's Tags:
Bookmarker's Notes
How to Block Tags With Site Skins (And Get Real Specific About It)
najio -
Tags
Summary
Use this code to create a link to a specific passage or scene in the middle of a chapter.
-
How to Make Invisible Text (That Can Be Highlighted) by La_Temperanza
Fandoms: No Fandom
21 Oct 2015
Tags
Summary
This is a live example how to make invisible text that can only be seen by highlighting the text. Tutorial is included in text, and you can always leave comments about questions you may have.
MOBILE USERS: Sadly, this probably won't work for you, since highlighting in a mobile browser is different than web. I've tried correcting this, but have yet to find a solution.
Series
- Part 4 of AO3 Work Skins/Tutorials
-
Tags
Summary
This is a tutorial/live example on how to create a "Choose Your Own Adventure" fic. While this has been explained before (see here), this particular tutorial shows you how to use a work skin to hide the next parts from the reader until they click through to get to them.
Series
- Part 16 of AO3 Work Skins/Tutorials
-
Tags
Summary
A Quick Guide to Making Translations Accessible on AO3
-
Tags
Summary
Newspaper work skin with responsive columns so it works on desktop AND mobile baby!
Series
- Part 2 of Works Skins
-
Tags
Summary
A Reddit template for use on AO3.
-
Tags
Summary
I made a couple of site skins (featuring a light mode and a dark mode!) that don't majorly change Ao3's UI but improve the UX/readability by adjusting a lot of little things: creating scroll boxes for sections that often have long text walls like tag fields and skin code, removing superfluous stuff like the "See end of work for more notes" and "You have muted users on the archive so not all fics will appear" notices, adding borders onto and more blank space between works and various tag/text categories, moving works' dates to the bottom of the blurb to make more room for the title and author text (especially for mobile!!), and much much more!
The skins are written out in a copy-able text doc so you can edit it yourself, and each part of the code has a note from me explaining what it actually does, all to make for easy customizing (even if you aren't familiar with CSS)!
See inside for the skins, screenshots of what they look like, details on how to edit them, and links to fully credit other users' skins that I copied elements of into my own!
- Language:
- English
- Words:
- 845
- Chapters:
- 1/1
- Collections:
- 1
- Comments:
- 8
- Kudos:
- 52
- Bookmarks:
- 27
- Hits:
- 2,891
Bookmarked by ferager
21 Jun 2024
Bookmarker's Tags:
Bookmarker's Notes
"Minor QoL Changes" Site Skins for Ao3
kadoodles -
How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile) by La_Temperanza
Fandoms: No Fandom
22 May 2017
Tags
Summary
This a tutorial/live example on how to have text change or appear once a cursor is hovering over it. Helpful for pop-up spoilers, language translations, quick author's notes, etc.
Series
- Part 15 of AO3 Work Skins/Tutorials
-
How to Override the Archive's Automated Chapter Headers by C Ryan Smith (AiedailEclipsed)
Fandoms: No Fandom
25 Nov 2018
Tags
Summary
This is a tutorial/live example on how to override the Archive's automated chapter heading system and define your own (eg remove "Chapter 1: Chapter Title" and insert "Act 1, Verse 1" instead).
-
- Words:
- 16,383
- Works:
- 8
- Bookmarks:
- 623
-
Skin for Recreating Unlocked Achievements by SpookyTesting (FierySprites)
Fandoms: No Fandom
17 Feb 2024
Tags
Summary
A work skin for recreating the Achievement/Trophy Unlocked messages from various systems, including PlayStation and Xbox.