HTMLs n CSS
This tag belongs to the Unsorted Tag Category.
This tag has not been marked common and can't be filtered on (yet).
Bookmarks which have used it as a tag:
Pages Navigation
-
Tags
Summary
a work skin that mimics the program Discord (for chatfics or fics that feature use of it!)
made this skin over a couple days; it won't look good on mobile or with creator's style disabled but the html is pretty easy to customise!
(Note: some folks in the comments have been kind enough to share some fixes for a few of the problems!)If you use it, crediting and linking back here so other people can find it is appreciated :)
EDIT: I haven't updated this in quite some time so I'm giving blanket permission for people to share their own fixed and improved versions of the code! Just link back here so people can find some help for how to use it. happy writing!
-
Tags
Summary
A companion to Repository. A comprehensive guide to coding focused solely on emulating Twitter posts for fun or for archiving Twitter fics, up to and including:
- Quote Retweets
- Embedded Images
- Twitter PollsSeries
-
Tags
Summary
Based on gadaursan's "Fire Emblem Support Scripting" work skin, a HTML and CSS to format screenplay and scripts (or dialog-only/dialog-heavy works), but with some edits: 1) adjusted the images for smaller screens, 2) added a text box/speech bubble, 3) In version 3, added character's name.
Series
- Part 1 of Clover Zero's AO3 HTML & CSS
-
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
-
Css in Testing: Second in the Series by InfinitysWraith
Fandoms: Ao3-Skins, Work-Skins, css - Fandom
21 Aug 2023
Tags
Summary
𝔚𝔢𝔩𝔠𝔬𝔪𝔢 𝔱𝔬 𝔭𝔞𝔯𝔱 𝔱𝔴𝔬 𝔬𝔣 𝔴𝔥𝔞𝔱 𝔦𝔰 𝔫𝔬𝔴 𝔞𝔭𝔭𝔞𝔯𝔢𝔫𝔱𝔩𝔶 𝔞 𝔰𝔢𝔯𝔦𝔢𝔰 𝔟𝔢𝔠𝔞𝔲𝔰𝔢 ℑ 𝔟𝔯𝔬𝔨𝔢 𝔰𝔬𝔪𝔢𝔱𝔥𝔦𝔫𝔤 𝔦𝔫 𝔪𝔶 𝔩𝔞𝔰𝔱 𝔚𝔬𝔯𝔨 𝔖𝔨𝔦𝔫 𝔞𝔫𝔡 𝔠𝔞𝔫'𝔱 𝔞𝔡𝔡 𝔞𝔫𝔶𝔱𝔥𝔦𝔫𝔤 𝔪𝔬𝔯𝔢 𝔱𝔬 𝔦𝔱 :)
𝔜𝔬𝔲'𝔯𝔢 𝔴𝔢𝔩𝔠𝔬𝔪𝔢 𝔱𝔬 𝔞𝔰𝔨 𝔮𝔲𝔢𝔰𝔱𝔦𝔬𝔫𝔰, 𝔰𝔱𝔢𝔞𝔩 𝔠𝔬𝔡𝔢 𝔬𝔯 𝔬𝔣𝔣𝔢𝔯 𝔪𝔢 𝔦𝔫𝔰𝔭𝔦𝔯𝔞𝔱𝔦𝔬𝔫. 𝔍𝔲𝔰𝔱 𝔡𝔬𝔫'𝔱 𝔱𝔞𝔨𝔢 𝔪𝔶 𝔞𝔯𝔱𝔴𝔬𝔯𝔨 𝔴𝔦𝔱𝔥𝔬𝔲𝔱 𝔞𝔱 𝔩𝔢𝔞𝔰𝔱 𝔩𝔦𝔫𝔨𝔦𝔫𝔤 𝔪𝔢 𝔶𝔬𝔲𝔯 𝔣𝔦𝔠 ;)
ℑ𝔣 𝔶𝔬𝔲 𝔥𝔞𝔳𝔢𝔫'𝔱 𝔞𝔩𝔯𝔢𝔞𝔡𝔶, 𝔱𝔞𝔨𝔢 𝔞 𝔩𝔬𝔬𝔨 𝔞𝔱 𝓟𝓪𝓻𝓽 𝓞𝓷𝓮 𝔣𝔬𝔯 𝔪𝔬𝔯𝔢 𝔭𝔯𝔬𝔧𝔢𝔠𝔱𝔰.
Click me!
Ao3 done unleashed a monster right here and it's goddamn beautiful.
Series
- Part 2 of CSS in Testing
-
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
-
Tags
Summary
This is a tutorial/live example on how to create a "Choose Your Own Adventure" fic. While this has been explained before (see here), this particular tutorial shows you how to use a work skin to hide the next parts from the reader until they click through to get to them.
Series
- Part 16 of AO3 Work Skins/Tutorials
-
YouTube/Twitcast Stream Workskin (Reonicake Edition) by reokeiki (reonicake)
Fandoms: No Fandom
26 Jun 2026
Tags
Summary
Live example and guide for a YouTube stream workskin I made for my own use :) feel free to use this in your own fics !
Series
- Part 5 of Riri's HTML Experiments
-
Tags
Summary
This is a tutorial for inserting a responsive open book or journal into your work. We will be using HTML and CSS as well as two optional image files. Code is ready for use, but there is also a very detailed explanation of the lines of code used for those who would like to edit or troubleshoot.
-
Skin for Recreating Persona 4 Revival’s UI Elements by SpookyTesting (FierySprites)
Fandoms: Persona Series, Persona 4
10 Jun 2026
Tags
Summary
A work skin for recreating various UI elements from Persona 4 Revival, including the text boxes and dialog selection process.
For convenience’s sake, the last chapter contains all of the CSS code in one place.
LATEST ADDITIONS:
► 1. Text Boxes & Dialog Options
► 2. Current Date & Objective
► 3. Social Stats -
Tags
Summary
A (somewhat legacy) Google Classroom format, coded for use within Ao3 with the text being highlightable and not requiring the use of screenshots.
(CURRENTLY NOT MOBILE-FRIENDLY)
-
Tags
Series
- Part 2 of anons workskins
-
Tags
Summary
Code and Tutorial for a Reddit post and comment section.
-
Ensemble Stars Dialogue Work Skin Tutorial by 358over2
Fandoms: Ensemble Stars! (Video Game)
16 Apr 2026
Tags
Summary
—-
A CSS & HTML tutorial on how to create Enstars-specific dialog boxes for dialogue-heavy writing and roleplay purposes. (Similar to how translation sites format them!)
>> Pre-made icon assets
>> Speech bubble colors unique to each character
>> Includes Ibuki, Esupuri, and Mellow Dear Us -
Tags
Summary
Work skin that mimics an academic journal article being accessed through an online database.
-
Tags
Summary
iMessage as it looks in iOS 7 to present.
Series
- Part 1 of Azdaema's AO3 Messaging Skins
-
Now Playing / Music Notification AO3 Work Skin Guide by imperiousmarshmallow
Fandoms: No Fandom
15 Mar 2025
Tags
Summary
A tutorial to mimic a basic iOS-style 'Now Playing' notification for your stories.
Series
- Part 2 of AO3 Work Skin Tutorials
-
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 workskin guide for emulating the appearance of a ChatGPT conversation thread.
-
Tags
Summary
A scrollable lockscreen with notifications (instagram dms)