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
-
r/Gotham: A Lost Phone by SkyL55
Fandoms: Batman - All Media Types, Batman (Comics), Batman: Under the Red Hood (2010)
11 Mar 2024
Tags
Summary
Welcome to r/Gotham (and potentially more)
Here Gothamites share their less than stellar opinions on the city and the going ons within. A standard city subreddit with an extra dash of fear gas and vigilantism.
The internet isn't a bubble exempt from the real world. It'll become evident just how much Reddit can and does affect reality.
Or, a social media fic that gives a view of the average citizen's lives in Gotham city.
-
Tags
Summary
A demonstration and instructions on how to do the following:
1. Create a fake "end" of a fic (Author's note, kudos section, buttons, "Leave a comment" box, comment section)
2. Make something that looks like a link in the fake comment section, which when clicked, unveils...
3. A fic header with tags, title, etc, and as much text as you would like.Heads up this demonstration includes Gideon the Ninth spoilers, I just thought it'd be funny for the demonstration.
-
Tags
Summary
Code is from @tealtiam and @ElectricAlice
icons are from @EwwYThoAnother ones with diffirent colors and fonts :D
-
Tags
Summary
This is a tutorial and live-example on how to use CSS skins and HTML on AO3 to make some stylish card links that move around and look pretty cool when you hover your cursor over them :)
Series
-
Replace the AO3 Icons [Site Skin] by ZerafinaCSS (Zerafina)
Fandoms: No Fandom, Site Skins - Fandom
31 Mar 2024
Tags
Summary
A site skin that replaces the AO3 icons with new ones in a higher resolution. Their appearance is largely based on the original images, but has been slightly modified to give them a flatter and cleaner look.
The following color schemes are available:
- Default (with black or white text)
- Muted/darkish
- Black and white
- Pastel
- Pink
Preview images and installation instructions are included. I have also added instructions for changing the logo color.
Latest update: 25 November 2024
Version 2.0 of this skin is available here.
Series
- Part 1 of AO3 Site Skins
-
Tags
Summary
Afraid of accidentally deleting/clearing/orphaning with a single click? Have issues with motor control? A damaged screen? A cat that must walk across your keyboard at the worst times?
Anti-disaster site skin prevents irreversible damage from a single mistake.
Series
- Part 1 of Tech Tutorials for Ao3
-
Dark Mode AO3 King in Yellow Site Skin by tinytardismilkshake
Fandoms: The King in Yellow - Robert W. Chambers, No Fandom
03 Apr 2024
Tags
Summary
Are you devoted to the King in Yellow? Do read a lot of fanfiction about him (in any adaptation) and want your AO3 experience to reflect that? Then try out this theme!
Series
- Part 1 of Tinytardismilkshake Makes Site Skins
-
I'M NOT AN FANFIC AUTHOR PLEASE DON'T CURSE ME by Mewsmodeus (Mewzebub)
Fandoms: Testing
05 Feb 2025
Tags
Summary
Messing around with CSS and HTML in AO3
Hide Creator's Styles (Recommended for accessibility and or if you don't like too much styling)
-
Persona 5 Workskin Testing and Reference by arcaneCalligrapher
Fandoms: Persona 5, Persona Series
20 Apr 2024
Tags
Summary
This is a testbed where I'll be figuring out the nuances of making workskins in the style of Persona 5. I'll be editing this frequently as I experiment and refine the code.
-
Tags
Summary
minimal site skin in dark browns with bright orange accents and an autumn leaves banner. includes color-coded tags. code base by
ElectricAlice! -
Tags
Summary
Made myself a skin last year that,,, I kept forgetting to share lmao
Made myself a new skin and I dont want this one to go to waste so here is a skin inspired by Tumblr's Low Contrast Classic color palette (2023)! -
Tags
Summary
A clean pink dark mode site skin that
- removes the "you've muted users" notif
- replaces stat labels like "Hits" with icons
- makes buttons flatPreview images + installation instructions included!
Series
- Part 2 of Clean Site Skins
-
Skin for Recreating Persona 5’s Deadline Display by SpookyTesting (FierySprites)
Fandoms: Persona Series, Persona 5
24 Apr 2024
Tags
Summary
A work skin for recreating the top-right deadline display from Persona 5 (Royal).
-
Tags
Summary
A simple dark-mode skin with custom icons.
Latest update: 2025 February 16
-
Skin for Recreating TTYD’s Tattle Log by SpookyTesting (FierySprites)
Fandoms: Super Mario & Related Fandoms, Paper Mario Series (Video Games)
25 Apr 2024
Tags
Summary
A work skin for recreating the Tattle enemy image and statistics from the 2024 remake of Paper Mario: The Thousand-Year Door.
-
Skin for Recreating TTYD Menu Elements by SpookyTesting (FierySprites)
Fandoms: Super Mario & Related Fandoms, Paper Mario Series (Video Games)
29 Apr 2024
Tags
Summary
A work skin for recreating various menu elements from the 2024 remake of Paper Mario: The Thousand-Year Door.
-
Tags
Summary
The first installment of a Site Skin series inspired by Zodiac signs! This one is Taurus! The others are going to be finished sometime in the future.
The instructions for this one will be more specific and mandatory than my last one, so I would advise following them, or else the skin might break. I've very proud of this one, I built it from the ground up rather than using someone else's skin!
Series
- Part 1 of Zodiac Site Skins
-
Stats Icons with Hover Text [Site Skin] by ZerafinaCSS (Zerafina)
Fandoms: No Fandom, Site Skins - Fandom
06 May 2024
Tags
Summary
A site skin that replaces stats labels like "words", "bookmarks" and "hits" with icons. Instead, the text is displayed when you hover the mouse pointer over the icon or tap on it on mobile (like a tooltip). Available for light and dark mode. You can also change the icons to any color you want!
Previews and installation instructions are included.
Latest update: 05 March 2025
Series
- Part 2 of AO3 Site Skins
-
Tags
Summary
Might update this with F2U code eventually, but for now, this is merely a testing grounds for me. Comments are closed for now; may open if I publish F2U code here.
-
Tags
Summary
A custom AO3 css site skin inspired by the Spirits & Such website that Reigen designs in season 2, episode 3 of Mob Psycho 100.
CLICK NOW to enjoy the greatest psychic of the century's graphic design skills while browsing AO3!!!!
Series
- Part 1 of my ao3 skins
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
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
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
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
-
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
-
Tags
Summary
This skin will make the comments of your favorite commenters all pretty with colors and images!
5 different styles that can be modified to your tastes.
Series
- Part 14 of CSS code scripts for Ao3
-
Tags
Summary
Some fandoms have different names according to localizations (or adaptations) and some fans prefers the characters being called in one way and some in other ways. This is a workskin that allows you to write the fic with both name that can alternate thanks to toggling the workskin on and off!
Series
- Part 13 of CSS code scripts for Ao3
-
Tags
Summary
And different backgrounds to make them as separate as possible for easier reading.
Series
- Part 12 of CSS code scripts for Ao3
-
Tags
Summary
Automatic bookmarklet to transform all Y/N in a fanfic to a word/name of your choosing.
it works on mobile too.
Series
- Part 1 of Scripts for Ao3
-
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
-
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
-
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
-
Fonts, and colors, and work skins, oh my! by Charles_Rockafellor
Fandoms: css - Fandom, Work Skins - Fandom
24 Jan 2021
Tags
Summary
Explains:
● how to make a work skin;
● how to view fics' work skin rules;
● how to colorize text and circle words and highlight backgrounds (examples in head-note), and change and resize your fonts;
● how to turn all links blue-underscore automatically;
● the CSS code for diacritics to render properly, e.g.: “ầ” & “ồ” (with diacritics not superimposed), or “ị” (with underdot directly beneath, not kerned to the left), without breaking words such as “gầu” or “vịt” (using a monotype font for these letters would create gaps to each side of the ầ or the ị). Head-note has corrected examples;
● Site Skin addenda to block / shrink tags, and block authors / works;
● even a quick way (code included) to simply make a Site Skin so that you can read everything in your font of preference!Full code is included.
I read, appreciate, and reply to all of your comments — they're always welcome!
𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️
Series
- Part 2 of How to
-
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
-
Permablocking Specific Tags - Site Skin by Eli0t
Fandoms: Fandom - Fandom, AO3, No Fandom
10 Aug 2023
Tags
Summary
It finally exists. You can block any tag you want forever! You no longer need 3rd party extensions for this!
Series
- Part 1 of AO3 Skins
- Part 1 of :has() selector
-
Tags
Summary
How to set up a bookmarklet that applies a saved set of filters to any works or bookmarks listing page on AO3
(Bookmarklets are a bit fiddly on mobile, but very much doable—and functional. Since I've done all the coding already, you can just follow the instructions without worrying about that. ;D)
GitHub version (more technical) || Tumblr version (with screenshots for Chrome on Android)
-
Tags
Summary
Type in colour, make pesterlogs, and more by following the provided instructions.
I know there already is a public workskin for Homestuck, but this one has a background function and a function for the larger command font.
Updated Apr 2024 to clarify some instructions (and also update them according to various layout changes) and to alter the CSS to use percentage widths instead of fixed widths (in order to improve the mobile reader's experience). The Courier New font seems to dislike certain mobile browsers, but I've yet to find a fix for it.
-
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
This skin will make the comments of your favorite commenters all pretty with colors and images!
5 different styles that can be modified to your tastes.
Series
- Part 14 of CSS code scripts for Ao3
-
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, color, table)
Part Fourteen: Text generator- Language:
- English
- Words:
- 11,726
- Chapters:
- 16/?
- Collections:
- 6
- Comments:
- 97
- Kudos:
- 452
- Bookmarks:
- 542
- Hits:
- 20,860
Bookmarked by YellowMagicalGirl
17 Nov 2024
Bookmarker's Tags:
Bookmarker's Notes
Go to ch. 12 for that newspaper skin you like
-
Tags
Summary
The complete collection of every piece of CSS ever created by DavidoDaVinci.
Series
- Part 2 of CSS with your friend, Davido :3