Work Skin
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
Kent Parson always imagined what his life would be like after the draft. He imagined fame, fortune… and Jack. This isn’t that life. Instead he got nosy neighbors, a pet cat, and a soap opera addiction.
This is the story of the fictional Eight Seasons Hotel and how it intersects with eight actual seasons in Kent Parson’s life. (aka the Soap Opera fic).
-
Tags
Summary
a work skin that mimics the program Discord (for chatfics or fics that feature use of it!)
made this skin over a couple days; it won't look good on mobile or with creator's style disabled but the html is pretty easy to customise!
(Note: some folks in the comments have been kind enough to share some fixes for a few of the problems!)If you use it, crediting and linking back here so other people can find it is appreciated :)
EDIT: I haven't updated this in quite some time so I'm giving blanket permission for people to share their own fixed and improved versions of the code! Just link back here so people can find some help for how to use it. happy writing!
-
Tags
Summary
A work skin meant to mimic the LIME chat that keeps your fic readable even when work skins are off.
19 Mar 21: added an extra chapter about how to format your fic to help out those that aren't as familiar with using work skins or HTML
Series
- Part 1 of work skins
-
Tags
Summary
A work skin created for fics designed to emulate a screenplay. This is by someone who has no experience in screenwriting or coding...so take that as you will.
-
Tags
Summary
A Work Skin based off of “Kingstagram” from Kingdom Hearts 3 for use in fics! There’s some live examples, and a little guide on how to use it and edit it to your liking.
-
Tags
Summary
Based on phyripo's guide, with some usability improvements made to reblogs and photoset creation.
-
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.
-
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 tutorial for creating and formatting spreadsheets in AO3, using CSS and HTML.
-
Tags
Summary
A short tutorial for creating ruby text (furigana) in AO3, using CSS and HTML.
-
Tags
Summary
iMessage as it looks in iOS 7 to present.
Series
- Part 1 of Azdaema's AO3 Messaging Skins
-
AO3 Work Skin for In-Universe Investigative/Mission Report With Redaction by wafflelate
Fandoms: No Fandom
10 May 2020
Tags
Summary
This work provides the CSS and HTML necessary to make a fanfiction look like an investigative report or mission report, suitable for a variety of fandoms and purposes.
-
Tags
Summary
An AO3 work skin that formats HTML tables to look like RuneScape right click menus. Originally developed for use in the RuneScape fanfic Sprited Away.
Also comes with a guide on how to use it, for people who may not have used AO3 workskins (or HTML/CSS altogether, for that matter). Written to be understandable even by complete beginners -- if not, let me know!
The first chapter is the work skin for RS3 styling. OSRS version coming soonish.
(If you use it: credit is not necessary, but would be appreciated nonetheless!)
-
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
-
Tags
Summary
Based on gadaursan's "Fire Emblem Support Scripting" work skin, a HTML and CSS to format screenplay and scripts (or dialog-only/dialog-heavy works), but with some edits: 1) adjusted the images for smaller screens, 2) added a text box/speech bubble, 3) In version 3, added character's name.
Series
- Part 1 of Clover Zero's AO3 HTML & CSS
-
Tags
Summary
A work skin meant to mimic the IDOLISH7 Rabbit Chat that keeps your fic readable on mobile and with creator styles disabled. Chapter 1 emulates the version in the game. Chapter 2 emulates the version shown in IDOLiSH7 Vibrato.
Series
- Part 2 of work skins
-
Tags
Summary
A few short conversations to showcase a work skin resembling the D.D.D chats in-game.
-
How to make a fanfic header Ao3 Style inside your own fanfic by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
26 Sep 2020
Tags
Summary
Live example and tutorial on how to insert a fanfic header + fic tags + summary in your fanfic. In perfect ao3 style.
If you need your own fic to go extra meta.Series
- Part 3 of CSS code scripts for Ao3
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
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
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
02 Aug 2025
- Words:
- 87,711
- Works:
- 19
- Bookmarks:
- 4,225
-
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
-
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
- Language:
- English
- Words:
- 1,769
- Chapters:
- 1/1
- Collections:
- 7
- Comments:
- 77
- Kudos:
- 1,088
- Bookmarks:
- 943
- Hits:
- 46,238
Bookmarked by LadyKF
09 Dec 2018
Bookmarker's Tags:
Bookmarker's Notes
Awesome tutorial to look into later!
-
Tags
Summary
A work skin meant to mimic the LIME chat that keeps your fic readable even when work skins are off.
19 Mar 21: added an extra chapter about how to format your fic to help out those that aren't as familiar with using work skins or HTML
Series
- Part 1 of work skins
-
Tags
Summary
a work skin that mimics the program Discord (for chatfics or fics that feature use of it!)
made this skin over a couple days; it won't look good on mobile or with creator's style disabled but the html is pretty easy to customise!
(Note: some folks in the comments have been kind enough to share some fixes for a few of the problems!)If you use it, crediting and linking back here so other people can find it is appreciated :)
EDIT: I haven't updated this in quite some time so I'm giving blanket permission for people to share their own fixed and improved versions of the code! Just link back here so people can find some help for how to use it. happy writing!
-
Tags
Summary
As of April 2016, The database that stores works on A03 does not allow emoji. If you try to add an emoji it will end your story there. Any words after the emoji? Poof. Gone. This is a known, if poorly advertised, issue with the archive.
There are some workarounds; you can find them in: How to Make iOS Text messages on A03. But here? Here is for ALL THE EMOJI*.
10 chapters of emoji tables, each with the HTML for putting the emoji into your work and the CSS for putting it into your workskin. Copy-Paste baby. Copy-Paste.
*Does not contain the 2016 Unicode release. You'll have to come up with the code for pickle yourselves.
(Note, because this is 10 chapters of emoji tables, here is a link to the Index Tables (chapter 1) to speed up load times and reduce confusion if you have preferences set to "entire work.")
Series
- Part 11 of AO3 Work Skins/Tutorials
-
Tags
Summary
a work skin that mimics the program Discord (for chatfics or fics that feature use of it!)
made this skin over a couple days; it won't look good on mobile or with creator's style disabled but the html is pretty easy to customise!
(Note: some folks in the comments have been kind enough to share some fixes for a few of the problems!)If you use it, crediting and linking back here so other people can find it is appreciated :)
EDIT: I haven't updated this in quite some time so I'm giving blanket permission for people to share their own fixed and improved versions of the code! Just link back here so people can find some help for how to use it. happy writing!
-
Tags
Summary
a workskin for AO3 so you can have text messages in your fic look like IO7 texts!
-
Tags
Summary
a work skin that mimics the program Discord (for chatfics or fics that feature use of it!)
made this skin over a couple days; it won't look good on mobile or with creator's style disabled but the html is pretty easy to customise!
(Note: some folks in the comments have been kind enough to share some fixes for a few of the problems!)If you use it, crediting and linking back here so other people can find it is appreciated :)
EDIT: I haven't updated this in quite some time so I'm giving blanket permission for people to share their own fixed and improved versions of the code! Just link back here so people can find some help for how to use it. happy writing!
-
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
-
Tags
Summary
This is a live example of my AO3 skin that allows the author to recreate the look of sticky notes (aka Post-Its) in their fic. To learn more about it, you can find the tutorial here.
Series
- Part 8 of AO3 Work Skins/Tutorials
-
Tags
Summary
A work skin meant to mimic the LIME chat that keeps your fic readable even when work skins are off.
19 Mar 21: added an extra chapter about how to format your fic to help out those that aren't as familiar with using work skins or HTML
Series
- Part 1 of work skins
- Language:
- English
- Words:
- 1,591
- Chapters:
- 2/2
- Collections:
- 3
- Comments:
- 43
- Kudos:
- 271
- Bookmarks:
- 142
- Hits:
- 8,171
Bookmarked by Clover_Zero
01 Apr 2020
Bookmarker's Tags:
Bookmarker's Notes
A3! LIME Work Skin by associate
-
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
- Language:
- English
- Words:
- 6,494
- Chapters:
- 12/?
- Collections:
- 7
- Comments:
- 96
- Kudos:
- 735
- Bookmarks:
- 885
- Hits:
- 35,844
Bookmarked by DarthBloodOrange (DepressingGreenie)
04 May 2020
Bookmarker's Tags:
Bookmarker's Notes
How To 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
- Language:
- English
- Words:
- 835
- Chapters:
- 1/1
- Collections:
- 5
- Comments:
- 11
- Kudos:
- 260
- Bookmarks:
- 310
- Hits:
- 17,086
Bookmarked by DarthBloodOrange (DepressingGreenie)
04 May 2020
Bookmarker's Tags:
Bookmarker's Notes
How To AO3
-
Tags
Summary
Based on phyripo's guide, with some usability improvements made to reblogs and photoset creation.
- Language:
- English
- Words:
- 2,075
- Chapters:
- 3/3
- Collections:
- 6
- Comments:
- 12
- Kudos:
- 118
- Bookmarks:
- 183
- Hits:
- 7,543
Bookmarked by DarthBloodOrange (DepressingGreenie)
04 May 2020
Bookmarker's Tags:
Bookmarker's Notes
How To AO3
-
Tags
Summary
a work skin that mimics the program Discord (for chatfics or fics that feature use of it!)
made this skin over a couple days; it won't look good on mobile or with creator's style disabled but the html is pretty easy to customise!
(Note: some folks in the comments have been kind enough to share some fixes for a few of the problems!)If you use it, crediting and linking back here so other people can find it is appreciated :)
EDIT: I haven't updated this in quite some time so I'm giving blanket permission for people to share their own fixed and improved versions of the code! Just link back here so people can find some help for how to use it. happy writing!
- Language:
- English
- Words:
- 572
- Chapters:
- 1/1
- Collections:
- 5
- Comments:
- 60
- Kudos:
- 558
- Bookmarks:
- 446
- Hits:
- 24,555
Bookmarked by DarthBloodOrange (DepressingGreenie)
04 May 2020
Bookmarker's Tags:
Bookmarker's Notes
How To AO3
-
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).
-
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
-
Tags
Summary
This is a tutorial/live example on how to mimic social media in an AO3 work, specifically Twitter, Reddit, and LiveJournal.