StygianRiver
Fandoms
Recent works
-
Tags
Summary
You can always start again.
-
Tags
Summary
Without fanfare, Joker is dropped back in time. He adjusts exactly as quickly as he needs to.
-
The World Without You by stygianwriter (StygianRiver)
Fandoms: D.Gray-man (Anime & Manga)
25 Aug 2025
Tags
Summary
The day after he leaves Mater, Yuu stops by a flower shop. It's not something planned, so maybe it's more accurate to say that the flower shop stops him.
-
Tags
Summary
Siffrin has some fears, and his family asked, so he should talk about them. It's just... hard, still.
-
Tags
Summary
Tokyo is a city of firsts.
(Or: Stumbling through a life he's never lived, Akira tries to figure out what it means to be a person.)
Recent series
-
Fly the Nest by stygianwriter (StygianRiver)
Fandom Magic Kaito, 名探偵コナン | Detective Conan | Case Closed
05 Apr 2023
Summary
Through mysterious forces, Kaito ends up in a reality where KID doesn't exist, and his dad never died. Not all is well.
- Words:
- 85,090
- Works:
- 2
- Bookmarks:
- 46
-
Identity Crisis (Standalone Stories) by stygianwriter (StygianRiver), WildNoa13474 (StygianRiver)
Fandom Code Geass, D.Gray-man (Anime & Manga), Glee, Katekyou Hitman Reborn!, My Babysitter's A Vampire, Percy Jackson and the Olympians - Rick Riordan, Soul Eater (Anime & Manga), Supernatural, Sword Art Online (Anime & Manga), Teen Wolf (TV), The Avengers (Marvel) - All Media Types, The Flash (TV 2014), Thor (Movies), Voltron: Legendary Defender, Young Justice (Cartoon)
20 Sep 2024
- Words:
- 72,527
- Works:
- 8
- Bookmarks:
- 27
Recent bookmarks
-
How to target specific elements of your work (for work skins) by hearker (heark)
Fandoms: HTML - Fandom, Work Skins - Fandom, AO3 help - Fandom, No Fandom, css - Fandom
15 Aug 2025
Tags
Summary
This is a guide to help you precisely target elements in your work skins using CSS selectors. It doesn't focus on styling or adding cool effects!! This guide teaches you how to identify and select the exact elements you want to style.
CHAPTER 1 - Work Title
CHAPTER 2 - Author Name
CHAPTER 3 - Summary
CHAPTER 4 - Notes Part 1
CHAPTER 5 - Notes Part 2
CHAPTER 6 - Gifts
CHAPTER 7 - Inspired By
CHAPTER 8 - Chapter Title
CHAPTER 9 - Series
CHAPTER 10 - Selecting Multiple Headings
CHAPTER 11 - Body Text
CHAPTER 12 - Preface GroupNote: This guide contains custom CSS. It's not necessary for the guide, it's only cosmetic. If you want to disable it, click "Hide Creator's Style" at the top.
Series
- Part 1 of heark's work skin tutorials
Bookmarked by stygianwriter (StygianRiver)
09 Jun 2026
Bookmarker's Tags:
Bookmarker's Notes
!!!!!
Favorite parts: summary headings, the entire series chapter
They're just so tasty looking! -
Tags
Summary
This is a tutorial and live-example on how to use CSS skins and HTML on AO3 to make some stylish card links that move around and look pretty cool when you hover your cursor over them :)
Series
Bookmarked by stygianwriter (StygianRiver)
08 May 2026
Bookmarker's Tags:
Bookmarker's Notes
PRETTY!?!?
-
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)- Language:
- English
- Words:
- 14,992
- Chapters:
- 20/?
- Collections:
- 7
- Comments:
- 203
- Kudos:
- 1,043
- Bookmarks:
- 967
- Hits:
- 39,473
Bookmarked by stygianwriter (StygianRiver)
22 Feb 2026
Bookmarker's Tags:
Bookmarker's Notes
Part 2 lines:
A lot of people like fancy lines as line breaks. The problem: that's awful for people with screen readers. What you can do instead is this. (fancy line breaks withiut using images)
Part 9:
Changing the username (making it no longer link back to your actual user page but worth it)
Part 18 automated text animation:
Okay this is truly obnoxious to do for anything longer than a word, but what if I cheese it. What if the first word I iterate every letter, then for the rest of the paragraph I iterate every word, then for the rest of the page I iterate every paragraph, then after the first page (if there are multiple) I stop iterating. That still gives the reader the 'loading' kind of effect but is way more bearable to code.
-
Skin for Recreating Persona 3 Portable’s Dialog Select Box by SpookyTesting (FierySprites)
Fandoms: Persona Series, Persona 3
26 Oct 2025
Tags
Summary
A work skin for recreating the dialog selection speech bubble from Persona 3 Portable, along with the ability to add working hyperlinks.
Bookmarked by stygianwriter (StygianRiver)
22 Feb 2026
Bookmarker's Tags:
Bookmarker's Notes
This is SO cool, especially being able to select the options (even without hyperlinks attached. Just clicking the options and seeing them change color is so much fun.)
-
Tags
Summary
A short & sweet guide to a work skin (and the associated HTML) that allows readers to choose from a list of given names for a character and select which one they want the work to use.
Series
- Part 3 of Frontend Shenanigans
Bookmarked by stygianwriter (StygianRiver)
22 Feb 2026
Bookmarker's Tags:
Bookmarker's Notes
With this workskin the reader can choose their preferred character name (not screen reader accessible)
I think by simply adding another class right after the first one in the selection list items, the selection of that item will trigger both classes... Maybe...? Therefore allowing you to make the second class the character's family name? So instead of for example [details class="A-1 checkbox"] make it [details class="A-1 L-1 checkbox"] where L-1 will defined in the workskin as a specific family name. Then instead of [ul class="namelist char-A"] make it [ul class="namelist char-A char-L"] (I don't see the class 'char' defined anywhere, so I assume it doesn't need to be seperately defined and I can replace it with whatever I want? Unless char is a default class in ao3? But I don't think it is)
No need to think about the workskin if I just treat L-1 as if it were a separate character and edit the workskin accordingly. The only problem is making both classes register for the same checkbox, and this may work? Test it
Additional info in the comments:
The reader can choose to show or hide potentially triggering content (screen reader accessible)when the option ‘Hide graphic content’ is checked, hide one class and show the other. What does that check look like? It doesn't need to be work-wide for my purposes... Maybe if .checkbox equals class[open].
has(.graphic[open]): .graphictext(visibility: hidden) .safetext(visibility: visible)
Maybe?
There doesn't actually need to be a second checkbox, it can just depend on if the one checkbox is checked or not. So does it need a class of its own...?