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
This work skin removes the added space between embedded images. This can be used to create a panorama effect by visually stitching together separate image files, side-by-side or one on top of the other.
-
Tags
Summary
Цей скін додає описи для основних елементів інтерфейсу ао3.
Він створений для того, аби новим користувачам було легше звикнути до архіву та його можливостей.
(в роботі, оновлюється)
(для зв'язку коментарі або твіттер @twi_marafel) -
Tags
Summary
Work skin for a fic I am co-authoring called "TOTAL CHAOS"
Skin made by me, but fic is written by dreamVoyager and FanaiTazunipa
Type in colour, type in boxes, black backgroundThis work skin is based of a Homestuck work skin, so Homestuck is tagged as a fandom
-
Tags
Summary
Skin I made as a gift and to commemorate the wife joining ao3 (finally)
-
Tags
Summary
A site skin to replace the default icons and images around Ao3. The icons have been styled to be softer and more rounded than the default. Includes instructions and 12 different color variants.
-
How to create a work skin to have different fonts and colors in your works by Goddess_of_the_arena
Fandoms: css - Fandom, HTML - Fandom, Work Skins - Fandom, AO3 help - Fandom
30 May 2024
Tags
Summary
This is a tutorial on how to use different fonts on Ao3, how to make them in different sizes and how to make them colored as well.
It also contains two ready-to-use codes to give your fonts a gradient effect. There are both the code for the linear gradient effect and the code for the radial gradient effect.
CHAPTER 2 contains the visual examples of every font that you find in chapter 1.
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.Series
- Part 2 of CSS GUIDES
-
Tags
Summary
The AO3 site skin (suits all devices). To use the skin, simply copy and paste the CSS code. For a preview, see this github post. Alternatively, look inside this work for more screenshots and the code.
-
Tags
Summary
Various fun CSS effects. Outlined text, shadow, condensed, expanded, blurry, even blurrier, smeared, mirrored, upside down, rainbow, neon, and highlight. Probably more to come! All of these are free to use and you do not need to credit me at all. Have fun formatting your works! <3
Series
- Part 1 of My Code Snippets
-
Tags
Summary
A little demo for my build-a-divider tool.
-
It's Family Business! by Clunityne, emptysuits (madocallie)
Fandoms: Disney's Toontown Online (Video Game)
29 Aug 2024
Tags
Summary
It's 2003, and Allan Bravecog has a brilliant idea. He just needs to make it real.
(Best viewed on desktop)
UPDATE: Now with a "Making-Of" chapter!
-
Tags
Summary
A custom AO3 site skin inspired by Hello Kitty!
Cute, pink, and pastel. Works on both desktop and mobile!
Series
- Part 2 of my ao3 skins
-
Workskin for Switching Between Official Names and the Fan Translation Names for Investigations 2 Characters by QuailFence
Fandoms: 逆転裁判 | Gyakuten Saiban | Ace Attorney
22 Sep 2024
Tags
Summary
Use both the official names and the fan translation names in your fic with this handy workskin
-
[Site Skin] Coffee House "Little Kitty Cat" by MMagg
Fandoms: No Fandom, Archive of Our Own
20 Jun 2024
Tags
Summary
The AO3 site skin (suits all devices). To use the skin, simply copy and paste the CSS code. For a preview, see this github post. Alternatively, look inside this work for more screenshots and the code.
-
Tags
Summary
a dark brown theme with yellow and lighter brown accents that i made because i wanted a darker theme but reversi was too dark and bland for my tastes lol
-
How to create a work skin to highlight your text and create text boxes by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, AO3 help - Fandom, Work Skins - Fandom
25 Dec 2024
Tags
Summary
This guide will help you create your own work skins to add highlighted text and text boxes to your stories.
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 highlight text (also in gradient colors!) and mixing highlight text with colored text and new fonts. You can also give the text the appearance of having been redacted by making it appear as a block of solid black.
CHAPTER 2 Text boxes, Deadpool's thought boxes and green-on-black text in the Matrix movies, making the border, text and background of your text box be in gradient colors and making the border dotted or dashed. You can also put the text box inside a paragraph.
CHAPTER 3 creating a text box inside another text box, with also a ready-to-use code.
CHAPTER 4 putting two text boxes side by side to create the effect of diary pages.Series
- Part 3 of CSS GUIDES
-
Tags
Summary
A lot of people tend to ask about the site skin I use. It’s just a modified version or the original made by memorizingthedigitsofpi.
I’m posting the version I use so you guys can enjoy it too! <3
-
Tags
Summary
CSS to replicate the look and feel of Gmail for AO3 /works interface (and the rest of the site, to some extent).
Use this if you want to replicate the trepidation of checking your emails while you uhh escape to the fictional worlds of your blorbos? -
Tags
Summary
An updated version of spookedcroon's Reddit template for use on AO3. (Updated 3/29/25.)
-
Mystery Work
Part of (2) Drafts in Progress
Summary
This is part of an ongoing challenge and will be revealed soon!
-
Tags
Summary
[Stay within a 5 meter radius of me at all times] ==>
You wonder if perpetual commands will work the same as one-time incidental commands.
[Does this order include the bathroom?]
You sigh.
Teenage boys and their immaturity.
[Also, I’m American. Can you convert that to feet for me?]
The red gem on your staff let's you command and control ghosts. You never believed it could, until you acquired a ghost to test it out on. Unfortunately, this ghost has the potty humor of a crass teenager.
(Interactive Fic)
Series
- Part 5 of Danny Phantom Crossover Angst Week 2024
- Part 2 of mobius double reacharound
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
Tags
Summary
THUNDERMAN703: bro can we PLEASE find a new target already??? i know we're bffs and all but im sick of you blowing me off at the gym so you can write artsy-fartsy porn of some douchebag you shook hands with once
A particularly diseased AU where Akira won't stop uploading his Phantom Thieves of Hearts RPF to AO3.
-
Tags
Summary
I deconstructed Heterochromia_Mars's Discord skin and reconstructed a new one that should work slightly better on screens of all sizes, especially mobile screens.
Note: Please check Chapter 3 for CSS code whenever the skin updates!
-
Skin for Making Character Intro Cards by SpookyTesting (FierySprites)
Fandoms: No Fandom
15 Nov 2024
Tags
Summary
A work skin for creating concise and compact cards for introducing characters in a fic – including their name, title, portrait, some characteristics, and fandom of origin. Meant to be used in crossovers, but doesn’t have to be.
-
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,594
Bookmarked by Mors (Chanton)
02 Dec 2024
Bookmarker's Tags:
Bookmarker's Notes
Wrapping text around images
-
Mimicking Minecraft for fics- Some Minecraft Work Skins by Ultraviollett
Fandoms: Fandom - Fandom, Minecraft (Video Game), Hermitcraft SMP, Dream SMP, Empires SMP
20 Apr 2024
Tags
Summary
Some CSS for workskins involving minecraft!
Current chapters:
-Minecraft chat text, including "[username] joined/left game" and "[username] whispers to you"
-Minecraft buttons (respawn/ quit to title)
-End poem text
-minecraft booksSeries
- Part 1 of AO3 workskins
-
Tags
Summary
This is a tutorial and live-example on how to use CSS skins and HTML on AO3 to make some stylish card links that move around and look pretty cool when you hover your cursor over them :)
Series
-
TMA transcript work skin by Ninjabunny99
Fandoms: The Magnus Archives (Podcast), Original Work
18 Oct 2022
Tags
Summary
Workskin for all your original TMA transcript needs! Modeled after the unofficial transcripts archive, I made it as similar as I could. Looks best on desktop but still reads fine on mobile. Formatted example using text from the show in the first chapter, work skin and full html in the second.
Feel free to use and edit however you want. Have fun! -
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,707
Bookmarked by Chanton
03 Dec 2024
Bookmarker's Tags:
Bookmarker's Notes
Music Embed Work Ski n + News Article +Lyrics
-
Tags
Summary
This is a live example and the HTML/CSS for a work skin I pieced together to mimic a mobile Spotify playlist! Perfect for chatfics, showing what your character is listening to, having your ship exchange love songs, etc. It is not an embed and can't actually play music, but you can link songs.
-
My favourite streamer is a lesbian??? (NOT CLICKBAIT) by ThatPersonWhoLikes
Fandoms: Arcane: League of Legends (Cartoon 2021)
16 Apr 2025
Tags
Summary
Vi is a famous streamer who is definitely not hiding a relationship. Caitlyn Kiramman is a socialite who is totally not in a secret relationship of her own.
Now, if only the internet's best detectives could figure out the key to this truly, truly unsolvable mystery...
Featuring an overworked Academy student and his popular girlfriend he would catch the moon for, a hot teacher everyone forgets is a scientist, what is totally not a lurking account, and the Noxian ambassador making people fall head over heels.
-----
You know when your entire tl becomes obsessed with the same thing for a week straight? But make it a fanfiction where Arcane characters are celebrities. Be prepared for gossip, even more internet opinions, and way too many tweets.
Now with an epilogue! Chapter 10 at last :)
- Language:
- English
- Words:
- 17,633
- Chapters:
- 10/10
- Comments:
- 374
- Kudos:
- 1,776
- Bookmarks:
- 283
- Hits:
- 24,375
Bookmarked by Mors (Chanton)
07 Dec 2024
Bookmarker's Tags:
Bookmarker's Notes
Awesome use of Twitter work skins. Author is definitely going into the altar figure of people that is in my worship shrine.
CaitVi FOR THE WIN + EkkoJinx crumbs #iykyk
Summary: Vi is a streamer who secretly dates Caitlyn. Gradually, people starts suspecting Vi for being with somebody (Caitlyn). Shenanigans ensue! Up for some Lesbian drama? Read this!
Current chapter 1
-
Tags
Summary
CSS Code for the OTW 17th anniversary skin.
Bookmarked by enchanteddizzydealer
09 Dec 2024
Bookmarker's Tags:
Bookmarker's Notes
CSS 17th ANNIVERSARY
-
Hold-hands Inspired Texting Skin by cursedcuriosities (SetsuntaMew)
Fandoms: Ensemble Stars! (Video Game)
25 Sep 2024
Tags
Summary
This is a tutorial/live example for a Hold-hands inspired texting skin, based on the look of iOS messaging.
Series
- Part 2 of Killian's AO3 Work Skins
-
[Podfic] Three Words That Became Hard To Say by RsCreighton for GlitteryV
Fandoms: Marvel Cinematic Universe
31 Dec 2017
Tags
Summary
“I wanna step out with Wilson,” Bucky says, audibly traumatized. Steve blinks again, and lowers the shield.
“Uh,” he says. “Come again?”
Series
- Part 14 of #ITPE 2017
-
Tags
Summary
Code and Tutorial for a 2020-style reddit post.
-
Tags
Summary
A companion to Repository. A comprehensive guide to coding focused solely on emulating Twitter posts for fun or for archiving Twitter fics, up to and including:
- Quote Retweets
- Embedded Images
- Twitter PollsSeries
-
Tags
Summary
A work skin tutorial of a Google Search Suggestions page in AO3.
See Chapter 1 for examples of the work skin with 4 different suggestions types (auto-complete suggestions, recent history, related to recent searches and trending searches), Chapter 2 for an explanation of the CSS work skin, Chapter 3 for the complete CSS code of the work skin, Chapter 4 for explanations of the HTML code and Chapter 5 for the complete HTML code (all 4 types of suggestions).
-
Tags
Summary
I deconstructed Heterochromia_Mars's Discord skin and reconstructed a new one that should work slightly better on screens of all sizes, especially mobile screens.
Note: Please check Chapter 3 for CSS code whenever the skin updates!
-
Whatsapp Work Skin Template /Revamped by etc e tal (pe_pe_peperoncinocandy)
Fandoms: No Fandom
21 Apr 2023
Tags
Summary
Whatsapp work skin.
- Text messages, photos, videos, voice messages, links and quotes;
- Group chats;
- Header and icons;
- Scrollable. -
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
Twitter work skin.
- Tweets, quote-tweets, images, polls...;
- DM's, text, emojis, images, voice messages, groupchats...;
- Scrollable version.