ao3 code
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:
-
Newspaper/Magazine Article Template by deathbymistletoe
Fandoms: No Fandom, Original Work
22 Jul 2024
Tags
Summary
A simple template for the HTML/CSS of a mock article for fake newspapers and such.
Series
- Part 1 of Frontend Shenanigans
-
Tags
Summary
Another HTML/CSS template! This one for a basic chat log including usernames, optional times, and (obviously) message contents.
Series
- Part 4 of Frontend Shenanigans
-
Tags
Summary
A short & sweet guide to a work skin (and the associated HTML) that allows readers to choose from a list of given names for a character and select which one they want the work to use.
Series
- Part 3 of Frontend Shenanigans
Bookmarks which have used it as a tag:
-
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:
- 100
- Kudos:
- 894
- Bookmarks:
- 1,079
- Hits:
- 46,654
Bookmarked by Dysgrammatophobia
09 Jan 2020
Bookmarker's Tags:
Bookmarker's Notes
Repository: Work Skins by gadaursan
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom Deadpool (Comics), Deadpool - All Media Types, No Fandom, Star Trek, Star Trek: Starfleet Academy (TV 2026), Undertale (Video Game)
07 Feb 2026
- Words:
- 93,843
- Works:
- 21
- Bookmarks:
- 4,782
-
The Choose Your Own Adventure Guide to Choose Your Own Adventure Fics with AO3 Limited HTML by 0_0_MLM
Fandoms: No Fandom, Fandom - Fandom
30 Jan 2024
Tags
Summary
Create single chapter interactive choose your own adventure fics—no links required! Just some creative CSS.
Do you wish to proceed?
Series
- Part 3 of Tech Tutorials for Ao3
-
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
-
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
-
Tags
Summary
Example and basic code for making some text hidden or optional on Ao3 using details and summary tags
Bookmarked by sora_grey
02 Oct 2024
Bookmarker's Tags:
Bookmarker's Notes
Useful for when my author’s notes spiral wildly out of control, because sometimes there’s a lot of random information in my fics.
sora rambles
or, I can actually write multi-chapter fics and insert any relevant information within a specific chapter and then hide them when necessary.
or, I can finally revise my old works because the beginning/endnotes for some of them are really fucking long. 🤦🏻♀️😬
-
Tags
Summary
Work skin for different types of found documents, for people who are into that kind of thing.
Update 1 December 2022: Added parameters for links within div sections. Previously, applying this work skin on top of the Reversi site skin could make links difficult to read.
-
Tags
Summary
Embedding tutorial
- Language:
- English
- Words:
- 212
- Chapters:
- 1/1
- Collections:
- 1
- Comments:
- 4,468
- Kudos:
- 8,726
- Bookmarks:
- 5,517
- Hits:
- 404,928
Bookmarked by AzureDiamond
23 Jan 2026
Bookmarker's Tags:
Bookmarker's Notes
Super Awesome Learning How to Embed Place
leftennant -
Tags
Summary
A quick guide on how to code and use the hover to translate workskin. This feature allows readers to hover on a word or image and have it change into the translation.
If you use this and want to link back so other people can use it, too, that'd be awesome.
Bookmarked by AzureDiamond
26 Jan 2026
Bookmarker's Tags:
Bookmarker's Notes
Work Details
Hover to Translate Workskin for Text and Images by smugrobotics
Published: 2026-01-23
Work ID: 78140651Relationship Tags:
• No Relationship Tags
Work Summary:
A quick guide on how to code and use the hover to translate workskin. This feature allows readers to hover on a word or image and have it change into the translation.
If you use this and want to link back so other people can use it, too, that'd be awesome.
(Approximate) Last Read: 2026/04/29
-
Tags
Summary
There are some great quick-and-dirty guides to HTML on A03. This is not one of them - it is a comprehensive guide
It's now 2025, a decade later. A03 supports some new HTML and and we're all walking around reading fic on supercomputers that fit in a jean pocket. It was time to update.
The previous three chapters have been divided into smaller concepts. Each tag continues to have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. Most tags have their attributes, things like [src] or [title], listed and examples of how using the attributes modify the tags.
There's a chapter on Bad Ideas, including how some of the archive's default CSS is available to you to format your work (users can't turn that off by hiding a workskin!)
Oh. And I added a bunny army. You could learn how to add one too.
/)/) /)/) /)/) (..) (..) (..) *( ) *( ) *( )
Series
- Part 19 of AO3 Work Skins/Tutorials
-
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
Among Us inspired chat skin for your AO3 and meme needs
Series
- Part 1 of #ao3_work_skins
-
Tags
Summary
This is a tutorial on how to create Twitter / X templates for AO3, includes both Tweets and profile card.
- Scalable so it's also accessible to mobile users.
- Tweets (chapter 1): text, tags, quote tweet, photo(s), replies, verified checkmark.
- Profile card (chapter 2): displays a user's profile as shown on Twitter.
- Please let me know if there are bugs and/or requests.Ao3 Twitter Template Generator now available! (Made possible by the amazing Anlanther): Now you only have to fill in your text and copy-paste the generated code!