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
-
Tags
Summary
AO3 site skin in purple and teal gradients. Font is Lucida Sans in black on a background gradient from white to teal to purple. AO3 logo is replaced by Archive of our own. Header and footer are both a purple to teal gradient. Tags are in purple except for relationship tags which are bolded and teal blue.
-
Tags
Summary
Simple 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. Подходит как для мобильных телефонов, так и для десктопных устройств. Чтобы использовать скин, просто скопируйте код.
-
Momo’s Ace Attorney Colored Text Workskin by Axolotl_Supremacy
Fandoms: 逆転裁判 | Gyakuten Saiban | Ace Attorney
02 Jul 2023
Tags
Summary
Have you ever wanted to color your text in an Ace Attorney fanfic like they do in the actual games?
Well, with this work skin…you totally can!
_______________________________________
A tutorial on how I color my text for my Maya Fey Defense Attorney AU and other case fics. -
Skin for Recreating Return to Dream Land’s Boss Bios by SpookyTesting (FierySprites)
Fandoms: Kirby (Video Games)
12 Jul 2023
Tags
Summary
A work skin for recreating a simplified version of the Boss Bios/Special Pages from Kirby’s Return to Dream Land Deluxe.
-
Tags
Summary
A work skin for text messages.
In particular, this uses outlines/borders to avoid specifying background colors, so that users of Reversi can see the work in dark mode and users with the standard AO3 look and feel can read the story in light mode.
Chapter two now lets you pick more chat bubble outline colors for your group chat needs!
-
Tags
Summary
A tutorial + live example on how to create comic text effects/callouts on Ao3 using CSS.
Series
- Part 1 of Cool Coding Kumquats
-
Tags
Summary
I just wanted to share my custom dark modes for AO3 in case someone wanted to try them.
So far, the themes are:
→ Pink Roses - A Dark Green Theme
→ Star Lost - A Dark Starry Theme
→ Deep Ocean - A Dark Turquoise Theme (With Animated Buttons)The instructions are included and they are super easy - as long as you can copy and paste.
-
[Site Skin] Love Supreme by fandom BUCK-TICK 2023 (fandom_BUCK_TICK)
Fandoms: BUCK-TICK, Archive of Our Own
04 Aug 2023
Tags
Summary
Фандомный скин для сайта ао3. Подходит для устройств с разрешением экранов 1024 х 768 и выше. Чтобы использовать скин, просто скопируйте код (e.g., github).
EN. 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).
-
[Site Skin] Unforgettable moments by fandom BUCK-TICK 2023 (fandom_BUCK_TICK)
Fandoms: BUCK-TICK, Archive of Our Own
04 Aug 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).
-
How to insert html/css comments in your fic that still look good after you download them by Magnolia_in_black_Velvet
Fandoms: No Fandom
16 Aug 2023
Tags
Summary
a guide to inserting comments into your fics that will still look good when you download the fic (and all the css is stripped from it)
Series
- Part 1 of Magnolia's adventures in CSS
-
one spot, two spot, red spot, wrong spot by mystyrust
Fandoms: Miraculous Ladybug, Batman - All Media Types
18 Aug 2023
Tags
Summary
my plan is to find out the identity of hawkmoth and gift wrap it for ladybug
Tim’s investigation into the identity of Hawkmoth lands in the wrong spot -- and a punch in the face from Ladybug.
Series
- Part 1 of the domino effect
-
Tags
Summary
Instead of finishing my fanfic, I created an AO3 site skin that was inspired by the Barbie movie - or at least the pink aesthetic. Enjoy!
-
Tags
Summary
Long ago I heard a tale, of a god who became a girl.
(Long ago I heard a tale, of a girl who became a god.)
When up it woke in the realm of man, to spare a dying world.
(When down she fell where lost things dwell, to the place where all is naught.)
But away it hid for fear that it, would decide that it belonged
For to live is to be afraid, and to love is to suffer loss.(As all of time left her behind, and its meaning left her head)
(She mourned the life lost far too soon, wishing simply for an end.)‘Till daybreak brought to light all of, the lies within its soul.
And it began to see that it, could once again be whole.(But when her tears ran dry, and the darkness took her name)
(She began to weave the light into, a fate for her to claim.)A̷̷f̷̷t̷̷e̷̷r̷ ̷a̷ ̷t̷̷i̷̷m̷̷e̷ ̷b̷̷o̷̷t̷̷h̷ ̷g̷̷o̷̷d̷ ̷a̷̷n̷̷d̷ ̷g̷̷i̷̷r̷̷l̷ ̷c̷a̷̷m̷̷e̷ ̷t̷̷o̷ ̷r̷̷e̷a̷̷l̷̷i̷̷z̷̷e̷ ̷w̷̷h̷a̷̷t̷ ̷w̷a̷̷s̷ ̷t̷̷r̷̷u̷̷e̷,̷
W̷̷h̷̷e̷̷n̷ ̷t̷̷h̷̷e̷̷y̷ ̷l̷̷o̷̷o̷̷k̷̷e̷̷d̷ ̷i̷̷n̷̷t̷̷o̷ ̷t̷̷h̷̷e̷ ̷m̷̷i̷̷r̷̷r̷̷o̷̷r̷,̷ ̷a̷̷n̷̷d̷ ̷t̷̷h̷̷e̷̷y̷ ̷b̷̷o̷̷t̷̷h̷ ̷s̷a̷̷i̷̷d̷ ̷“̷██████”̷Series
- Part 1 of The Infinite Tapestry
-
How to make your fic look like the game by MelsShenanigans, ThoughtsCascade
Fandoms: I Was a Teenage Exocolonist (Video Game)
06 Sep 2023
Tags
Summary
Tried to make it mobile friendly but of course it looks better on desktop.
Based on screenshots of the game but not exactly the same yet recognizable.
-
Lyss's Left 4 Dead Site Skin by Lyssavirus
Fandoms: Left 4 Dead (Video Games), Archive of Our Own
31 Aug 2023
Tags
Summary
A Left 4 Dead themed whole site skin full of game assets and easter eggs!
[EDIT 06/11/25: Images are re-hosted and the skin is fixed, with only minor bugs! Those are being gradually whacked, reporting them to me via comment is appreciated!] -
Lyss's Left 4 Dead Work Skin by Lyssavirus
Fandoms: Left 4 Dead (Video Games), Archive of Our Own
06 Sep 2023
Tags
Summary
A Left 4 Dead-themed work skin! Type in the ingame subtitle colors of the characters, and more! Pairs great with my L4D site skin.
[EDIT 06/12/25: Images are re-hosted and the skin is fixed!] -
Tags
Summary
Some of the site skins i made for ao3 because i was bored :)
-
Skin for Recreating Paper Mario’s Menu Screens by SpookyTesting (FierySprites)
Fandoms: Super Mario & Related Fandoms, Paper Mario Series (Video Games)
20 Sep 2023
Tags
Summary
A work skin for recreating several of the menu screens from Paper Mario, as seen in the ROM hack Paper Mario TTYD 64.
For convenience’s sake, the last chapter contains all of the CSS code in one place.
-
Skin for Recreating TTYD’s Mailbox SP by SpookyTesting (FierySprites)
Fandoms: Super Mario & Related Fandoms, Paper Mario Series (Video Games)
30 May 2024
Tags
Summary
A work skin for recreating the Mailbox SP display from Paper Mario: The Thousand-Year Door—both the 2004 and 2024 versions.
-
Tags
Summary
Dark skin with a dash of pink
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
Mystery Work
Part of jail time!
Summary
This is part of an ongoing challenge and will be revealed soon!
-
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).
-
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
Example and instructions on how to mimic AO3 comments in a fic.
-
Tags
Summary
Example and basic code for making some text hidden or optional on Ao3 using details and summary tags
Bookmarked by TETRACIDE
08 Jan 2024
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
Work/Series Details
Very basic how to: hide text (spoilers) on Ao3 by FidgetScribbles
Published: 2023-04-19
Work/Series ID: 46611205Relationship Tags:
• No Relationship Tags
Work/Series Summary:
Example and basic code for making some text hidden or optional on Ao3 using details and summary tags
(Approximate) Last Read: 2024/01/08
-
Azdaema's AO3 Messaging Skins by Azdaema, Azdaema Codes (Azdaema)
Fandom: AO3 fandom, No Fandom
20 Apr 2021
Summary
There's some really interesting social subtext in characters' choice of messaging app. It depends on their cultural background, their generation, and the context.
- Words:
- 6,266
- Works:
- 4
- Bookmarks:
- 85
Bookmarked by ferager
23 Feb 2024
Bookmarker's Tags:
Bookmarker's Notes
Azdaema's AO3 Messaging Skins
Azdaea, Azdaema Codes (Azdaema) -
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
- Language:
- English
- Words:
- 4,500
- Chapters:
- 2/2
- Collections:
- 7
- Comments:
- 368
- Kudos:
- 3,406
- Bookmarks:
- 3,297
- Hits:
- 144,326
Bookmarked by ferager
23 Feb 2024
Bookmarker's Tags:
Bookmarker's Notes
How to Make iOS Text Messages on AO3
CodenameCarrot, La_Temperanza -
Tags
Summary
Text convos with bubbles in several systems!
IOS, Signal and WhatsApp for nowSeries
- Part 1 of Works Skins
- Language:
- English
- Words:
- 2,627
- Chapters:
- 3/?
- Collections:
- 2
- Comments:
- 15
- Kudos:
- 132
- Bookmarks:
- 121
- Hits:
- 5,378
Bookmarked by ferager
23 Feb 2024
Bookmarker's Tags:
Bookmarker's Notes
Text Chats
lordvoldemortsskin (lordvoldemortsnipple)Best skin for text convos that I have found
-
Mystery Work
Part of jail time!
Summary
This is part of an ongoing challenge and will be revealed soon!
-
Tags
Summary
A dark site skin with flat buttons and elements, made using Dracula UI color palette.
Also I took some ideas from Tide: a flat and clean skin for Ao3 by ElectricAlice. -
Workskin for showing and hiding spoilers by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
29 Aug 2021
Tags
Summary
A very simple workskin to hide/show spoilers in your works by having your users clicking on a button!
Series
- Part 9 of CSS code scripts for Ao3
-
Tags
Summary
Some fandoms have different names according to localizations (or adaptations) and some fans prefers the characters being called in one way and some in other ways. This is a workskin that allows you to write the fic with both name that can alternate thanks to toggling the workskin on and off!
Series
- Part 13 of CSS code scripts for Ao3
-
How to Mimic Letters, Fliers, and Stationery Without Using Images by La_Temperanza
Fandoms: No Fandom
27 Jul 2017
Tags
Summary
This is a tutorial/live example on how to mimic the look of letters, fliers, and stationery (as well as other forms of written media) without using images. For all your epistolary fic needs.
Series
- Part 17 of AO3 Work Skins/Tutorials
-
Tags
Summary
This is a tutorial/live example on how to mimic social media in an AO3 work, specifically Twitter, Reddit, and LiveJournal.
-
Replace the AO3 Icons [Site Skin] by ZerafinaCSS (Zerafina)
Fandoms: No Fandom, Site Skins - Fandom
31 Mar 2024
Tags
Summary
A site skin that replaces the AO3 icons with new ones in a higher resolution. Their appearance is largely based on the original images, but has been slightly modified to give them a flatter and cleaner look.
The following color schemes are available:
- Default (with black or white text)
- Muted/darkish
- Black and white
- Pastel
- Pink
Preview images and installation instructions are included. I have also added instructions for changing the logo color.
Latest update: 25 November 2024
Version 2.0 of this skin is available here.
Series
- Part 1 of AO3 Site Skins
- Language:
- English
- Words:
- 789
- Chapters:
- 1/1
- Collections:
- 1
- Comments:
- 42
- Kudos:
- 84
- Bookmarks:
- 58
- Hits:
- 4,821
Bookmarked by ferager
15 Apr 2024
Bookmarker's Tags:
Bookmarker's Notes
Replace the AO3 icons and default images [Site skin]
ZerafinaCSS (Zerafina) -
Tags
Summary
Among Us inspired chat skin for your AO3 and meme needs
Series
- Part 1 of #ao3_work_skins
-
Tags
Summary
How to embed youtube videos on ao3 and style them to scale on smaller screens, therefore having no side scrolling (completely mobile compatible)
-
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.
-
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.