1 - 20 of 72 Works in HTML & CSS stuffs
Navigation
Listing Works
-
Userscript and CSS, as you prefer, to return overflow and sticky effects client-side by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor) for feindcode (feind)
Fandoms: CSS abuse - Fandom
12 Jun 2026
Tags
Summary
What can I say that isn't pretty self-evident from the title?On Mon 08 Jun 2026, AO3 updated some stuff that broke a lot of things in a lot of people's CSS-works (and at least one userscript). I fixed it. This fix is only client-side, so that you can re-enable some of the magic that some people have wrought and see it once more as a reader — it doesn't act from within a work skin to force a rollback to the actual server-side site-level underlying code itself, so it's not much good directly for authors (indirectly: your readers might use this to see your effects).
Have you seen some of my CSS demos, or a number of heavy hitters' works that the change broke?1 If so (before the “update”), then you know and remember; if not, then you're going to want to do so, and you'll want this CSS or JS with which to view them in all of their glory.
-
Olive Pine Moon site skin theme by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: Site Skin - Fandom
03 May 2026
Tags
Summary
This theme uses an olive tone as its basis, and was built at the request of a Redditor.
It requires ravenothere's Closer to Home BASE site skin in order to function.
-
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) -
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! ❤️
NB: Cf. Userscript to return tailored kudos thanks' and styled comments' visibility client-side re. CSS to return
overflowandsticky, or link for same as a userscript.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.
Permit those messages to be seen and go brrrrr again (at least for you as a reader).
I use it in Violentmonkey and Tampermonkey. 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 one (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!
2x bonus: link at bottom for stats' page SERIES bookmark count.
3x bonus: link beneath that to returnoverflowandsticky.Don't Panic
Make Kudos Great Again!
* Full code included -
Tags
Summary
Popup tooltips that work well on both desktop (hover) and mobile (tap open and close). Constrained width, so best for short tooltips or translations for a couple words at the most.
Series
- Part 1 of Simbeline's Work Skins
-
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!
-
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!
Think back to things like Zork (or as a poor simile: 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?
WARNING: Open in single-chapter.
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
-
How to Block Tags With Site Skins (And Get Real Specific About It) by Stellar_Eclipse
Fandoms: No Fandom
25 Jun 2025
Tags
Summary
Just some info I've gathered over the past couple of weeks, about how to:
1. Block tags using Site Skins, block only fics that contain both tag A and tag B, and block fics with a tag that contains a certain phrase, unless they are a specific whitelisted tag
2. Highlight the tags in pretty colors! Or bold, or hide them!
3. Block mega-crossovers with a million different fandoms
4. Select for/block fics that are completed/rated something/have a certain category/don't have summaries
5. Block everything that doesn't have a certain tag, or one of a list of tags
6. Block orphan_account and tag block by author
7. Block only tags of specific types (fandoms, relationships, freeforms, etc.)
8. Block fics focused on a list of characters, and/or fics without any tags of a specific type
9. Block every pairing with two characters in it—case insensitive, any order, no matter how many other people are also in the tag
10. Block by number of tagsSeries
- Part 1 of Site Skins and CSS Quackery
-
Inside, Outside, Upside-down by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (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
-
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!
-
Targeting specific AO3 work sections (not site) with CSS effects by Charles_Rockafellor, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (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
-
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
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
A guide to an AO3 work skin to change the colors of various pieces of text in your fanfiction. Uses HTML. This can turn hyperlinks blue, for instance.
-
Tags
Summary
A tutorial on transforming regular black paragraph dividers into rainbow dividers in AO3. Uses HTML.
-
Twitter HTML & CSS Coding Test Run by Fluffycorn_njst
Fandoms: Marvel Cinematic Universe, The Avengers (Marvel Movies), Haikyuu!!
20 May 2023
Tags
Summary
All of the different kinds of Twitter tweet templates displayed in one place as demonstrated using characters from fandoms written above! Includes the source of the HTML & CSS code work used here!
ALL THE CREDIT goes to gadaursan's Twitter guide & tutorial for the coding! And so I'm basically just a glorified display case to see more examples of what the design looks like! I also only did this to try it out for fun and practice in case I'd use it in the future~