9 Bookmarked Items in ao3 html references
List of Bookmarks
-
Tags
Summary
Has anyone ever wondered how well you can replicate a social media plotform on here? No? Ok maybe it's just me...
But here it is the first prototype of my Instagram Replica
Series
- Part 1 of Instagram Skin
-
Bookmark Collections:
-
Tags
Summary
A Reddit template for use on AO3.
- Language:
- English
- Words:
- 2,841
- Chapters:
- 4/4
- Collections:
- 2
- Comments:
- 50
- Kudos:
- 384
- Bookmarks:
- 317
- Hits:
- 15,479
-
Bookmark Collections:
-
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:
- 62
- Kudos:
- 612
- Bookmarks:
- 510
- Hits:
- 28,081
-
Bookmark Collections:
-
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:
- 385
- Kudos:
- 4,654
- Bookmarks:
- 4,543
- Hits:
- 204,522
-
Bookmark Collections:
-
Tags
Summary
This is a tutorial/live example on how to mimic email windows on AO3 without the need to use images.
Series
- Part 12 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 2,551
- Chapters:
- 1/1
- Collections:
- 7
- Comments:
- 58
- Kudos:
- 667
- Bookmarks:
- 776
- Hits:
- 43,969
-
Bookmark Collections:
-
Tags
Summary
Whatsapp work skin.
- Text messages, photos, videos, voice messages, links and quotes;
- Group chats;
- Header and icons;
- Scrollable.- Language:
- English
- Words:
- 4,661
- Chapters:
- 1/1
- Collections:
- 4
- Comments:
- 76
- Kudos:
- 556
- Bookmarks:
- 598
- Hits:
- 24,518
-
Bookmark Collections:
-
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!
- Language:
- English
- Words:
- 2,851
- Chapters:
- 4/5
- Collections:
- 4
- Comments:
- 195
- Kudos:
- 1,030
- Bookmarks:
- 1,028
- Hits:
- 43,528
-
Bookmark Collections:
-
The Scriptorium [Work Skin] by LostQuill-lab (LostQuill)
Fandoms: AO3, Archive of Our Own, No Fandom, Work Skins - Fandom
24 Jun 2026
Tags
Summary
CSS components for AO3 workskins: simple document-style formatting elements with an antiquarian feel.
- parchment scrolls & documents
- codex / illuminated manuscript pages
- book covers & pages / cover animation
- newspaper clippings
- diary / notebook entries
- classified files & folders
Series
- Part 2 of CSS stuff
-
Bookmark Tags:
Bookmark Collections:
-
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
- Language:
- English
- Words:
- 28,034
- Chapters:
- 15/15
- Collections:
- 8
- Comments:
- 1,366
- Kudos:
- 7,099
- Bookmarks:
- 8,456
- Hits:
- 435,293
-
Bookmark Tags:
Bookmark Collections: