13 Bookmarked Items in Skins Tutorials: How to
List of Bookmarks
-
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
- Language:
- English
- Words:
- 33,325
- Chapters:
- 11/11
- Collections:
- 4
- Comments:
- 54
- Kudos:
- 361
- Bookmarks:
- 407
- Hits:
- 28,613
-
Bookmark Tags:
Bookmark Collections:
Bookmark Notes:
All the Emoji by CodenameCarrot
Fandoms: No FandomAs 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.")
https://archiveofourown.org/works/6580324?view_full_work=true
-
How to create your work skins to have colored text by Goddess_of_the_arena
Fandoms: AO3 help - Fandom
22 Feb 2025
Tags
Summary
This is a guide to make text in color, be it for a single word, a full paragraph, several paragraphs in a row, or even the whole chapter, also in different sizes. The tutorial also contains ready-to-use codes for you to add to your work skins.
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 is for pure colored text.
CHAPTER 2 is for text in gradient color, both linear gradient and radial gradient.
CHAPTER 3 contains the steps to combine gradient background with gradient text. It also contains the links to each of the other guides of my CSS GUIDES series
CHAPTER 4 contains the links to eight sites where you can create your gradients and get the ready-to-copy code to paste in the CSS code of the workskin.Series
- Part 1 of CSS GUIDES
- Part 1 of Goddess_of_the_arena's CSS Playground
- Language:
- English
- Words:
- 6,207
- Chapters:
- 4/4
- Collections:
- 1
- Comments:
- 180
- Kudos:
- 443
- Bookmarks:
- 303
- Hits:
- 13,314
-
Bookmark Tags:
Bookmark Collections:
Bookmark Notes:
How to create your work skins to have colored text by Goddess_of_the_arena
Summary
This is a guide to make text in color, be it for a single word, a full paragraph, several paragraphs in a row, or even the whole chapter, also in different sizes. The tutorial also contains ready-to-use codes for you to add to your work skins.
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 is for pure colored text.
CHAPTER 2 is for text in gradient color, both linear gradient and radial gradient.
CHAPTER 3 contains the steps to combine gradient background with gradient text. It also contains the links to each of the other guides of my CSS GUIDES series
CHAPTER 4 contains the links to eight sites where you can create your gradients and get the ready-to-copy code to paste in the CSS code of the workskin.https://archiveofourown.org/works/51309787?view_full_work=true
-
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,364
- Kudos:
- 7,047
- Bookmarks:
- 8,387
- Hits:
- 431,947
-
Bookmark Tags:
Bookmark Collections:
Bookmark Notes:
A Complete Guide to 'Limited HTML' on AO3 by CodenameCarrot
Fandoms: No FandomSummary
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 update this and take a crack at finishing it. (Links and Images are in, the new Audio and Video tags are not.)
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.
https://archiveofourown.org/works/5191202?view_full_work=true
-
Tags
Summary
This is a personal experiment with HTML. It is a very limited list with what I find useful.
Update: Somehow I find more and more stuff useful, so this list is not that limited (and not that private) anymore. I'll improve it with time and according to my needs and interests.So far that's posted:
Part One: Basics
Part Two: Lines
Part Three: Footnotes and Links
Part Four: Columns and Skins
Part Five: Pictures
Part Six: Videos (and gifs)
Part Seven: Choose Your Own Adventure
Part Eight: Chapter Title
Part Nine: The Title, the Username, and Links
Part Ten: Kudos Message
Part Eleven: Newspaper Article
Part Twelve: Content Notes and Spoiler (NEW: Opacity and hover translations)
Part Thirteen: Playground for Jinx (glitch text, color, table)
Part Fourteen: Text generator
Part Fifteen: Boxes (still in progress)
Part Sixteen: Vertical Text
Part Seventeen: Transition (NEW)
Part Eighteen: Automated Animation (NEWEST)- Language:
- English
- Words:
- 14,992
- Chapters:
- 20/?
- Collections:
- 7
- Comments:
- 201
- Kudos:
- 1,009
- Bookmarks:
- 935
- Hits:
- 38,133
-
Bookmark Tags:
Bookmark Collections:
Bookmark Notes:
P̶e̶r̶s̶o̶n̶a̶l̶ Experiment with HTML and CSS by MohnblumenKind
Fandoms: No FandomSummary
This is a personal experiment with HTML. It is a very limited list with what I find useful.
Update: Somehow I find more and more stuff useful, so this list is not that limited (and not that private) anymore. I'll improve it with time and according to my needs. I just realized, this will never be "complete" and there is no final number of chapters.So far that's posted:
Part One: Basics
Part Two: Lines
Part Three: Footnotes and Links
Part Four: Columns and Skins
Part Five: Pictures
Part Six: Videos (and gifs)
Part Seven: Choose Your Own Adventure
Part Eight: Chapter Title
Part Nine: The Title, the Username, and Links
Part Ten: Kudos Message (NEW)
Part Eleven: Newspaper Article
Part Twelve: Content Notes and Spoiler
Part Thirteen: Playground for Jinx (glitch text, color, table)
Part Fourteen: Text generator
Part Fifteen: Boxes (still in progress)
Part Sixteen: Vertical Text (NEWEST)https://archiveofourown.org/works/15685086?view_full_work=true
-
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:
- 192
- Kudos:
- 994
- Bookmarks:
- 989
- Hits:
- 41,332
-
Bookmark Tags:
Bookmark Collections:
Bookmark Notes:
Twitter Work Skin: Tweets & Profile (newest layout) by starskin
Fandoms: No FandomSummary
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.https://archiveofourown.org/works/26754208?view_full_work=true
-
Tags
Summary
A tutorial and live example to make LINE Chat using AO3 skin.
Series
- Part 2 of AO3 Chat Skin Tutorial
- Language:
- Bahasa Indonesia
- Words:
- 862
- Chapters:
- 2/2
- Collections:
- 1
- Comments:
- 8
- Kudos:
- 71
- Bookmarks:
- 55
- Hits:
- 4,267
-
Bookmark Tags:
Bookmark Collections:
Bookmark Notes:
How to Make LINE Chat on AO3 by ran_a_dom (revabhipraya)
Fandoms: No FandomNo Archive Warnings ApplyFanwork Research & Reference Guides Chatting & Messaging
Summary
A tutorial and live example to make LINE Chat using AO3 skin.
https://archiveofourown.org/works/19150123?view_full_work=true
-
Phone Screen / Lock Screen AO3 Work Skin Guide by imperiousmarshmallow
Fandoms: No Fandom
15 Mar 2025
Tags
Summary
A tutorial to mimic a basic iOS-style phone screen with notifications and now playing indicator.
Series
- Part 3 of AO3 Work Skin Tutorials
-
Bookmark Tags:
Bookmark Collections:
Bookmark Notes:
Phone Screen / Lock Screen AO3 Work Skin Guide by imperiousmarshmallow
Fandoms: No FandomSummary
A tutorial to mimic a basic iOS-style phone screen with notifications and now playing indicator.
https://archiveofourown.org/works/63869329?style=creator
-
Tags
Summary
Want to code in ao3?
Heres how!
This work will teach you how to code on ao3 from simple to more advanced techniques.
Some code featured in this work is credited to their respected authors, so be sure to check them out as well!
Series
- Part 1 of Ao3 C̵̬̳͕̲̪̖̉̎̂͌̿̊̈́̅o̶̬̳͇͙̤̎̄͗̈́̓̃̔̚͜͝d̷̙̹̖̳̪̞̬̗̔͐́̏̕i̶̧͈̱̣̝̍ͅn̸̛͉̤̙̭̂̾̏̏̑̈́̀̎̅̅͂g̸̢͉͈̦͍͎̮͎̭̮̉̌́̇̄̓͜ͅͅ
- Language:
- English
- Words:
- 43,986
- Chapters:
- 21/?
- Collections:
- 2
- Comments:
- 161
- Kudos:
- 422
- Bookmarks:
- 636
- Hits:
- 21,059
-
Bookmark Tags:
Bookmark Collections:
Bookmark Notes:
𝗖𝗼𝗱𝗶𝗻𝗴 𝗘𝗻𝗰𝘆𝗰𝗹𝗼𝗽𝗲𝗱𝗶𝗮 by Anonymous
Fandoms: Original Work, Archive of Our OwnSummary
Want to code in ao3?
Heres how!This work will teach you how to code on ao3 from simple to more advanced techniques. Updates frequently.
Some code featured in this work is credited to their respected authors, so be sure to check them out as well!
https://archiveofourown.org/works/59053459?view_full_work=true
-
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:
- 70
- Kudos:
- 530
- Bookmarks:
- 572
- Hits:
- 22,527
-
Bookmark Tags:
Bookmark Collections:
Bookmark Notes:
Whatsapp Work Skin Template /Revamped by etc e tal (pe_pe_peperoncinocandy)
Fandoms: No FandomWhatsapp work skin.
- Text messages, photos, videos, voice messages, links and quotes;
- Group chats;
- Header and icons;
- Scrollable.https://archiveofourown.org/works/46531021
-
Tags
Summary
Twitter work skin.
- Tweets, quote-tweets, images, polls...;
- DM's, text, emojis, images, voice messages, groupchats...;
- Scrollable version.- Language:
- English
- Words:
- 2,046
- Chapters:
- 1/1
- Collections:
- 5
- Comments:
- 36
- Kudos:
- 277
- Bookmarks:
- 268
- Hits:
- 11,141
-
Bookmark Tags:
Bookmark Collections:
Bookmark Notes:
Twitter Work Skin Template by etc e tal (pe_pe_peperoncinocandy)
Fandoms: No FandomTwitter work skin.
- Tweets, quote-tweets, images, polls...;
- DM's, text, emojis, images, voice messages, groupchats...;
- Scrollable version.https://archiveofourown.org/works/47803507
-
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,566
- Bookmarks:
- 4,448
- Hits:
- 200,470
-
Bookmark Tags:
Bookmark Collections:
Bookmark Notes:
How to Make iOS Text Messages on AO3 by CodenameCarrot, La_Temperanza
Fandoms: No FandomThis 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.
https://archiveofourown.org/works/6434845?view_full_work=true
-
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
- Language:
- English
- Words:
- 7,539
- Chapters:
- 8/8
- Collections:
- 7
- Comments:
- 93
- Kudos:
- 413
- Bookmarks:
- 567
- Hits:
- 22,528
-
Bookmark Tags:
Bookmark Collections:
Bookmark Notes:
Repository: Twitter by gadaursan for genderneutralnoun
Fandoms: Original WorkSummary
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 Pollshttps://archiveofourown.org/works/22517134?view_full_work=true
-
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:
- 908
- Bookmarks:
- 1,092
- Hits:
- 47,809
-
Bookmark Tags:
Bookmark Collections:
Bookmark Notes:
Repository: Work Skins by gadaursan
Fandoms: Original WorkSummary
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 Skinshttps://archiveofourown.org/works/8631214?view_full_work=true