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
a fancy purple site skin inspired by the site skin 'GIRLY THINGS' made by memorizingthedigitsofpi (https://ao3-rd-8.onrender.com/users/memorizingthedigitsofpi/pseuds/memorizingthedigitsofpi)
pictures of how it looks on both mobile and on pc included. CSS also included
pls do not steal
-
the idiot's incoherent guide to learning css & html for ao3 in dystopia by Anonymous
Fandoms: No Fandom
20 Jun 2022
Tags
Summary
CSS & HTML code illiterate but want to add socmed elements amongst other interesting elements in your work? The Idiot™ pertained in the title? Then this Idiot's Incomprehensible Guide is for you! Alternatively, an autobiographical exploit and documentation into learning CSS and HTML in AO3 through the guide of other authors written in a third person perspective. If you found this, I'm so sorry. I'm publishing this so it doesn't get deleted.
-
Tags
Summary
Ch1. Beautiful Blue
Ch2. A Dark Theme with Purple and Bright Green Accents.Made these for myself and Archiving them as a backup in case I accidentally delete them again. Might as well share them.
-
Tags
Summary
A work skin based off of Disco Elysium's dialogue box!
Contains: Skills, Text, Title, Dialogue choices, Author, Summary, Links, "Continue" divider, Dialogue notifs (money, items, experience), Morale and Health notifs, Check Outcome notifs, and Background formatting.
Fic Content: Showcase and Code with notation.For mobile: Formatting is all there, but fonts aren't. Still readable.
Pending updates (Vanity updates): Thought gained and thought complete.
-
Tags
Summary
A rudimentary version of my Disco Elysium work skin!
Contains: Skill colors, Name colors, Text colors, Notif colors, Bg color, Choice colors, and a "Continue" divider.
-
Mimicking Minecraft for fics- Some Minecraft Work Skins by Ultraviollett
Fandoms: Fandom - Fandom, Minecraft (Video Game), Hermitcraft SMP, Dream SMP, Empires SMP
20 Apr 2024
Tags
Summary
Some CSS for workskins involving minecraft!
Current chapters:
-Minecraft chat text, including "[username] joined/left game" and "[username] whispers to you"
-Minecraft buttons (respawn/ quit to title)
-End poem text
-minecraft booksSeries
- Part 1 of AO3 workskins
-
[Site Skin] Toll's Instagram for the fandom BUCK-TICK 2022 Team by orphan_account
Fandoms: BUCK-TICK, Archive of Our Own
22 Jul 2022
Tags
Summary
RU: Фандомный скин для сайта ао3. Написан для визитки команды fandom BUCK-TICK 2022 в рамках Фандомной Битвы 2022. Чтобы примерить скин просто скопируйте CSS code (see github).
EN: The AO3 site skin created for the team fandom BUCK-TICK 2022 within the multifandom team challenge Fandom Kombat 2022. To use the skin, simply copy and paste the CSS code provided.
-
Tags
Summary
Just hoe-ing it out with HTML discoveries and subsequently attempting to enrich my knowledge on making my works boujee as hell.
See beginning notes to know inclusions and exclusions.
-
[Site Skin] Water Spirit by fandom BUCK-TICK 2022 (fandom_BUCK_TICK) for robin_puck, Angrboda_SommarsDottir
Fandoms: BUCK-TICK, Archive of Our Own
05 Aug 2022
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. Подходит как для мобильных телефонов, так и для десктопных устройств.
Series
- Part 4 of Сирена
-
[Site Skin] Не разжимая рук by fandom BUCK-TICK 2022 (fandom_BUCK_TICK)
Fandoms: BUCK-TICK, Archive of Our Own
05 Aug 2022
Tags
Summary
Фандомный скин для сайта ао3. Подходит как для мобильных телефонов, так и для десктопных устройств (see github).
-
[Site Skin] BUCK-TICK Blog by fandom BUCK-TICK 2022 (fandom_BUCK_TICK)
Fandoms: BUCK-TICK, Archive of Our Own
05 Aug 2022
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 с лаконичным блоговым дизайном. Подходит для десктопных устройств.
-
[Site Skin] Slytherin by fandom Drarry 2022 (Fandom_Drarry) for khazellev, Plus_quamperfectum, WinterStoat, HelenRad
Fandoms: Harry Potter - J. K. Rowling, Archive of Our Own
05 Aug 2022
Tags
Summary
Фандомный скин для сайта ао3. Подходит как для мобильных телефонов, так и для десктопных устройств (e.g., 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.
-
[Site Skin] Gryffindor by fandom Drarry 2022 (Fandom_Drarry)
Fandoms: Harry Potter - J. K. Rowling, Archive of Our Own
05 Aug 2022
Tags
Summary
Фандомный скин для сайта ао3. Подходит как для мобильных телефонов, так и для десктопных устройств (e.g., 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.
-
[Site Skin] Драко и Гарри by fandom Drarry 2022 (Fandom_Drarry) for Bacca
Fandoms: Harry Potter - J. K. Rowling, Archive of Our Own
06 Aug 2022
Tags
Summary
Фандомный скин для сайта ао3. Основной код, представленный в первой главе, рассчитан только на десктопные устройства и не подходит для мобильных телефонов. Однако, возможности ао3 позволяют адаптировать этот скин с небольшими изменениями для телефонов с помощью опции наследования. Об этом мы расскажем во второй главе. КОД СКИНА С ДРАКО (github) ||
КОД СКИНА С КВИДДИЧЕМ (github) -
suspend disbelief by mystyrust
Fandoms: 僕のヒーローアカデミア | Boku no Hero Academia | My Hero Academia
10 Aug 2022
Tags
Summary
It was going to be a perfect day.
It was going to be a good day.
It was going to be a terrible day.Someone, something, was messing with Izuku’s daily routine, and when his suspension of disbelief breaks, it also breaks his perception of his world as he knows it.
-
Skin for Recreating TTYD’s Text Boxes by SpookyTesting (FierySprites)
Fandoms: Super Mario & Related Fandoms, Paper Mario: The Thousand Year Door
30 Jan 2025
Tags
Summary
A work skin for recreating some text boxes from Paper Mario: The Thousand-Year Door—specifically, the informational ones from both the 2004 and 2024 versions.
-
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. Подходит для десктопных устройств.
-
[Site Skin] Memories by fandom BUCK-TICK 2022 (fandom_BUCK_TICK)
Fandoms: BUCK-TICK, Archive of Our Own
20 Aug 2022
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. Подходит для десктопных устройств.
-
Arknights Style Dialog [Work Skin] by Clover_Zero
Fandoms: 明日方舟 | Arknights (Video Game)
20 Jan 2023
Tags
Summary
A work skin meant to mimic the communication recorder in Integrated Strategies 2.
Update 2025-04-07: Fixed broken images/icons.
Series
- Part 2 of Clover Zero's AO3 HTML & CSS
-
Murdle Work Skin by Grayswandir (gothic_gray_art)
Fandoms: No Fandom, Murdle (Video Game)
06 Sep 2022
Tags
Summary
A work skin and tutorial for creating Murdle-themed logic puzzles on AO3.
See Chapter 1 for an example of the style, Chapter 2 for how to set up the work skin, Chapter 3 for the full CSS code, Chapters 4 and 5 for an HTML tutorial on designing your own Murdle, and Chapter 6 for a premade template that you can simply copy-paste into your own work to make a basic 3x3x3 Murdle logic puzzle.
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
Tags
Summary
This is a tutorial on how to create Twitter / X templates for AO3, includes both Tweets and profile card.
- Scalable so it's also accessible to mobile users.
- Tweets (chapter 1): text, tags, quote tweet, photo(s), replies, verified checkmark.
- Profile card (chapter 2): displays a user's profile as shown on Twitter.
- Please let me know if there are bugs and/or requests.- Language:
- English
- Words:
- 2,746
- Chapters:
- 3/3
- Collections:
- 4
- Comments:
- 129
- Kudos:
- 635
- Bookmarks:
- 551
- Hits:
- 23,102
Bookmarked by not_rude_ginger
01 May 2023
Bookmarker's Tags:
Bookmarker's Notes
Twitter posts and profile
-
Merry Christmas AO3 Site Skin (with animated snow!) by ShadowOfAPretender
Fandoms: No Fandom, Fandom - Fandom
06 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!
-
Tags
Summary
A Reddit template for use on AO3.
-
Tags
Summary
Live example and tutorial on how to include a Yelp product review in your work.
Series
- Part 2 of AO3 Work Skins
-
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
-
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 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 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
-
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
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: Kudos Message (NEW)
Part Eleven: Newspaper Article
Part Twelve: Content Notes and Spoiler
Part Thirteen: Playground for Jinx (glitch text, color, table)
Part Fourteen: Text generator
Part Fifteen: Boxes (still in progress)
Part Sixteen: Vertical Text (NEWEST) -
Skin for Recreating Peach’s Letters from Super Mario Galaxy by SpookyTesting (FierySprites)
Fandoms: Super Mario & Related Fandoms, Super Mario Galaxy
15 May 2023
Tags
Summary
A work skin for recreating the appearance of Princess Peach’s letters from Super Mario Galaxy.
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
02 Aug 2025
- Words:
- 87,711
- Works:
- 19
- Bookmarks:
- 4,213
-
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
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
02 Aug 2025
- Words:
- 87,711
- Works:
- 19
- Bookmarks:
- 4,213
-
Tags
Summary
Make text appear when you click a "button"
Chapter 2: Simple tweaks to existing email and stationery skins -
Tags
Summary
HTML/CSS to replicate an email in Gmail as a work skin.
-
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 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: Kudos Message (NEW)
Part Eleven: Newspaper Article
Part Twelve: Content Notes and Spoiler
Part Thirteen: Playground for Jinx (glitch text, color, table)
Part Fourteen: Text generator
Part Fifteen: Boxes (still in progress)
Part Sixteen: Vertical Text (NEWEST) -
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
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