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
-
Hiding/showing things based on Creator's Style by MijuWrites
Fandoms: No Fandom, Original Work
09 Mar 2023
Tags
Summary
A guide on how to have some writing only appear with Creator's Style hidden, and some other writing only appear with Creator's Style shown!
Really handy if your fic relies on Creator's Style a lot and you're worried about how it might look with its style hidden; or if you want to play around with letting the user interact with Creator's Style!
-
Tags
Summary
An expansion to the existing forum skin by fencesit.
-
Add Undertale dialogue boxes into your fanfic (& more) by Zekka
Fandoms: Undertale (Video Game), No Fandom
01 Jun 2023
Tags
Summary
Want to make your Undertale fic more interesting to look at? Here's the code you need to do so!
With this code you can add:
● Undertale-style dialogue boxes
● Undertale-style buttons
● colorful text
● & more!Complete:
● Sans, Papyrus, Toriel and Asriel dialogue boxes (complete with fonts and images)
● Wingdings & narrator fonts
● Undertale-style buttonsWork in progress:
● Other character's boxesSuggestions are welcome!
Warning: working on making this an actually understandable tutorial instead of a showcase of code. For now it's posted so that it wouldn't delete itself when I'm not looking.
Best viewed on a computer! -
Tags
Summary
This gives you the CSS and HTML necessary to present a somewhat passable but rather primitive and
staticDYNAMIC emulation of the “green rain” / “digital rain” of The Matrix. Webkit is included for lead symbols' outline, in order to sharpen the contrast.A dynamic one could be faked nicely with .gifs (AO3 can run Doom, after all), but you can't (by TOS) use Java on AO3, so an actually dynamic font seems a little out of reach for now. But that's OK: 27 Nov 2023 I found a workaround for a dynamic background.
Full code and illustrations are included.
I read, appreciate, and reply to all of your comments — they're always welcome! 🙂
𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️
Series
- Part 8 of How to
-
Tags
Summary
A second attempt at making a YouTube Work Skin.
Warning: Shoddy HTML+CSS ahead!
-
Tags
Summary
Prepping for an update to my YouTube work skin with some prior testing. A more responsivee description+comments section :P
-
Skin for Recreating Persona 4’s SL Rank Up Display by SpookyTesting (FierySprites)
Fandoms: Persona Series, Persona 3, Persona 4, Persona 5
08 Apr 2023
Tags
Summary
A work skin for recreating the Social Link Rank Up display from Persona 3 Portable and Persona 4 Golden.
-
Tutorial: Ace Attorney Work Skin by translations (QuailFence)
Fandoms: 逆転裁判 | Gyakuten Saiban | Ace Attorney
19 May 2023
Tags
Summary
- A work skin that you can use to make dialogue, evidence, and other boxes in the style of Ace Attorney.
- Some parts of the code are from this skin by apolloyoostice1. Demonstration
2. How to make the work skin
3. Format: Dialogue, thoughts, and evidence boxes
4. Format: Testimonies
5. Format: Autopsy reports
6. Format: Profiles -
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 Mimic LiveJournal Posts and Comments by cursedcuriosities (SetsuntaMew)
Fandoms: No Fandom
17 Apr 2023
Tags
Summary
This is a tutorial/live example on how to mimic mid-2000s LiveJournal posts and comments.
Series
- Part 1 of Killian's AO3 Work Skins
-
Tags
Summary
with indents
- Language:
- English
- Words:
- 589
- Chapters:
- 1/2
- Kudos:
- 1
- Hits:
- 187
-
Skin for Recreating Persona Q2’s Stats Display by SpookyTesting (FierySprites)
Fandoms: Persona Series, Persona Q2: New Cinema Labyrinth
09 May 2023
Tags
Summary
A work skin for recreating various elements from Persona Q2: New Cinema Labyrinth’s Stats screen, including Persona names, resistances, and skills.
-
Tags
Summary
Here is a blockquote. It is padded out with: Vivamus imperdiet et nibh vel scelerisque. Aliquam aliquam odio luctus, egestas purus eu, faucibus massa.
𝐀 𝐩𝐥𝐚𝐜𝐞 𝐭𝐨 𝐭𝐞𝐬𝐭 𝐨𝐮𝐭 𝐦𝐲 𝐰𝐨𝐫𝐤𝐬𝐤𝐢𝐧.
- Language:
- English
- Words:
- 917
- Chapters:
- 4/4
- Hits:
- 104
-
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
your saying that this bird site was breaking because of #TheBoxGhost and NOT because of a certain ceo billionaire who owns it?
-- the box ghost learns to think outside the box (and he's not the only one)
Series
- Part 5 of #html_cinematic_universe
-
Tags
Summary
A very (very very) quick and dirty site skin made with the solarized color palette. This is a light yellow/beige skin with reddish and turquoise accents. It should cause less eyes than the default skin while still allowing you to browse the site in light mode. It also strips out the AO3 logo and your user icon from the top of the page, and makes several elements appear much flatter.
This is just the code - nothing else!
-
Tags
Summary
I made a couple of site skins (featuring a light mode and a dark mode!) that don't majorly change Ao3's UI but improve the UX/readability by adjusting a lot of little things: creating scroll boxes for sections that often have long text walls like tag fields and skin code, removing superfluous stuff like the "See end of work for more notes" and "You have muted users on the archive so not all fics will appear" notices, adding borders onto and more blank space between works and various tag/text categories, moving works' dates to the bottom of the blurb to make more room for the title and author text (especially for mobile!!), and much much more!
The skins are written out in a copy-able text doc so you can edit it yourself, and each part of the code has a note from me explaining what it actually does, all to make for easy customizing (even if you aren't familiar with CSS)!
See inside for the skins, screenshots of what they look like, details on how to edit them, and links to fully credit other users' skins that I copied elements of into my own!
-
Tags
Summary
给中文用户的AO3皮肤指南和CSS代码。
可配合B站教程av43178453食用。 -
Mystery Work
Part of Private archive (leave)
Summary
This is part of an ongoing challenge and will be revealed soon!
-
Skin for Recreating Paper Mario File Selects by SpookyTesting (FierySprites)
Fandoms: Super Mario & Related Fandoms, Paper Mario Series (Video Games)
13 May 2023
Tags
Summary
A work skin for recreating the File Select screen from the original Paper Mario and its sequel, Paper Mario: The Thousand-Year Door.
Series
- Part 2 of Save File Work Skins
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
Tags
Summary
A skin that makes the text rainbow and multicolored.
Sot of Beeline style.Series
- Part 6 of CSS code scripts for Ao3
-
Tags
Summary
This is a simple workskin that mimics a basic forum thread!
-
Tags
Summary
This is a tutorial/live example on how to mimic email windows on AO3 without the need to use images.
Series
- Part 12 of AO3 Work Skins/Tutorials
-
Tags
Summary
An expansion to the existing forum skin by fencesit.
-
Tags
Summary
I had to make this for an epistolary fic I'm working on, and the only example I found was great but a little more complicated that I wanted, so I made a more streamlined version.
Anyone is welcome to use or alter this however you wish, no credit needed : )
-
Put an Ao3 Fic in YOUR Fic! by lordvoldemortsskin (lordvoldemortsnipple)
Fandoms: No Fandom
01 Feb 2022
Tags
Summary
Work skin to add Ao3 fic layouts, meta info and comments inside your very own fic! Inception, but make it about fics. Ficception.
Series
- Part 3 of Works Skins
-
Mimicking Twitch Chat for Fics- Some Twitch Chat Workskins by Ultraviollett
Fandoms: Video Blogging RPF, Fandom - Fandom, Real Person Fiction
04 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
-
Tags
Summary
Documentation/Examples for the CSS workskin and HTML code for a Wikipedia article inspired layout to use in your mixed media works.
Created with help from Nautilusopus and DarthTofu.
-
Skin for Putting Music Indicators in Your Fic by SpookyTesting (FierySprites)
Fandoms: No Fandom
27 Apr 2022
Tags
Summary
A work skin for inserting stylized music links into your fic, ala Super Smash Bros.’ music labels at the start of each match.
-
Tags
Summary
Work skin for different types of found documents, for people who are into that kind of thing.
Update 1 December 2022: Added parameters for links within div sections. Previously, applying this work skin on top of the Reversi site skin could make links difficult to read.
-
Tags
Summary
This is a tutorial/live example on how to make large images fit on mobile browsers but remain normal size on desktop browsers.
Series
- Part 18 of AO3 Work Skins/Tutorials
-
Dark Mode Skin That Makes Ao3 Look Like Discord by trx
Fandoms: Archive of Our Own, AO3, css - Fandom, Skin - Fandom, Skins, dark mode
05 Feb 2025
Tags
Summary
CSS script to make your Ao3 look like Discord!
This is also a Dark Mode so Ao3 stops hurting your eyes at night. -
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
-
Tags
Summary
This is a live example of how an author can create linked footnotes in their work with only a little bit of HTML and no workskins required. This is best viewed by clicking "Entire Work". While I've included the actual coding in bold and italic once you click "Hide Creator's Style", there's a more detailed explanation here.
EDIT 6/28/17: The third chapter now shows how to use anchor links as an index/table of contents.
Series
- Part 6 of AO3 Work Skins/Tutorials
-
How to Mimic Author's Notes and Kudos/Comment Buttons by La_Temperanza
Fandoms: No Fandom
20 May 2017
Tags
Summary
Anonymous on tumblr: do you have a skin that would mimic the author’s notes and review/kudos buttons section from the end of a fic? the desired effect being that the fic could go on after the “end” of the fic, so after the author’s notes and review/kudos buttons
Here's a tutorial/live example to do just that, with some of the buttons actually functioning. I'll explain more inside!
Series
- Part 14 of AO3 Work Skins/Tutorials
-
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
This is a live example of my AO3 skin that allows the author to recreate the look of lined notebook paper in their work. To learn more about it, you can find the tutorial here.
Series
- Part 7 of AO3 Work Skins/Tutorials
-
Tags
Summary
An exciting new new way to format pesterlogs in HTML!
Try it out: https://flaringk.github.io/homestuck5plus/
-
Mystery Work
Part of jail time!
Summary
This is part of an ongoing challenge and will be revealed soon!
-
Tags
Summary
And different backgrounds to make them as separate as possible for easier reading.
Series
- Part 12 of CSS code scripts for Ao3
- Language:
- English
- Words:
- 492
- Chapters:
- 1/1
- Collections:
- 2
- Comments:
- 30
- Kudos:
- 180
- Bookmarks:
- 98
- Hits:
- 12,958
Bookmarked by ferager
07 Dec 2023
Bookmarker's Tags:
Bookmarker's Notes
Site Skin for a border around the tag
ElectricAlice