1 - 20 of 146 Works in Fanfiction Reference Works
Navigation
Listing Works
-
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. 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) -
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 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.
/)/) /)/) /)/) (..) (..) (..) *( ) *( ) *( )
Series
- Part 19 of AO3 Work Skins/Tutorials
-
Tags
Summary
Ever want to pop some bubbles? Ever want to use RNG to generate them? Well then, here's your handy, dandy bubble-popping game with Random Number Generator, all rolled into one! (Full code included.)
But wait, there's more! Yes sirree, Bob, this li'l baby comes with colors and patterns on its bubbles, and a little tense background music for ambience (might need a pop first, depending upon browser)... and no, it's not a Rick Roll (TL;DR from testing: audio in desktop Chrome, not desktop Opera, iPhone Safari, or Android Chrome; desktop results vary with settings for Firefox, TOR, and MS Edge — details in head-note). G'head: kick the tires and take her out for a spin! ❤️
And YES, it's PLAYABLE ! Tap / chase to click the bubble, find the next; OCD Heaven/Hell!
Don't panic! 😁
Series
- Part 7 of How to
-
Chess puzzle extravaganza by Charles_Rockafellor for Mewsmodeus (Mewzebub)
Fandoms: CSS abuse - Fandom, Chess - Fandom
13 Jul 2025
Tags
Summary
But does it play chess? While chess is hardly DOOM, there still are some constraints on actually moving things around without JavaScript (though gifbot has some ideas that might render such possible).
Don't panic! 😉
Time for some in situ RNG aikido.
I can't [yet] offer any definite way to actively play chess on AO3, and so, in lieu of such, I offer you 256 preconfigured static-display chess puzzles, one selected randomly per refresh, with random black or white to move, using only HTML and CSS, no offsite JS.
There are also some secret messages from the BBEG upon
:hoveron desktop Chrome, Firefox, Edge, Opera, and TOR [in a WIN 11 environment], or upon:touchon iPhone Safari (Android Chrome... is iffy, because Android : it has both worked and failed for me, so no guarantees). Lemme know how it is on Mac / 'nix!Part CSS extravaganza demo, and part How To for leveraging RNG for stunning results.
Series
- Part 6 of How to
-
Zenless Zone Zero Inter-Knot (AO3 Work Skin) by Pent
Fandoms: Zenless Zone Zero (Video Game)
28 Apr 2025
Tags
Summary
Have you ever wanted to add canon compliant Inter-Knot posts to your Zenless Zone Zero works? Now you can! This is an accessible, readable, and mobile-friendly AO3 work skin that imitates the look of in-game Inter-Knot posts.
Series
- Part 4 of Pent's Fandom-Specific AO3 Work Skins
-
Tags
Summary
Now that a version of AO3 is canon in the DC universe (called Tales of Our Own), here's a work skin to help you create a TO3 fic-within-a-fic! Complete with the top navigation bar, kudos, comments, and custom TO3 logos and styling.
-
Tags
Summary
This is a work skin to create a fic-within-a-fic on AO3, complete with the top navigation bar, kudos, and comments!
-
Tags
Summary
An accessible, screen reader friendly AO3 work skin that imitates the look of in-game Zenless Zone Zero DMs (Knock Knock).
Series
- Part 3 of Pent's Fandom-Specific AO3 Work Skins
-
Inside, Outside, Upside-down by Charles_Rockafellor
Fandoms: AO3 CSS, css - Fandom, HTML - Fandom
23 Mar 2025
Tags
Summary
I threw this together overnight (and have tweaked it some since then). Just applying a few little CSS party tricks that I've learned or developed along the way... 😉
My tricks aren't revealed in the narration, but since this is a How To series, you should be able to ferret them out by now — and if not, then take it as your homework challenge! ❤️
Use your 1337 haX0r Wiz zen skillz.
Click for keynote
Best viewed on a COMPUTER browser with a MOUSE, not a 'phone where some effects will be missed or simply not optimized (though there are a couple of surprises that appear on iPhone [not Android] rather than desktop browsers).
⚠️
CAUTION, beware of audio from invisible video; see notes.
⚠️Cf. notes in work skin for issues w.r.t. different approaches used in this work.
Series
- Part 9 of How to
-
Targeting specific AO3 work sections (not site) with CSS effects by Charles_Rockafellor
Fandoms: css - Fandom, AO3
26 Jan 2025
Tags
Summary
Want to apply CSS effects (e.g.: some background color, image, or .gif) to entire sections automatically from your work skin (without having to waste precious character count within said sections)?
Wish you could adjust the font, color, highlight, alignment, etc. of the section headers themselves? Perhaps even extend the work beyond the boundaries, covering that wasted space to the sides, and even the site page header and footer regions?
No clue where to even start? Tired of trying to find which part of the work is which from peeking at other works' work skin rules, or mucking about with trial and error?
🤣 Don't Panic. 😉
Here you'll find how to aim your work skin rules at any section of your work (or combination thereof) that you want — and yes, even how to expand those effects to outside of the work area ! (Even... comments )
I read, appreciate, and reply to all of your comments — they're always welcome! ❤️
Series
- Part 8 of How to
-
Tags
Summary
This is a guide to crafting explicit content, designed to make it less daunting for writers who might be new to writing smut but not new to storytelling. This is not a guide to anatomy or a step-by-step on sex acts; it's a mix of craft (what to write) and process (how to go about writing it) advice that aims to be practical and easily digestible.
It is illustrated with femslash examples, since that’s what I write most, and my aim is to help others feel more comfortable writing it. That said, the advice itself is largely non-specific.
-
Tags
Summary
CSS & HTML for a small box with text that looks like a classic text message.
-
Finished, Dropped or something else? How to make custom tags for story titles by Curvo
Fandoms: No Fandom
12 Dec 2024
Tags
Summary
A short guide on how to add tags next to fanfiction titles, so you know which stories you have already read or dropped when browsing for new ones to read.
-
La trahison qui ma fait les rencontrer. by FannyLafonLechat
Fandoms: Teen Wolf (TV), Legacies (TV 2018), The Witcher (TV), Supergirl (TV 2015)
10 Nov 2024
Tags
-
Hold-hands Inspired Texting Skin by cursedcuriosities (SetsuntaMew)
Fandoms: Ensemble Stars! (Video Game)
25 Sep 2024
Tags
Summary
This is a tutorial/live example for a Hold-hands inspired texting skin, based on the look of iOS messaging.
Series
- Part 2 of Killian's AO3 Work Skins
-
Tags
Summary
A simple and readable AO3 work skin that imitates various Final Fantasy XIV chat logs.
Series
- Part 2 of Pent's Fandom-Specific AO3 Work Skins
-
Tags
Summary
I deconstructed Heterochromia_Mars's Discord skin and reconstructed a new one that should work slightly better on screens of all sizes, especially mobile screens.
Note: Please check Chapter 3 for CSS code whenever the skin updates!
-
Tags
Summary
Just a quick and dirty HTML reference for AO3, with references to CSS style, HTML style, and other guides.
Series
-
AO3使用者標籤指南 by 麋象 (elkphant)
Fandoms: AO3 Tags, Internet & Social Media (Anthropomorphic)
25 Aug 2024
Tags
Summary
在 AO3，你可以隨心所欲填寫標籤。
但是，假如你想要的是最標準、最容易搜尋，或也能簡化標籤管理員工作的標籤，來參考這一篇簡易指南吧。
最初寫於 2013 年，2025 年 3 月重寫，以符合當下標籤與準則（如果這對讀者你來說已是很久以前，那麼或許又過時了）。
-
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.