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
-
Mystery Work
Part of strawberry collection
Summary
This is part of an ongoing challenge and will be revealed soon!
-
How to Block Tags With Site Skins (And Get Real Specific About It) by najio
Fandoms: No Fandom
25 Jun 2025
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
-
Tags
Summary
A work skin and tutorial for logic grid puzzles on AO3. This tutorial includes 2 versions of a logic grid puzzle: a basic version (printable!) and an interactive puzzle grid!
See Chapter 1 for an overview of the style with annotations, Chapter 2 for an explanation of how it all works (including a tutorial on making the grid printable, hiding the solution table behind a spoiler block and how to make the grid interactive), Chapter 3 for the full CSS code for easy copy-pasting, Chapters 4 and 5 for an example of an interactive 3x3x3 logic grid with the HTML code, Chapters 6 and 7 for a basic 3x3x3 grid and Chapters 8 and 9 for a 4x4x4 logic puzzle grid.
All the puzzles that appear in this tutorial are solvable and the solutions are included here!
-
Tags
Summary
A work skin tutorial of a Google Search Suggestions page in AO3.
See Chapter 1 for examples of the work skin with 4 different suggestions types (auto-complete suggestions, recent history, related to recent searches and trending searches), Chapter 2 for an explanation of the CSS work skin, Chapter 3 for the complete CSS code of the work skin, Chapter 4 for explanations of the HTML code and Chapter 5 for the complete HTML code (all 4 types of suggestions).
-
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
Code for simplistic site skin for AO3.
Full code, with explanation on what everything does, so anyone can be able to customize it to their liking.
-
Bedtime Stories: Site Skin by TheSistersBread
Fandoms: Original Work, Non-Fiction - Fandom, css - Fandom, No Fandom
30 Oct 2022
Tags
Summary
A gentle night-time skin for anyone who finds the default too overwhelming and Reversi too light. Just copy and paste.
(I recommend using Chapter 3 along with Chapter 1. Chapter 2 is just a twist on the style.)
Series
- Part 1 of Lone Fics
-
Tags
Summary
The first of many site skins I'll be making! This one is based on Sun Wukong, inspired by sunlight and peaches!
It changes how AO3 looks, with a background of Wukong and a change of colours to match!!
Series
- Part 1 of Fandom AO3 Site Skins for your pleasure!
-
Tags
Summary
A kind of matching one to the Sun Wukong site skin I made!
It changes how AO3 looks, with a background of a smiling Macaque in all his adorable glory and a change of colours to match!!
Series
- Part 2 of Fandom AO3 Site Skins for your pleasure!
-
Tags
Summary
I just love this robotic spider man so much... so I had to make a site skin of him!!
It changes how AO3 looks, with a background of Syntax and a change of colours to match!!
Series
- Part 3 of Fandom AO3 Site Skins for your pleasure!
-
Tags
Summary
Reversi with a flat look, round edges and color-coded tags. Feel free to modify and share the results.
Series
- Part 1 of Site skin
-
Merry Christmas AO3 Site Skin (with animated snow!) by ShadowOfAPretender
Fandoms: No Fandom, Fandom - Fandom
07 Nov 2022
Tags
Summary
That’s right!! As soon as I found out that GIFs work in the background on AO3 I HAD to make a snowy Christmas themed one!!!
It changes how AO3 looks, with a dark background of animated looping soft snowfall and a rich festive change of colours to match!! Good for people who prefer more darkmode skins.
Series
- Part 4 of Fandom AO3 Site Skins for your pleasure!
-
A guide to fictions on AO3 by Jin_Mitel
Fandoms: Original Work, No Fandom, Fandom - Fandom
22 Feb 2024
Tags
Summary
The title says it all, doesn't it?
A compilation of helpful information to create a work on Archive Of Our Own (AO3).⚠ This work is a draft, currently being edited. ⚠
Series
- Part 1 of A guide to fictions
-
[Site Skin] New Year of Water Rabbit/Cat 2023 by orphan_account
Fandoms: No Fandom, Archive of Our Own
27 Nov 2022
Tags
Summary
New Year 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 Planet Robobot’s Pause Screen by SpookyTesting (FierySprites)
Fandoms: Kirby (Video Games)
02 Dec 2022
Tags
Summary
A work skin for recreating a simplified version of the pause screen from Kirby: Planet Robobot.
-
Skin for Recreating Forgotten Land’s Boss Bios by SpookyTesting (FierySprites)
Fandoms: Kirby (Video Games)
01 Dec 2022
Tags
Summary
A work skin for recreating Kirby and the Forgotten Land’s Figure description screen/Boss Bios.
-
(OLD) Skin for Recreating Danganronpa UI Elements by SpookyTesting (FierySprites)
Fandoms: Dangan Ronpa - All Media Types, New Dangan Ronpa V3: Everyone's New Semester of Killing, Super Dangan Ronpa 2
08 Dec 2022
Tags
Summary
A work skin for recreating various UI elements from the Danganronpa series, primarily based on Danganronpa V3: Killing Harmony.
For convenience’s sake, the last chapter contains all of the CSS code in one place.
-
Tags
Summary
The AO3 site skin that suits desktop devices. To use the skin, simply copy and paste the CSS code provided (e.g., github).
RU. Аннотация
Скин для сайта ао3. Подходит для десктопных устройств.
-
Skin for Recreating Danganronpa 2’s Status Bars by SpookyTesting (FierySprites)
Fandoms: Dangan Ronpa - All Media Types, Super Dangan Ronpa 2
08 Dec 2022
Tags
Summary
A work skin for recreating the Influence/Focus gauges from Danganronpa 2: Goodbye Despair.
-
Skin for Recreating Unlocked Achievements by SpookyTesting (FierySprites)
Fandoms: No Fandom
17 Feb 2024
Tags
Summary
A work skin for recreating the Achievement/Trophy Unlocked messages from various systems, including PlayStation and Xbox.
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
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
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
18 May 2025
- Words:
- 84,915
- Works:
- 19
- Bookmarks:
- 4,060
-
Tags
Summary
Popup tooltips that work well on both desktop (hover) and mobile (tap open and close). Constrained width, so best for short tooltips or translations for a couple words at the most.
Series
- Part 1 of Simbeline's Work Skins
- Language:
- English
- Words:
- 330
- Chapters:
- 1/1
- Collections:
- 4
- Comments:
- 30
- Kudos:
- 242
- Bookmarks:
- 306
- Hits:
- 9,705
Bookmarked by AsterRoc
03 Jul 2023
Bookmarker's Tags:
Bookmarker's Notes
Guide on using CSS for hover text on both desktop and mobile.
-
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
- Language:
- English
- Words:
- 999
- Chapters:
- 1/1
- Collections:
- 8
- Comments:
- 101
- Kudos:
- 643
- Bookmarks:
- 762
- Hits:
- 32,936
Bookmarked by Black Dragon on the Rocks (animealam)
16 Jul 2023
Bookmarker's Tags:
Bookmarker's Notes
Importante para dar formato a los fics.
-
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
Twitter work skin.
- Tweets, quote-tweets, images, polls...;
- DM's, text, emojis, images, voice messages, groupchats...;
- Scrollable version. -
Tags
Summary
A tutorial on how to toggle the content of a paragraph when it is clicked. Helpful for pop-up spoilers, language translations, quick author's notes, etc.
-
Tags
Summary
A work skin created for fics designed to emulate a screenplay. This is by someone who has no experience in screenwriting or coding...so take that as you will.
-
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
Here is the CSS/HTML for a simple sports scoreboard to use in your AO3 works.
-
Tags
Summary
Popup tooltips that work well on both desktop (hover) and mobile (tap open and close). Constrained width, so best for short tooltips or translations for a couple words at the most.
Series
- Part 1 of Simbeline's Work Skins
-
Tags
Summary
Standard formatting of a screenplay spec script scaled to suit the size of your viewing window
If anyone wants a realistic movie script format, I've put it in the second chapter. Feel free to just copy and paste it into your own work skin -
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
-
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
-
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
This is a tutorial/live example on how to align images to the left or right of the screen and have text wrap around them.
Series
- Part 13 of AO3 Work Skins/Tutorials
-
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.
-
How to Block Tags With Site Skins (And Get Real Specific About It) by najio
Fandoms: No Fandom
25 Jun 2025
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
- Language:
- English
- Words:
- 16,365
- Chapters:
- 25/25
- Collections:
- 2
- Comments:
- 425
- Kudos:
- 458
- Bookmarks:
- 499
- Hits:
- 21,394
Bookmarked by sitehound
19 Sep 2023
Bookmarker's Tags:
Bookmarker's Notes
A comprehensive primer on how to hide aggravations like multi-fandom monstrosities and other annoyances.
-
How to Block Tags With Site Skins (And Get Real Specific About It) by najio
Fandoms: No Fandom
25 Jun 2025
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