19 Works in Non-Fandom Formatting Guides
Listing Works
-
Userscript to add Series [Public] Bookmarks total count to author's stats page by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: AO3 stats - Fandom
04 Jan 2026
Tags
Summary
It's bugged me vaguely for years, though never enough that I really cared... but it hit me last night: if JS can do one thing, such as return the special kudos messages to their days of tailored glory, then it can do another, so... yeah, why not?
If you want to see your series' total number of public bookmarks in your stats page: you got it! ❤️
Full code included.
-
Userscript to return tailored kudos thanks' and styled comments' visibility client-side by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor) for Mewsmodeus (Mewzebub), GumbaBunny
Fandoms: CSS abuse - Fandom
02 Jan 2026
Tags
Summary
Remember when people started tailoring their kudos messages and error notices? Pepperidge Farm remembers — and so do I.
Not a site skin, but much like one: a script permitting those special messages to be seen in the work skin again.
Not much more to say: this gives you a userscript in JS that you can plug in and make things go brrrrr again (at least for yourself as a reader). I use it in Violentmonkey in Firefox. I don't speak JS (this is me dipping my toes into the water here) and am not at all familiar with the ins and outs of all of the different userscript managers, so you might need slightly different syntax or something if you use a different manager (and since I discovered last night that Chrome no longer supports Violentmonkey, and it seems that Tampermonkey and others aren't really open source, I was stuck between Skýlla and Khárybdis).
And bonus: it even permits the effect on multichapter works in single-chapter mode!Don't Panic
Make Kudos Great Again!
* Full code included -
RNG in site skins by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: css - Fandom, HTML - Fandom
07 Nov 2025
Tags
Summary
〽 ♪ ♫
Do you want to build a site skin...?
Come on, let's go RNG !
♫ ♪1950s TV announcer voice cuts in:
Is that you whom I see, staring wistfully at flashy websites with eye-bleeding '90s randomization, never knowing what the next site in the webring might bring? Or how about you — yes, you, right there, reading this — do you yearn to expand the limitations of work skin RNG past the 500K char count, and you're not sure of where to turn?
Well, do I have a deal for YOU!Yes, my friends, you, too, can have the random surprise package of your dreams, with this handy-dandy never-before-seen unlimited time offer of one RNG Site Skin introductory proof of concept for the low, low, low price of a kudos and a comment (not that I'd complain about shares, subs, and bookmarks 😉)!
How whoa can you go?
* Reader participation required.
Bonus: Target n-tuple works with totally different rules from one single skin.
Cautionary tale: not 8 new RNG sources in DOM, only page source!
-
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
-
Hunt the Wumpus by Charles_Rockafellor
Fandoms: Interactive Fiction | IF, Hunt the Wumpus (Interactive Fiction | IF)
20 Oct 2025
Tags
Summary
Playable game with RNG (Random Number Generator) driven random events!
If you don't remember this game, think back to things like Zork (or, as a poor simile, something remotely like Sir-Tech's Wizardry series in atmosphere [this version of Wumpus being far less graphics-intensive]).
Armed with vorpal arrows and bearing lid-bags of wumpusnip and wumpuspurge of dubious effectiveness in hope of alternately luring and warding away the evil monster, will you take up the gantlet?
Who says that CSS is 𝖍ard?
(NB for TTS screen readers: that last word was “hard”, not “ard”, but I cheated with an “h” from an unusual Unicode range instead of CSS, so that it would remain visually odd in the Summary... and found that my testing-purpose [and sometimes laziness] freebie TTS browser extension can't read it... because of course.)NB 1: HTML-structural redundancy bloated the word and chapter counts; ~15K actual words (~4K vis. by RNG) and 20 caves!
NB 2: More PG than G, about as graphic as Oregon Trail, but I'm not sure if that's enough to rate as Teen.
-
Bubble-pop! game by Charles_Rockafellor, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: css - Fandom
27 Jul 2025
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, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (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
-
Tags
Summary
A tutorial on how to include a gift fic email into your fic.
-
Tags
Summary
A brief guide to putting a pair of cards, a deck or a game of Cards Against Humanity into your fanfic!
-
How to Mimic LiveJournal Posts and Comments by cursedcuriosities (SetsuntaMew)
Fandoms: No Fandom
17 Apr 2023
Tags
Summary
This is a tutorial/live example on how to mimic mid-2000s LiveJournal posts and comments.
Series
- Part 1 of Killian's AO3 Work Skins
-
Decorations for Fic (HTML/CSS): Fan Art, Dividers, Embedded Songs, and More by Jnsn
Fandoms: No Fandom, Archive of Our Own
24 Jul 2021
Tags
Summary
NON-FICTION. This work shows some examples of use of HTML/CSS to decorate a fic with art and other things. The second chapter provides the HTML for each example.
-
Tags
Summary
Documentation/Examples for the CSS workskin and HTML code for a Wikipedia article inspired layout to use in your mixed media works.
Created with help from Nautilusopus and DarthTofu.
-
Fonts, and colors, and work skins, oh my! by Charles_Rockafellor, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: css - Fandom, Work Skins - Fandom
24 Jan 2021
Tags
Summary
Explains:
● how to make a work skin;
● how to view fics' work skin rules;
● how to colorize text and circle words and highlight backgrounds (examples in head-note), and change and resize your fonts;
● how to turn all links blue-underscore automatically;
● the CSS code for diacritics to render properly, e.g.: “ầ” & “ồ” (with diacritics not superimposed), or “ị” (with underdot directly beneath, not kerned to the left), without breaking words such as “gầu” or “vịt” (using a monotype font for these letters would create gaps to each side of the ầ or the ị). Head-note has corrected examples;
● Site Skin addenda to block / shrink tags, and block authors / works;
● even a quick way (code included) to simply make a Site Skin so that you can read everything in your font of preference!Full code is included.
I read, appreciate, and reply to all of your comments — they're always welcome!
𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️
Series
- Part 5 of How to
-
Tags
Summary
A simple text message format that retains basic readability even without skins enabled. Please feel free to use. Instructions included, some assembly required ;) Please feel free to comment if you have any questions or issues.
-
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
-
How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile) by La_Temperanza
Fandoms: No Fandom
22 May 2017
Tags
Summary
This a tutorial/live example on how to have text change or appear once a cursor is hovering over it. Helpful for pop-up spoilers, language translations, quick author's notes, etc.
Series
- Part 15 of AO3 Work Skins/Tutorials
-
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
-
How to Make Invisible Text (That Can Be Highlighted) by La_Temperanza
Fandoms: No Fandom
21 Oct 2015
Tags
Summary
This is a live example how to make invisible text that can only be seen by highlighting the text. Tutorial is included in text, and you can always leave comments about questions you may have.
MOBILE USERS: Sadly, this probably won't work for you, since highlighting in a mobile browser is different than web. I've tried correcting this, but have yet to find a solution.
Series
- Part 4 of AO3 Work Skins/Tutorials
-
Tags
Summary
Original coding and design is from layouttest. I make no claims for it, just tweaked it so it will work on AO3.
Series
- Part 5 of AO3 Work Skins/Tutorials