HTML/CSS
This tag belongs to the Additional Tags Category.
Parent tags (more general):
This tag has not been marked common and can't be filtered on (yet).
Works which have used it as a tag:
Pages Navigation
-
nothing that i wouldn't want to tell you about by southslates for zelzenik, cythereans, pinspec, tuesdaysinoctober
Fandoms: Six of Crows Series - Leigh Bardugo
05 Jul 2021
Tags
Summary
When asked to comment, Helvar said that he "just admired and respected [Zenik] so much" and felt "incredibly lucky that he got to have such an amazing girl in his life".
AKA: Nina Zenik is totally not in love with her co-star, Matthias Helvar.
-
a royal disaster by zelzenik
Fandoms: The Legend of Zelda: Breath of the Wild, Hyrule Warriors: Age of Calamity (Video Game)
10 Jul 2022
Tags
Summary
A sleep delirious tweet sent by Princess Zelda of Hyrule has launched an all out search for her third grade crush. Who might this mysterious man be, and where could he be hiding? Follow me, Traysi, here at @TheRumorMill for the inside scoop!
-
little red bird by zelzenik for cythereans, southslates
Fandoms: Six of Crows Series - Leigh Bardugo, Shadow and Bone (TV)
15 Jul 2021
Tags
Summary
Matthias Helvar sat down with us the day before the release of his highly anticipated sophomore album, Little Red Bird.
When confronted on whether or not this particular album is about Helvar's ex, Nina Zenik, an up and coming movie star from Ravka, Helvar turned sheepish and shrugged his shoulders before confirming the world's suspicions.
"Were my naming conventions not obvious enough?" Helvar asked as he ducked his neck and his cheeks flushed bright red.
-
Catafalque by hexhomos
Fandoms: League of Legends, Arcane: League of Legends (Cartoon 2021)
07 Feb 2022
Tags
Summary
“Worse than last time?” Jayce posits a guess.
“It’s, eh-” Viktor shrugs. Tilts his chin this way and that. A tsk. “Bearable. I’ve endured worse hangovers in college.” he was going for a laugh, but the punchline never truly lands. Instead, Jayce’s thumb rubs softly into the back of his palm, pressing like he wants to idle the muscle mass into something new. It’s such a small thing, whatever this is, and yet it steadies the flow of his blood; the relief of loosening a valve, flicking off a pressure switch. It’s the necessary cracking-open of his breast. Jayce squeezes. Viktor allows himself the luxury of a sigh. “You shouldn’t be here.” he mutters.
Jayce reflexively shakes his head. “I took the day off.”
“We both know that’s-”
“—I could take the week.” he insists, almost a threat, a flicker of that eternal stubbornness coursing through him.
-
Viktor longs for a soft place in which to bury his teeth.
Series
- Part 2 of Arcane Works
-
Mimicking Twitch Chat for Fics- Some Twitch Chat Workskins by Ultraviollett
Fandoms: Video Blogging RPF, Fandom - Fandom, Real Person Fiction
05 Jul 2022
Tags
Summary
A CSS workskin to mimic twitch chat. I couldn't find any so I decided to create one myself!
Series
- Part 2 of AO3 workskins
-
THE FACT THAT SOMETIMES MEAT GETS CAUGHT IN THE GEARS OF THE GRAND MACHINERY WAS A SMALL CONSOLATION by hexhomos
Fandoms: League of Legends
26 Sep 2022
Tags
Summary
Giopara curses about an ache running down his back and throws the towel first, sliding over a meager list of page numbers and bite-sized lead citations that could, theoretically, turn out useful down the line. Says he'll nap until maybe he feels better. It’s fine. Viktor wishes him goodnight like a second nature, without any pretense or further thought.
He supposes there was a break between actions — there probably was, however small — but it almost doesn't matter, since the next thing registered in his memory is the feeling of Jayce's fingers treading his hair, the fact that he leans in close, and the kiss brushed at the side of his cheek.
Jayce says 'You too.' and leaves. Viktor swears he can hear the crook of his smile.
This is significant, because they're not yet at the stage where they do the kissing thing very often.
-
Viktor tries to provide some comfort. They're both very uncool.
Series
- Part 1 of Cogwork
-
Tags
Summary
[this is an updated version of one of my older workskins!] The perfect workskin for when your character is scrolling through Youtube. I've made it to work well with the workskin disabled, and to look more seamless in fics.
Series
- Part 3 of AO3 workskins
-
Mimicking Twitter Posts for Fics - Some Twitter Workskins by Ultraviollett
Fandoms: Fandom - Fandom, Real Person Fiction
20 Apr 2024
Tags
Summary
A repository of a twitter skin I made for Ao3, so you can add your characters tweeting at eachother inside your fic. Friendly towards different siteskins, disabled workskins, screenreaders and mobile readers.
This is mainly a demo, not a tutorial. I am currently planning to create a generator for this workskin on this site.
Series
- Part 4 of AO3 workskins
-
Tags
Summary
Another HTML/CSS template! This one for a basic chat log including usernames, optional times, and (obviously) message contents.
Series
- Part 4 of Frontend Shenanigans
-
Tags
Summary
hio (BEST CO-OWNER!!) Today at 12:00 PM
isagi r u gonna go detective mode?
will you use ur e-metavision??sagi Today at 12:00 PM
OH MY GOSH DIEnagi ♡’s reo Today at 12:00 PM
"catch me if u can mr holmes" ahh plotsagi Today at 12:01 PM
SHUT THE FUCK UP OTAKU.Isagi is a discord mod and his server gets nuked.
-
Tags
Summary
A tutorial on how to include a gift fic email into your fic.
-
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
-
Tags
Summary
The innies refuse to leave the severed floor after the events of Cold Harbor. The world notices. Social media users have a few opinions to share on Lumon, its renegade heiress, and the former history professor whose dead wife keeps being spotted throughout town.
[Graphic Format: Uses HTML and CSS]
Series
- Part 1 of All Versions (Plain Text and CSS) of Media Circus
- Part 1 of Media Circus-Verse
-
Tags
Summary
Duckie @goducksgo
are you fr suggesting a kpop group murdered their rivals on stage and got away with it lmaokieran @legendary_brush
the namsan tower performance WASN’T just special effects (sfx), a thread [1/?]misty @kpopismylife
oomf what the hellThe new Honmoon isn't perfect.
(multimedia fic ft. HTML)
-
Tags
Summary
In effort to jog her memory, Haseul went on a trip across half of Japan with her life-long woven friend, the nameless Protagonist (which definitely not inspired by Mieko Kawakami's Heaven Protagonist).
[The nameless protagonist is whoever you want them to be]
Series
- Part 1 of Songbird(s)
-
Ultra Dark (Ellipsus) LOW CONTRAST AO3 Site Skin by Geekly
Fandoms: Original Work, Archive of Our Own, AO3, No Fandom
01 Oct 2025
Tags
Summary
A dark mode site skin for AO3 that can be described as "an ink-black backdrop for your work", adapted for people with extreme light sensitivity.
Series
- Part 1 of Ellipsus Inspired Site Skins for AO3
- Part 1 of Dark Mode AO3 Site Skins
-
Ultra Dark (Ellipsus) AO3 Site Skin by Geekly
Fandoms: Original Work, Archive of Our Own, AO3, No Fandom
05 Oct 2025
Tags
Summary
A dark mode site skin for AO3 that can be described as "an ink-black backdrop for your work".
Series
- Part 2 of Ellipsus Inspired Site Skins for AO3
- Part 2 of Dark Mode AO3 Site Skins
-
Pride Dark (Ellipsus) AO3 Site Skin by Geekly
Fandoms: Original Work, Archive of Our Own, AO3, No Fandom
05 Oct 2025
Tags
Summary
A dark mode site skin for AO3 that can be described as "a little late-night rebellion, the dark side of Pride. Because queer joy should shine in every word you write."
Series
- Part 3 of Ellipsus Inspired Site Skins for AO3
- Part 3 of Dark Mode AO3 Site Skins
-
Tags
Summary
Looking for a break from corporate monotony?
Board the maiden voyage of the S.S. Helena, Lumon’s premier luxury space cruise! Join future CEO Helena Eagan for a three week exploration of our solar system where you’ll discover endless entertainment, ultimate luxuries, and an array of activities provided by our first class Severed staff. Don’t miss your chance to dance among the stars, book your cruise today!
-
When disillusioned heiress Helena Eagan and restless severed employee Mark S. meet on a Lumon space cruise, the trajectories of both their lives are forever changed.
-
Afterglow (Ellipsus) AO3 Site Skin by Geekly
Fandoms: Original Work, Archive of Our Own, AO3, No Fandom
08 Oct 2025
Tags
Summary
A dark mode site skin for AO3 that can be described as "sunset fading to dusk".
Series
- Part 4 of Ellipsus Inspired Site Skins for AO3
- Part 4 of Dark Mode AO3 Site Skins
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
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.Ao3 Twitter Template Generator now available! (Made possible by the amazing Anlanther): Now you only have to fill in your text and copy-paste the generated code!
-
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
- Language:
- English
- Words:
- 4,500
- Chapters:
- 2/2
- Collections:
- 7
- Comments:
- 385
- Kudos:
- 3,908
- Bookmarks:
- 3,808
- Hits:
- 169,107
Bookmarked by DistantManiacalLaughter
02 Oct 2024
Bookmarker's Tags:
Bookmarker's Notes
Hhg. Nnnhj. HG
-
HTML test coding by Grumpy_Old_Snake
Fandoms: Original Work, Undertale, html help, Non-Fiction - Fandom
10 Jul 2017
Tags
Summary
I set out to see if there's a way to create Sans' spread out dramatic speech in a readable way that line-breaks smoothly. I believe I was successful! So here are some instructions.
-
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)
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) -
CSS in Testing by InfinitysWraith
Fandoms: Ao3 Skins - Fandom, Work Skins - Fandom, css - Fandom
18 Apr 2022
Tags
Summary
This is a flaming dumpster filled with CSS and HTML experiments. It's not instructional, but I post the code and my own explanations for both our sakes. Feel free to steal the code or ask me questions- I don't know what I'm doing. :)
(Pics are mine though)
Chapter 5 is probably what you're looking for ;)
I'm not going to say I take requests, but I'm always looking for inspiration.
It seems I've broken Ao3 yet again. I can no longer add more code to my work skin so we're moving on to part two!
Series
- Part 1 of CSS in Testing
Bookmarked by DistantManiacalLaughter
02 Oct 2024
Bookmarker's Tags:
Bookmarker's Notes
That one with animated doors and text appearances. I’m about to die. Somebody kill me before i fly too close to the sun
WEBPAGE MARRY ME HAVE MY CHILDREN
-
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
CSS and work-skin for a fake local journaling app for use in fics. Use it to style journal/diary entries for a character who wouldn't post their innermost thoughts in a blog, but would put them in a device for themselves.
- Language:
- English
- Words:
- 1,719
- Chapters:
- 4/4
- Collections:
- 2
- Comments:
- 2
- Kudos:
- 78
- Bookmarks:
- 74
- Hits:
- 3,534
Bookmarked by DistantManiacalLaughter
03 Oct 2024
Bookmarker's Tags:
Bookmarker's Notes
So..,,…ssoo cool…..lll….
-
Tags
Summary
A Reddit template for use on AO3.
-
Template for Adding Post-Chapter Content by SpookyTesting (FierySprites)
Fandoms: No Fandom
22 Feb 2022
Tags
Summary
A personal reference for integrating "extra scenes" after the end of a regular chapter, as used in But the Fates Aren’t Done With Me Yet.
-
Tags
Summary
What it says on the tin.
A mock-up of instagram direct messages without having to use screenshots.
- Language:
- English
- Words:
- 601
- Chapters:
- 1/1
- Collections:
- 4
- Comments:
- 12
- Kudos:
- 106
- Bookmarks:
- 112
- Hits:
- 6,667
Bookmarked by pocketsofstars
12 Dec 2024
Bookmarker's Tags:
Bookmarker's Notes
instagram dm code using html and css
-
How to Override the Archive's Automated Chapter Headers by C Ryan Smith (AiedailEclipsed)
Fandoms: No Fandom
25 Nov 2018
Tags
Summary
This is a tutorial/live example on how to override the Archive's automated chapter heading system and define your own (eg remove "Chapter 1: Chapter Title" and insert "Act 1, Verse 1" instead).
-
Tags
Summary
Live example and tutorial on how to include an Amazon product review in your work.
Series
- Part 1 of AO3 Work Skins
-
Tags
Summary
Youtube Comment section Workskin.
-
Whatsapp Work Skin Template /Revamped by etc e tal (pe_pe_peperoncinocandy)
Fandoms: No Fandom
21 Apr 2023
Tags
Summary
Whatsapp work skin.
- Text messages, photos, videos, voice messages, links and quotes;
- Group chats;
- Header and icons;
- Scrollable. -
How to make a News Website Article skin on Ao3 by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
26 Dec 2019
Tags
Summary
Live example and tutorial for a news article extract that include website header, fake social media buttons, title and author of the article.
Series
- Part 1 of CSS code scripts for Ao3
-
AO3 Work Skin for In-Universe Investigative/Mission Report With Redaction by wafflelate
Fandoms: No Fandom
10 May 2020
Tags
Summary
This work provides the CSS and HTML necessary to make a fanfiction look like an investigative report or mission report, suitable for a variety of fandoms and purposes.
-
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
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.Ao3 Twitter Template Generator now available! (Made possible by the amazing Anlanther): Now you only have to fill in your text and copy-paste the generated code!
-
Tags
Summary
Primarily just where I share work skin code and discuss ways to improve the Ao3 experience, including:
- Twitter and Instagram like posts
- Non iOS messaging systems
- Avatar and image formatting for script formats.
- Search engine interfaces
- Documentation on AO3 Site SkinsSeries
-
Tags
Summary
A tutorial + live example on how to add Gmail-esque emails into your fic using CSS and HTML.
Series
- Part 3 of Cool Coding Kumquats