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
-
Skin for Recreating Subspace Emissary’s Save File Display by SpookyTesting (FierySprites)
Fandoms: Super Smash Brothers
11 May 2023
Tags
Summary
A work skin for recreating the save file display from Super Smash Bros. Brawl’s Adventure Mode: The Subspace Emissary.
Series
- Part 3 of Save File Work Skins
-
Skin for Recreating Forgotten Land’s World Title Cards by SpookyTesting (FierySprites)
Fandoms: Kirby (Video Games)
12 May 2023
Tags
Summary
A work skin for recreating a simplified version of the world title cards from Kirby and the Forgotten Land.
-
Skin for Recreating Persona Q2’s Save File Display by SpookyTesting (FierySprites)
Fandoms: Persona Series, Persona Q2: New Cinema Labyrinth
15 May 2023
Tags
Summary
A work skin for recreating the save file display and Information text boxes from Persona Q2: New Cinema Labyrinth.
Series
- Part 6 of Save File Work Skins
-
Skin for Recreating Kingdom Hearts’ Information Bar by SpookyTesting (FierySprites)
Fandoms: Kingdom Hearts (Video Games)
13 May 2023
Tags
Summary
A work skin for recreating the Information bar from the Kingdom Hearts series—specifically, the design from prior to 0.2 and Kingdom Hearts III.
-
Skin for Recreating Persona 3’s Save File Display by SpookyTesting (FierySprites)
Fandoms: Persona Series, Persona 3
14 May 2023
Tags
Summary
A work skin for recreating the save file display from Persona 3 (FES), with a bonus color scheme based on Persona 3 Portable’s FeMC.
Series
- Part 4 of Save File Work Skins
-
Skin for Recreating Persona 4’s Save File Display by SpookyTesting (FierySprites)
Fandoms: Persona Series, Persona 4
24 May 2023
Tags
Summary
A work skin for recreating the save file display from Persona 4 (Golden).
Series
- Part 5 of Save File Work Skins
-
Skin for Recreating Peach’s Letters from Super Mario Galaxy by SpookyTesting (FierySprites)
Fandoms: Super Mario & Related Fandoms, Super Mario Galaxy
16 May 2023
Tags
Summary
A work skin for recreating the appearance of Princess Peach’s letters from Super Mario Galaxy.
-
Skin for Recreating Sonic Adventure 2’s Results Screen by SpookyTesting (FierySprites)
Fandoms: Sonic the Hedgehog - All Media Types, Sonic the Hedgehog (Video Games)
16 May 2023
Tags
Summary
A work skin for recreating the results screen from Sonic Adventure 2.
-
Twitter HTML & CSS Coding Test Run by Fluffycorn_njst
Fandoms: Marvel Cinematic Universe, The Avengers (Marvel Movies), Haikyuu!!
20 May 2023
Tags
Summary
All of the different kinds of Twitter tweet templates displayed in one place as demonstrated using characters from fandoms written above! Includes the source of the HTML & CSS code work used here!
ALL THE CREDIT goes to gadaursan's Twitter guide & tutorial for the coding! And so I'm basically just a glorified display case to see more examples of what the design looks like! I also only did this to try it out for fun and practice in case I'd use it in the future~
-
Tags
Summary
The AO3 site skin that suits both mobile and desktop devices. To use the skin, simply copy and paste the CSS code provided (e.g., github).
RU. Аннотация
Скин для сайта ао3. Подходит как для мобильных телефонов, так и для десктопных устройств. Чтобы использовать скин, просто скопируйте код.
-
Tags
Summary
The AO3 site skin that suits both mobile and desktop devices. To use the skin, simply copy and paste the CSS code provided (e.g., github).
RU. Аннотация
Скин для сайта ао3. Подходит как для мобильных телефонов, так и для десктопных устройств. Чтобы использовать скин, просто скопируйте код.
-
Skin for Recreating Persona 3’s Social Stats Display by SpookyTesting (FierySprites)
Fandoms: Persona Series, Persona 3
27 May 2023
Tags
Summary
A work skin for recreating the Social Stats display from Persona 3 (Portable).
-
AO3 Site-Wide Tag Highlighting Skin Tutorial/Template by orphan_account
Fandoms: No Fandom, site-skins
06 Jun 2023
Tags
Summary
Series
- Part 1 of ao3css's templates
-
How to permanently filter out certain tags on AO3 by orphan_account
Fandoms: No Fandom, site-skins
09 Jun 2023
Tags
Summary
Series
- Part 2 of ao3css's templates
-
Tags
Summary
Twitter work skin.
- Tweets, quote-tweets, images, polls...;
- DM's, text, emojis, images, voice messages, groupchats...;
- Scrollable version. -
Mystery Work
Part of jail time!
Summary
This is part of an ongoing challenge and will be revealed soon!
-
Tags
Summary
Reversi with a flat look, round edges and color-coded tags. This version has darker black, the alerts are more visible and improved filter and button design. Feel free to modify and share the results.
Series
- Part 2 of Site skin
-
Mystery Work
Part of jail time!
Summary
This is part of an ongoing challenge and will be revealed soon!
-
[Site Skin] Ice cream time by orphan_account for robin_puck, Angrboda_SommarsDottir
Fandoms: No Fandom, Archive of Our Own
29 Jun 2023
Tags
Summary
The AO3 site skin that suits the devices with the resolution more than 1024 х 768. To use the skin, simply copy and paste the CSS code provided (e.g., github).
RU. Аннотация
Летний скин для сайта ао3. Подходит для устройств с разрешением экранов 1024 х 768 и выше. Чтобы использовать скин, просто скопируйте код (e.g., github).
-
[Site Skin] For the WTF Drarry 2023 Team by orphan_account
Fandoms: Harry Potter - J. K. Rowling, Archive of Our Own
30 Mar 2023
Tags
Summary
RU: Фандомный скин для сайта ао3. Подходит как для мобильных телефонов, так и для десктопных устройств. Чтобы использовать скин, просто скопируйте код. Написан для визитки команды WTF Drarry 2023 в рамках Зимней Фандомной Битвы 2023. (see github).
EN. Summary
The AO3 site skin that suits both mobile and desktop devices. To use the skin, simply copy and paste the CSS code provided. It is written for a presentation of the Drarry 2023 Team at the WTF | Winter Temporary Fandom Kombat 2023 fest. (e.g., github)
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
Minimal skin for Ao3 in both dark and light mode by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
26 Sep 2020
Tags
Summary
A site skin that is somewhat clean and minimal and low contrast. Both in dark and light mode.
The images are responsive on mobile so you won't have huge images.
Series
- Part 2 of CSS code scripts for Ao3
- Language:
- English
- Words:
- 290
- Chapters:
- 1/1
- Collections:
- 2
- Comments:
- 58
- Kudos:
- 205
- Bookmarks:
- 65
- Hits:
- 15,534
Bookmarked by ferager
07 Dec 2023
Bookmarker's Tags:
Bookmarker's Notes
Minimal skin for Ao3 in both dark and light mode
ElectricAlice -
Tags
Summary
A mock-up of a fake article about a TV series, with CSS and HTML code and a brief guide on how to use it.
-
Tags
Summary
There are some great quick-and-dirty guides to HTML on A03. This is not one of them - it is a comprehensive guide
It's now 2025, a decade later. A03 supports some new HTML and and we're all walking around reading fic on supercomputers that fit in a jean pocket. It was time update this and take a crack at finishing it. (Links and Images are in, the new Audio and Video tags are not.)
The previous three chapters have been divided into smaller concepts. Each tag continues to have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. Most tags have their attributes, things like [src] or [title], listed and examples of how using the attributes modify the tags.
There's a chapter on Bad Ideas, including how some of the archive's default CSS is available to you to format your work (users can't turn that off by hiding a workskin!)
Oh. And I added a bunny army. You could learn how to add one too.
/)/) /)/) /)/) (..) (..) (..) *( ) *( ) *( )
Series
- Part 19 of AO3 Work Skins/Tutorials
-
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
-
Tags
Summary
I spent a month looking for how to use footnotes on ao3, so here
-
- Words:
- 19,151
- Works:
- 14
- Bookmarks:
- 323
-
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
-
How to Block Tags With Site Skins (And Get Real Specific About It) by najio
Fandoms: No Fandom
16 Mar 2024
Tags
Summary
Just some info I've gathered over the past couple of weeks, about how to:
1. Block tags using Site Skins, block only fics that contain both tag A and tag B, and block fics with a tag that contains a certain phrase, unless they are a specific whitelisted tag
2. Highlight the tags in pretty colors! Or bold, or hide them!
3. Block mega-crossovers with a million different fandoms
4. Select for/block fics that are completed/rated something/have a certain category/don't have summaries
5. Block everything that doesn't have a certain tag, or one of a list of tags
6. Block orphan_account and tag block by author
7. Block only tags of specific types (fandoms, relationships, freeforms, etc.)
8. Block fics focused on original characters, and/or fics without any tags of a specific type
9. Block every pairing with two characters in it—case insensitive, any order, no matter how many other people are also in the tag
10. Block by number of tagsSeries
- Part 1 of Site Skins and CSS Quackery
-
Penstagram chats on AO3 - Custom CSS with examples by deciMae
Fandoms: The Owl House (Cartoon)
21 Jun 2023
Tags
Summary
A Penstagram CSS with the entire scroll visible (with dynamic scaling).
With functions such as:
- date/time
- picture embeds
- penstagram embeds
- group chat names
- readable non-CSS renderingSeries
- Part 1 of Mae's CSS creations
-
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
-
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
-
How to make a fanfic header Ao3 Style inside your own fanfic by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
26 Sep 2020
Tags
Summary
Live example and tutorial on how to insert a fanfic header + fic tags + summary in your fanfic. In perfect ao3 style.
If you need your own fic to go extra meta.Series
- Part 3 of CSS code scripts for Ao3
-
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
-
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
-
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. -
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
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
A Reddit template for use on AO3.
-
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