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: Videos (and gifs)
Part Seven: Choose Your Own Adventure
Part Eight: Chapter Title
Part Nine: The Title, the Username and Links
Part Ten: Boxes (still in progress)
Part Eleven: Newspaper Article
Part Twelve: Content Notes and Spoiler
Part Thirteen: Playground for Jinx (glitch text and table) -
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
-
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
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
22 Aug 2018
- Words:
- 60,825
- Works:
- 18
- Bookmarks:
- 3,818
-
Tags
Summary
Bored with the default page dividers? This is a tutorial/live example on how customize your page dividers with no images needed (though I do show you how you could use images if you wanted to do such a thing).
Series
- Part 9 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 2,156
- Chapters:
- 1/1
- Collections:
- 7
- Comments:
- 88
- Kudos:
- 1,339
- Bookmarks:
- 878
- Hits:
- 57,800
Bookmarked by SuperSarcosmic
08 Apr 2018
Bookmarker's Tags:
Bookmarker's Notes
HALLELUJAH, PRAISED BE
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
22 Aug 2018
- Words:
- 60,825
- Works:
- 18
- Bookmarks:
- 3,818
Bookmarked by SuperSarcosmic
09 Apr 2018
Bookmarker's Tags:
Bookmarker's Notes
Fun visual CSS codes that're easy to understand and implement.
-
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
- Language:
- English
- Words:
- 33,325
- Chapters:
- 11/11
- Collections:
- 4
- Comments:
- 51
- Kudos:
- 294
- Bookmarks:
- 319
- Hits:
- 21,801
Bookmarked by SuperSarcosmic
21 Apr 2018
Bookmarker's Tags:
Bookmarker's Notes
all I want in life is the ghost emoji, thnx
-
Tags
Summary
Just a quick and dirty HTML reference for AO3, with references to CSS style, HTML style, and other guides.
Series
-
Tags
Summary
Comic Sans is developing a crush on the popular, stylish ans sleek Times New Roman - but Arial the "Bimbo" is getting in Comic Sans' way!
Meanwhile a new girl has entered Comic Sans' class - Hylian from far far away. Nobody understands her, but she seems like a sweet, happy girl.
And what does Courier New has to do with Ar Julian?
And What's the Real Relationship of Calibri and Cambria?"Comic Sansation" faces all these things, and much more, as these poor fonts are simply trying to get by.
Bookmarked by i_dwell_in_darkness
18 Mar 2019
Bookmarker's Tags:
Bookmarker's Notes
Another non-Outlander, but I had to save this one! Plus a nice CSS ref to boot 🤪🤣
-
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
-
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
Based on phyripo's guide, with some usability improvements made to reblogs and photoset creation.
-
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
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
22 Aug 2018
- Words:
- 60,825
- Works:
- 18
- Bookmarks:
- 3,818
Bookmarked by Takene_ne
13 Jan 2020
Bookmarker's Tags:
Bookmarker's Notes
→ AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
* * *
THE 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
- Language:
- English
- Words:
- 6,494
- Chapters:
- 12/?
- Collections:
- 7
- Comments:
- 93
- Kudos:
- 634
- Bookmarks:
- 777
- Hits:
- 29,580
Bookmarked by TETRACIDE
30 Jan 2020
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
CSS
-
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
- Language:
- English
- Words:
- 6,494
- Chapters:
- 12/?
- Collections:
- 7
- Comments:
- 93
- Kudos:
- 634
- Bookmarks:
- 777
- Hits:
- 29,580
Bookmarked by DarthBloodOrange (DepressingGreenie)
04 May 2020
Bookmarker's Tags:
Bookmarker's Notes
How To AO3
-
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
- Language:
- English
- Words:
- 835
- Chapters:
- 1/1
- Collections:
- 5
- Comments:
- 10
- Kudos:
- 216
- Bookmarks:
- 265
- Hits:
- 13,863
Bookmarked by DarthBloodOrange (DepressingGreenie)
04 May 2020
Bookmarker's Tags:
Bookmarker's Notes
How To AO3
-
Tags
Summary
Based on phyripo's guide, with some usability improvements made to reblogs and photoset creation.
- Language:
- English
- Words:
- 2,075
- Chapters:
- 3/3
- Collections:
- 6
- Comments:
- 11
- Kudos:
- 101
- Bookmarks:
- 163
- Hits:
- 6,062
Bookmarked by DarthBloodOrange (DepressingGreenie)
04 May 2020
Bookmarker's Tags:
Bookmarker's Notes
How To AO3
-
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!
- Language:
- English
- Words:
- 572
- Chapters:
- 1/1
- Collections:
- 5
- Comments:
- 58
- Kudos:
- 501
- Bookmarks:
- 397
- Hits:
- 21,837
Bookmarked by DarthBloodOrange (DepressingGreenie)
04 May 2020
Bookmarker's Tags:
Bookmarker's Notes
How To AO3
-
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
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
22 Aug 2018
- Words:
- 60,825
- Works:
- 18
- Bookmarks:
- 3,818
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
22 Aug 2018
- Words:
- 60,825
- Works:
- 18
- Bookmarks:
- 3,818