CSS Abuse and HTML Tryhard
My HTML and CSS works are growing, and they're not all in the tutorial series (though honestly, a lot of my regular fics [not in this collection] have snippets of CSS in their notes, outlining and explaining quick little bits of computer magic used for an offhand effect [not being the focus of the work] in some chapter), but I figured that collecting the particularly CSS-heavy or *-related works (tutorials, demos, games, etc.) into one spot might be useful for readers and researchers, so... here they are, all in One Big Happy — ENJOY! 😁
Tutorials, QRLs (Quick Reference Lists), demos, [playable] games.
(Closed, Moderated)
Random 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 mystyrust's do you believe in coincidences?, or Mewsmodeus (Mewzebub)'s I'M NOT AN FANFIC AUTHOR PLEASE DON'T CURSE ME, or mackerel_cheese's Íkaros in when the wax melts ? 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.
-
How to AO3 by Charles_Rockafellor, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: AO3
24 Sep 2023
Tags
Summary
New to AO3 (or even not so new)? Have questions? Dazed and confused?
...do your notes in chapter one stay stuck to the most recent last chapter? 😉
Does your chewing gum lose its flavor on the bedpost overnight?
Start here.🙂 DON'T PANIC ! 🙂
This is a beginner's guide / primer / introduction for readers and writers (possibly better titled “Guide to the Archives”, as someone suggested on Facebook — though that makes me feel like Virgil to some Dantean cerchio or bolgia, prompting me to think instead “Guìdo della archivio” [my 13-14c Genoan is a bit rusty, seriously, so I hope that I got that right]). My later tutorials in this series cover somewhat more advanced stuff, but I've seen so many people (sometimes long-timers) in need of the basic stuff that I finally decided to write this.
One Stop Shop-'n'-Drop? Not quite, but it explains a lot of things that you might not find easily (in some cases, not for years), or might assume work like some other site (which is a hit or miss assumption), and will point you to a number of resources.
Series
- Part 1 of How to
-
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
-
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 -
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