Ao3 skins
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
-
Tags
Summary
This is a personal experiment with HTML. It is a very limited list with what I find useful.
Update: Somehow I find more and more stuff useful, so this list is not that limited (and not that private) anymore. I'll improve it with time and according to my needs. I just realized, this will never be "complete" and there is no final number of chapters.So far that's posted:
Part One: Basics
Part Two: Lines
Part Three: Footnotes and Links
Part Four: Columns and Skins
Part Five: Pictures
Part Six: Videos (and gifs)
Part Seven: Choose Your Own Adventure
Part Eight: Chapter Title
Part Nine: The Title, the Username, and Links
Part Ten: Kudos Message
Part Eleven: Newspaper Article
Part Twelve: Content Notes and Spoiler (NEW: Opacity)
Part Thirteen: Playground for Jinx (glitch text, color, table)
Part Fourteen: Text generator
Part Fifteen: Boxes (still in progress)
Part Sixteen: Vertical Text
Part Seventeen: Transition (NEW) -
Tags
Summary
Got a fic where characters message each other?
Series
- Part 3 of Azdaema's AO3 Messaging Skins
-
Tags
Summary
Got a fic where characters message each other?
Series
- Part 4 of Azdaema's AO3 Messaging Skins
-
Tags
Summary
iMessage as it looked up through iOS 6.
Series
- Part 2 of Azdaema's AO3 Messaging Skins
-
grey + some kind of lavender/lilac AO3 site skin by tuples
Fandoms: AO3, Archive of Our Own
19 Sep 2020
Tags
Summary
an AO3 site skin based on a dark mode site skin that i liked by cherryblossom
but i didn't want to see my stats so i won't feel discouraged so i modified it to hide stats -
Tags
Summary
Among Us inspired chat skin for your AO3 and meme needs
Series
- Part 1 of #ao3_work_skins
-
Tide: a flat and clean skin for Ao3 by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
18 Jul 2021
Tags
Summary
A site skin for Ao3 that clean and minimal and somewhat more modern than the default skin.
Available both in dark and light mode.Series
- Part 8 of CSS code scripts for Ao3
-
Tags
Summary
※此為授權中譯版本※
※歡迎給予原作者支持與鼓勵❤※Ao3的網站版型，乾淨、簡約，比默認版型更現代風。
有深色及淺色2種版本。 -
Tags
Summary
An explanation of how to use my AO3 Mute Skin Generator to easily create skins that hide specific works or any work by a given user.
-
How to Navigate and Block AO3 Tags: An Unofficial Handy Guide of AO3’s Tagging System and Master Post for Relevant Sources by E_V_Roslyn
Fandoms: No Fandom
22 Nov 2021
Tags
Summary
I've compiled a handy guide, while also available elsewhere on AO3, is helpful to have in one place. This includes links to other sources for editing relevant site skins and user scripts.
-
Ao3 Intertitles (For All Your Silent Movie Fandom Needs) by Kitsune_Scribe
Fandoms: Archive of Our Own, No Fandom, Fandom - Fandom
31 Dec 2021
Tags
Summary
So you've decided you want to write a fic of a silent film. (And didn't immediately choose to just write it like a normal fic about silent film characters.) Here's how I make intertitles!
-
Tags
Summary
I loved ElectricAlice's Tide: a flat and clean skin for Ao3 and wanted to make the colours closer to ao3 because I am attached to reds, lol.
-
Tags
Summary
Change font, learn now. WITH IMAGES
-
Tags
-
Tags
Summary
The AO3 site skin inspired by the livejournal design. To use the skin, simply copy and paste the CSS code provided (e.g., github).
RU: Адаптация livejournal дизайна Ники для сайта ао3. Чтобы примерить скин просто скопируйте CSS code.
-
Tags
Summary
This skin will make the comments of your favorite commenters all pretty with colors and images!
5 different styles that can be modified to your tastes.
Series
- Part 14 of CSS code scripts for Ao3
-
Tags
Summary
Four Halloween themed site skins in a minimalist style in the colors purple, orange, red, and green.
-
Purple site skin but in dark mode by Badonka_shlong
Fandoms: AO3, Archive of Our Own, public site skin - Fandom
31 Dec 2022
Tags
Summary
Are you a purple lover? It’s your favourite color? Well I found a way of making everything purple but in dark mode so it won’t hurt you eyes and be too neon! I love this theme! I couldn’t change the Color of the summary tho, if anyone knows how please give me a heads up
-
Tags
Summary
quick html / css reference to writing in-person "chats" or "skits" for your html fic , while styling the skit in a way that might fit in with your html / chat fic.
(documenting how i did the skin for a particular fic, and a useful html guide overall)
this is "generic", but css could be customized to fit any fandom / video game etc.
for skits, think: tales of series, fire emblem, cookie run kingdom, etcSeries
- Part 3 of #ao3_work_skins
-
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!
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
Tags
Summary
Primarily just where I share work skin code and discuss ways to improve the Ao3 experience, including:
- Twitter and Instagram like posts
- Non iOS messaging systems
- Avatar and image formatting for script formats.
- Search engine interfaces
- Documentation on AO3 Site SkinsSeries
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
01 Jan 2026
- Words:
- 89,170
- Works:
- 20
- Bookmarks:
- 4,371
-
Tags
Summary
iMessage as it looks in iOS 7 to present.
Series
- Part 1 of Azdaema's AO3 Messaging Skins
-
Tags
Summary
For anyone who wishes AO3 had dark mode, I have great news! Dark mode has been possible since 2013, you just need to know how to apply it.
Even better news? It's easier now than it ever has been before. Tutorial inside.
You need to be logged into an AO3 account for this to work.
Series
- Part 5 of How to AO3
-
Tags
Summary
Got a fic where characters message each other?
Series
- Part 3 of Azdaema's AO3 Messaging Skins
-
Tags
Summary
A bunch of Ao3 Skins with flag pride colors!
Happy pride month!
Series
- Part 7 of CSS code scripts for Ao3
-
Tags
Summary
Documentation/Examples for the CSS workskin and HTML code for a Wikipedia article inspired layout to use in your mixed media works.
Created with help from Nautilusopus and DarthTofu.
-
Tags
Summary
A skin that makes the text rainbow and multicolored.
Sot of Beeline style.Series
- Part 6 of CSS code scripts for Ao3
-
How to make a News Website Article skin on Ao3 by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
26 Dec 2019
Tags
Summary
Live example and tutorial for a news article extract that include website header, fake social media buttons, title and author of the article.
Series
- Part 1 of CSS code scripts for Ao3
-
Tags
Summary
A simple text message format that retains basic readability even without skins enabled. Please feel free to use. Instructions included, some assembly required ;) Please feel free to comment if you have any questions or issues.
-
Tags
-
Fonts, and colors, and work skins, oh my! by Charles_Rockafellor, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: css - Fandom, Work Skins - Fandom
24 Jan 2021
Tags
Summary
Explains:
● how to make a work skin;
● how to view fics' work skin rules;
● how to colorize text and circle words and highlight backgrounds (examples in head-note), and change and resize your fonts;
● how to turn all links blue-underscore automatically;
● the CSS code for diacritics to render properly, e.g.: “ầ” & “ồ” (with diacritics not superimposed), or “ị” (with underdot directly beneath, not kerned to the left), without breaking words such as “gầu” or “vịt” (using a monotype font for these letters would create gaps to each side of the ầ or the ị). Head-note has corrected examples;
● Site Skin addenda to block / shrink tags, and block authors / works;
● even a quick way (code included) to simply make a Site Skin so that you can read everything in your font of preference!Full code is included.
I read, appreciate, and reply to all of your comments — they're always welcome!
𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️
Series
- Part 5 of How to
-
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
-
Tags
Summary
Just a quick and dirty HTML reference for AO3, with references to CSS style, HTML style, and other guides.
Series
-
Experimenting with AO3's work skins + short stories by avianofFire
Fandoms: Original Work
03 Sep 2019
Tags
-
How to Make iOS Text Messages on AO3 by CodenameCarrot, La_Temperanza
Fandoms: No Fandom
10 Apr 2016
Tags
Summary
This is a tutorial/live example on how to mimic iOS text messages on AO3 without the need to use images. There's also a chapter on how to have emojis displayed on AO3 as well.
Series
- Part 3 of AO3 Work Skins/Tutorials
-
Dyslexia friendly Site Skin by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
21 Feb 2022
Tags
Summary
A clean dyslexia skin for Ao3.
I made this following the British Dyslexia Association Style Guide and then tweaked with requests and ideas dyslexic readers brought forth.
There's a guide inside on how to further tweak everything from font to size to color so that you can customize it for your needs.Dark mode available in chapter 3!
Series
- Part 5 of CSS code scripts for Ao3
-
- Words:
- 19,151
- Works:
- 14
- Bookmarks:
- 355
-
Tide: a flat and clean skin for Ao3 by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
18 Jul 2021
Tags
Summary
A site skin for Ao3 that clean and minimal and somewhat more modern than the default skin.
Available both in dark and light mode.Series
- Part 8 of CSS code scripts for Ao3
-
Tide: a flat and clean skin for Ao3 by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
18 Jul 2021
Tags
Summary
A site skin for Ao3 that clean and minimal and somewhat more modern than the default skin.
Available both in dark and light mode.Series
- Part 8 of CSS code scripts for Ao3
- Language:
- English
- Words:
- 1,329
- Chapters:
- 1/1
- Collections:
- 3
- Comments:
- 211
- Kudos:
- 648
- Bookmarks:
- 304
- Hits:
- 45,858
Bookmarked by Izilen
06 Sep 2021
Bookmarker's Tags:
Bookmarker's Notes
Currently using a variation on this! Very pretty.
Pages Navigation
Collections which have used it as a tag:
-
AO3 CSS HTML stuff (ao3csshtmlstuff) by goldenyuri
20 Nov 2025
Collection Tags: Ao3 skins, CSS, HTML
Summary
Uuuuhhhhhh yk, stuff...?
(Open, Moderated)
-
Summary
(Open, Unmoderated)
