Ao3 Tutorials
A collection of tutorials for HTML coding on Ao3, both for fic content and site skins, that I (khattikeri) want to save. This is essentially a bookmark collection.
A big thank you to the authors for allowing me to collect their works here.
(Closed, Moderated)
Recent works
-
How to: Block fanfics/tags/users & Hide too-long tag fields by vanetta
Fandoms: 魔道祖师 - 墨香铜臭 | Módào Zǔshī - Mòxiāng Tóngxiù, 陈情令 | The Untamed (TV)
12 May 2021
Tags
Summary
Have you ever had to scroll past a fanfic with too many tags, especially on mobile where it takes forever? A fic that updates daily and has tagged over 20 fandoms that you cannot escape seeing?
Well, here's how to block a fic on AO3, or how to block stories with certain tags or even the way to block specific users whose stories you don't want to see! You will not need to download anything nor create a specific bookmark on your browser.
Ch.1
-Block fanfics.
-Limit the amount of visible relationship/freeform tags with a scrollbar.
Ch.2
-General troubleshooting if you blocked a story but it still appears. A list of common mistakes you could have made and their fixes.
Ch.3
-Limit the amount of visible fandom tags. (Like in chapter 1, except for fandom tags instead of relationship/freeform tags)
Ch.4
-Block AO3 users so you won't see any of their stories when browsing AO3.
Ch.5
-Block tags with AO3 savior - A step-by step guide with detailed explanations, images and examples.Series
- Part 1 of Reference Guides
-
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
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
-
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
-
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