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
-
Tags
Summary
Detective Emma Swan is Killian Jones' partner, his best friend. When his best friend seems to fall into a depression after a short vacation, he will do anything he can to help her
-
Tags
Summary
A small experiment inspired by jedijae's The Once and Future Queen. What would the news be like after the murder in the first chapter?
-
Tags
Summary
As of April 2016, The database that stores works on A03 does not allow emoji. If you try to add an emoji it will end your story there. Any words after the emoji? Poof. Gone. This is a known, if poorly advertised, issue with the archive.
There are some workarounds; you can find them in: How to Make iOS Text messages on A03. But here? Here is for ALL THE EMOJI*.
10 chapters of emoji tables, each with the HTML for putting the emoji into your work and the CSS for putting it into your workskin. Copy-Paste baby. Copy-Paste.
*Does not contain the 2016 Unicode release. You'll have to come up with the code for pickle yourselves.
(Note, because this is 10 chapters of emoji tables, here is a link to the Index Tables (chapter 1) to speed up load times and reduce confusion if you have preferences set to "entire work.")
Series
- Part 11 of AO3 Work Skins/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 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
Some formatting fixes that I've found in real-time. If you comment I'll see if I can help, but no guarantees!
-
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. I just realized, this will never be "complete" and there is no final number of chapters.
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: Choose Your Own Adventure
Part Seven: Chapter Title
Part Eight: The Title, the Username and Links
Part Nine: Boxes (still in progress)
Part Ten: Newspaper Article -
you don't fare well without me by realpoutydadsurvives (brainwitchletty) for fonulyn
Fandoms: Biohazard | Resident Evil (Gameverse), Resident Evil - All Media Types
21 Jun 2019
Tags
Summary
Leon shuddered a breath out of his frozen lungs and asked numbly, “Why do you hate me?”
There was a quiet more invasive than the deadly silence of the world beyond the walls protecting them and Leon hated himself for being so stupid— stupid fucking Kennedy saying shit he wasn’t supposed to say— fumbling for a way to cover up his fuck up, when Chris’s low voice broke the silence, saying, “I don’t hate you, Leon. I never have.”
“Liar,” Leon accused softly into the darkness of their warm refuge. “You’re a f-fucking liar.”
-
Just Desserts by BishoujoBunny for MischiefInProgress
Fandoms: Resident Evil - All Media Types
21 Jun 2019
Tags
-
Tags
Summary
Based on phyripo's guide, with some usability improvements made to reblogs and photoset creation.
-
Lime in the Coconut by gosuckalemon (orphan_account)
Fandoms: Ao3 site skins, Archive of Our Own
20 Dec 2019
Tags
Summary
A Reversi child skin with lime header and key. Background images have been removed and there are some minor aesthetic tweaks. There may be a few minor aesthetic/visibility issues with this theme. Feel free to modify as you wish and share the results.
-
Tags
Summary
A tutorial for creating and formatting spreadsheets in AO3, using CSS and HTML.
-
Tags
Summary
A short tutorial for creating ruby text (furigana) in AO3, using CSS and HTML.
-
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.
-
Champagne, Wine and Vodka by emiwrimo for sunnilee
Fandoms: Fire Emblem: Fuukasetsugetsu | Fire Emblem: Three Houses
24 Jul 2023
Tags
Summary
THE REWRITE IS BEING POSTED HERE: Ludus/Storge/Eros
***
Ingrid's type in men is predictable.She has a consistent record. Sweet, gentle dorks who like literature or art. Really, really sweet dorks, which is why Sylvain never really could hate them. Even if, well, he wanted to be the one to go on picnics with her, buy her nice (not too expensive, she'd strangle him) things and to be called hers.
Hers. And her, his. That'd be nice. Sigh.
But it's cool, it's fine, as it has been since Continental Year 3018, when she was with Ashe. Or in Continental Year 3020, when she was with Ignatz.
Yeah. He can wait a little longer. Even though it's Continental Year 3028 and he's thirty and he's been in love with her since he was twenty-one and Dorothea is getting sick of his cowardice and might out him and—
Oh, yeah. So:
What the fuck is up with Claude von fucking Riegan?
Series
- Part 1 of Modern Fódlan AU (Módlan)
-
Tags
Summary
A list of all AO3's CSS Id and Class selectors to help you style your work.
-
Tags
Summary
¿Era bisexual o lesbiana? No lo tenía claro. A veces Ian la confundía, la ponía en duda. Con suerte, no la disuadía lo suficiente como para que al final dijera ser simplemente hetero.
-
Tags
Summary
Los universos tienen destinos totalmente indefinidos, cada uno es tan distinto como parecido.
Y en cualquier caso, no importa el tiempo, el lugar o el momento: Ian y Mickey siempre se tendrán el uno al otro.(En otras palabras, cosas fuera de la historia original que se me ocurran.)
■■■■ A B A N D O N A D O ■■■■
-
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
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
Useful CSS for readers by ao3commentoftheday, memorizingthedigitsofpi
Fandoms: No Fandom
05 Apr 2022
Tags
Summary
This guide is two chapters long. Chapter One is some useful bits and pieces of CSS code that users who read on AO3 may find useful. This code only changes the way AO3 presents works to you, the reader. It does not change the way AO3 looks for anyone else.
Chapter Two provides instructions on how to create a site skin, if you've never made one before. It also contains instructions for how to combine site skins together, for example how to add the CSS code from Chapter One to the Reversi site skin for dark mode versions of the same functions.
Series
- Part 11 of How to AO3
- Part 6 of pi learns how to site skin
-
How to Mimic Letters, Fliers, and Stationery Without Using Images by La_Temperanza
Fandoms: No Fandom
27 Jul 2017
Tags
Summary
This is a tutorial/live example on how to mimic the look of letters, fliers, and stationery (as well as other forms of written media) without using images. For all your epistolary fic needs.
Series
- Part 17 of AO3 Work Skins/Tutorials
-
Workskin for showing and hiding spoilers by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
29 Aug 2021
Tags
Summary
A very simple workskin to hide/show spoilers in your works by having your users clicking on a button!
Series
- Part 9 of CSS code scripts for Ao3
-
Tags
Summary
A dark site skin with flat buttons and elements, made using Dracula UI color palette.
Also I took some ideas from Tide: a flat and clean skin for Ao3 by ElectricAlice. -
Tags
Summary
As I continue to teach myself CSS coding (and the bits and pieces of AO3 that can be customized), I decided to make a classic rainbow themed skin. Chapter 1 of this work is light mode. Chapter 2 is dark mode.
This was optimized for my android phone screen, so positioning might be off if you're on a different device or on a desktop. The only things I moved around were in the header, though, so hopefully it won't be too bad!
Series
- Part 11 of pi learns how to site skin
-
Mystery Work
Part of jail time!
Summary
This is part of an ongoing challenge and will be revealed soon!
-
Tags
Summary
In this work, I'm going to outline different elements of AO3 and how you can customize them in different ways. Using these instructions, you can start understanding the basics of CSS code for the specific purpose of creating an AO3 site skin.
I'm self-taught with CSS and still learning how to build a comprehensive AO3 site skin, but I'm sharing what I know so that you can join the skin-creation community - or at least modify existing skins to suit your needs better.
No prior knowledge of CSS or html are required to use the instructions in this work.
-
Tags
Summary
This is a 3-colour skin (plus additional colours just for the tags) with a very minimalist mindset. I wanted to clear out some of the noise and leave you with a calmer, smoother reading experience. At least, that was the goal.
Chapter 1 is code
Chapter 2 is how to apply a site skin (logged in users only)Series
- Part 18 of pi learns how to site skin
Bookmarked by disconaro
24 Jan 2024
Bookmarker's Tags:
Bookmarker's Notes
css reference for site skins. ch 3 the annotated code is invaluable
-
Tags
Summary
Example and basic code for making some text hidden or optional on Ao3 using details and summary tags
Bookmarked by TETRACIDE
08 Jan 2024
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
Work/Series Details
Very basic how to: hide text (spoilers) on Ao3 by FidgetScribbles
Published: 2023-04-19
Work/Series ID: 46611205Relationship Tags:
• No Relationship Tags
Work/Series Summary:
Example and basic code for making some text hidden or optional on Ao3 using details and summary tags
(Approximate) Last Read: 2024/01/08
-
Tags
Summary
Example and instructions on how to mimic AO3 comments in a fic.
-
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).
-
How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile) by La_Temperanza
Fandoms: No Fandom
22 May 2017
Tags
Summary
This a tutorial/live example on how to have text change or appear once a cursor is hovering over it. Helpful for pop-up spoilers, language translations, quick author's notes, etc.
Series
- Part 15 of AO3 Work Skins/Tutorials
-
The Fic Writer's Guide to Formatting (An AO3 Repository) by AnisaAnisa
Fandoms: No Fandom
15 Mar 2024
Tags
Summary
A guide/resource/tutorial/testing ground for HTML and CSS on AO3.
1. HTML Basics – Manipulating text and page formatting.
2. Links & Embeds - How to add links, images, and GIFs.
3. Page Dividers - How to customise page dividers.
4. Titles - How to customise work, chapter, username and link titles.
5. Fonts - How to customise fonts.
6. Tables - How to make tables.
7. Borders - How to implement borders.
8. Boxes - How to make a box.
9. Navigations - How to use hyperlinks.
10. Afterword - Further reading and resources.Series
- Part 1 of The Fic Writer's Guide
-
Mystery Work
Part of jail time!
Summary
This is part of an ongoing challenge and will be revealed soon!
-
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
A Reddit template for use on AO3.
-
Tags
Summary
A work skin and tutorial for a Discord chat in AO3. The Discord page is available in light and dark mode!
See Chapter 1 for examples of the work skin, Chapter 2 for a tutorial on how to set up your HTML page and explanations on the code, Chapter 3 for HTML templates for easy copy-pasting and Chapter 4 for the complete CSS code of the work skin.
-
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.
-
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. -
Mimicking YouTube Thumbnails for Fics - Some YouTube Workskins by Ultraviollett
Fandoms: Video Blogging RPF, Fandom - Fandom
14 Sep 2023
Tags
Summary
A workskin to mimic scrolling through YouTube
Series
- Part 3 of AO3 workskins