AO3 Tutorial
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
Currently, it's possible to hide hits through your Preferences page, but because of caching weirdness this sometimes doesn't work. Here's how you can hide hits from yourself using site skins, which don't have that issue.
-
Tags
Summary
This is a tutorial/live example on how to mimic social media in an AO3 work, specifically Twitter, Reddit, and LiveJournal.
-
Tags
Summary
Some information about what AO3 bookmarks are and how you can use them.
-
Tags
Summary
Hi hi! You can call me Jal, and I've been publishing exclusively at AO3 for about 6 months, with my draft work primarily in Google Docs. This is a compilation of helpful tips, how-to's, and gotchas from my experience. Let me know what else you want to see in future chapters!
Series
- Part 1 of The Writing Process
-
Mystery Work
Part of strawberry collection
Summary
This is part of an ongoing challenge and will be revealed soon!
-
How to Fix "Floating" Chapter 1 End Notes by LadyAnatar
Fandoms: Original Work, No Fandom
30 Oct 2022
Tags
Summary
One of the most common errors in multi-chapter works on AO3 is the "floating" end notes that should be at the end of the first chapter but insist on latching onto the end of the latest chapter instead. Here are instructions explaining how to stick these floaters at the end of your first chapter where they belong.
-
How to Insert the Star Wars Credit Symbol by rktho_writes
Fandoms: Star Wars - All Media Types
29 Nov 2022
Tags
Summary
A little tutorial on how to smoosh a bunch of dashes and a slash together to get the Star Wars currency symbol
-
Hiding/showing things based on Creator's Style by MijuWrites
Fandoms: No Fandom, Original Work
09 Mar 2023
Tags
Summary
A guide on how to have some writing only appear with Creator's Style hidden, and some other writing only appear with Creator's Style shown!
Really handy if your fic relies on Creator's Style a lot and you're worried about how it might look with its style hidden; or if you want to play around with letting the user interact with Creator's Style!
-
How to insert html/css comments in your fic that still look good after you download them by Magnolia_in_black_Velvet
Fandoms: No Fandom
16 Aug 2023
Tags
Summary
a guide to inserting comments into your fics that will still look good when you download the fic (and all the css is stripped from it)
Series
- Part 1 of Magnolia's adventures in CSS
-
Best scene dividers Lightsabers make: a css guide to making your story glow by Magnolia_in_black_Velvet
Fandoms: No Fandom, Star Wars - All Media Types
04 Sep 2023
Tags
Summary
How to pep your scene dividers up by making them look like glowing lightsabers
Series
- Part 2 of Magnolia's adventures in CSS
-
Tags
Summary
Including translations for your story is a hassle, so I'm working to find an easy solution! Join me in this journey!
- PC and Mobile Friendly
- For both SHORT and LONG translations/notes
- Inline edits (no editing your work skin for every translation) -
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
-
[SITE SKIN TUTORIAL] Add A Banner, And Change Site Colors by JAWorley
Fandoms: Original Work
20 Dec 2023
Tags
Summary
Learn how to quickly and easily make your own site skin, including a customized banner at the top of the page.
Series
- Part 3 of JA's Custom AO3 Site Skins
-
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
- Part 2 of Goddess_of_the_arena's CSS Playground
-
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, making the border dotted or dashed and using pictures and gifs as a border image. 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 journal (or book) pages.Series
- Part 3 of CSS GUIDES
- Part 3 of Goddess_of_the_arena's CSS Playground
-
How to create a work skin for glitch effect, mirror text, vertical text, upside down text and colored blockquote by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, AO3 help - Fandom, Work Skins - Fandom
22 May 2025
Tags
Summary
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 the text with glitching effect similar to the Zalgo font, also in color, with different fonts and highlighted.
CHAPTER 2 is for the mirror effect, vertical text and upside down text, also in color, with different fonts and highlighted.
CHAPTER 3 is to create a negative mirror text effect (here in black and white) with the text side by side.
CHAPTER 4 is to give your blockquote a colored side border, top border or bottom border (also in gradient colors or using an image), a colored background (also in gradient colors) and different margin values.Series
- Part 4 of CSS GUIDES
- Part 4 of Goddess_of_the_arena's CSS Playground
-
How to create a work skin to have shadowed text, 3D text, bordered text and neon text by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, AO3 help - Fandom, Work Skins - Fandom
13 Jan 2025
Tags
Summary
This tutorial will give you the necessary steps to add shadowed text, bordered text, 3D text and neon text to your works, with ready-to-use codes available for you.
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 the shadowed text.
CHAPTER 2 is for the bordered text and 3D text.
CHAPTER 3 is for the neon text.Series
- Part 6 of CSS GUIDES
- Part 6 of Goddess_of_the_arena's CSS Playground
-
How to create a work skin to add underline and create line dividers by Goddess_of_the_arena
Fandoms: css - Fandom, HTML - Fandom, AO3 help - Fandom, Work Skins - Fandom
02 Sep 2024
Tags
Summary
This tutorial contains the steps and ready to use codes to add underline to your text and create text dividers.
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 underline, also mixing colored text with colored underline and in gradient colors.
CHAPTER 2 is for line dividers, also in gradient colors, with emoticon/emoji and with colored emoticons and neon effect emoticon/emoji.Series
- Part 5 of CSS GUIDES
- Part 5 of Goddess_of_the_arena's CSS Playground
-
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
-
How to create your work skin to change the background color and text style of your story by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, Work Skins - Fandom, AO3 help - Fandom
22 Feb 2025
Tags
Summary
This tutorial contains the steps to change the background color and text style of your story and also to make every chapter have a different background color or text style.
This tutorial contains ready-to-use codes.
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 to apply the background color and/or the text style to the whole work.
CHAPTER 2 is to give every chapter a different background color and/or text style.
CHAPTER 3 is to have a default background color or text style while still giving every chapter a different effect.
CHAPTER 4 is to combine gradient background and gradient text in your work.Series
- Part 7 of CSS GUIDES
- Part 7 of Goddess_of_the_arena's CSS Playground
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
Tags
Summary
Embedding tutorial
-
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,794
-
Tags
Summary
Embedding tutorial
-
Tags
Summary
Embedding tutorial
-
Tags
Summary
Hooray! You've made a podfic! But now, how do you share it? Posting to tumblr, youtube, or a fandom-specific community are all decent options. But chances are, if the fic you recorded is from AO3, you'll reach the largest and most receptive audience by also posting to AO3.
The archive welcomes all types of fanwork, but is structured and built primarily for written works. Posting podfic can be confusing or complicated if you're unfamiliar with it. This guide will cover both the basic mechanics of posting podfic to AO3, as well as the typical conventions used by the podfic community to help your audio be found by people who want to listen.
-
Tags
Summary
A step-by-step guide to creating a new work on Ao3.
Intended for new users, but including some tips and tricks like implanting links, photos, YouTube videos and 'floating box' text which will benefit many writers looking to make their work stand out from the crowd!
-
Tags
Summary
This is a live example of how an author can create linked footnotes in their work with only a little bit of HTML and no workskins required. This is best viewed by clicking "Entire Work". While I've included the actual coding in bold and italic once you click "Hide Creator's Style", there's a more detailed explanation here.
EDIT 6/28/17: The third chapter now shows how to use anchor links as an index/table of contents.
Series
- Part 6 of AO3 Work Skins/Tutorials
-
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
-
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,794
-
- Words:
- 3,584
- Works:
- 1
- Bookmarks:
- 16
Bookmarked by watermelon_shotput
14 Sep 2019
Bookmarker's Tags:
Bookmarker's Notes
To be used when writing AO3 fics.
-
How to Size Images on AO3 by Informative_Dandy
Fandoms: media - Fandom, Meta - Fandom, All - Fandom
22 Jan 2019
Tags
Summary
Learn how to edit the HTML of your image files so they automatically size themselves to fit any screen (both mobile and desktop). It's super EASY!
-
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).
-
Tags
Summary
Embedding tutorial
-
Tags
Summary
Embedding tutorial
-
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 make large images fit on mobile browsers but remain normal size on desktop browsers.
Series
- Part 18 of AO3 Work Skins/Tutorials
-
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,794
-
Tags
Summary
Bored with the default page dividers? This is a tutorial/live example on how customize your page dividers with no images needed (though I do show you how you could use images if you wanted to do such a thing).
Series
- Part 9 of AO3 Work Skins/Tutorials
-
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
-
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,794
Pages Navigation
Collections which have used it as a tag:
-
Nightcandle's Non-Fic Recs (Nightcandle_NonFic_Recs) by Nightcandle
27 Sep 2025
Collection Tags: AO3, AO3 Tags, AO3 Tutorial, Meta, Fanwork Research & Reference Guides, Harry Potter - J. K. Rowling, Internet & Social Media (Anthropomorphic), Multi-Fandom, No Fandom, Fandom - Fandom
Summary
A collection of my non-fic recommendations.
(Closed, Unmoderated)
-
Nightcandle's Recommendations (Nightcandle_Recs) by Nightcandle
27 Sep 2025
Collection Tags: Buffy the Vampire Slayer (TV), Harry Potter - J. K. Rowling, Multi-Fandom, No Fandom, Fandom - Fandom, AO3, AO3 Tags, AO3 Tutorial, Meta, Fanwork Research & Reference Guides
Summary
To better handle my Bookmarks, I sorted them into a few Collections.
I'm especially happy that it gave me the possibility to seperate the non-fic bookmarks from the fics (see the Subcollections).
It's much neater that way than everything mixed and mingled. 😊For anyone wanting to see everything at once, just stay here in the Parent Collection 😊
(Closed, Unmoderated)