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
-
Гайд для писателей-новичков: создаем красоту в работах by Кабыздоха (Kabyzdoha)
Fandoms: No Fandom
28 Dec 2022
Tags
Summary
В этом гайде вы найдете всю необходимую для вас информацию для комфортного создания и размещения работ на Архиве: от базовых навыков до кодового форматирования.
Series
- Part 1 of Гайды по Архиву
-
Tags
Summary
Winter 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. Подходит как для мобильных телефонов, так и для десктопных устройств.
-
[Site Skin] Similar to Ficbook Style by orphan_account
Fandoms: No Fandom, Archive of Our Own
13 Dec 2022
Tags
Summary
Скин для сайта ао3 по мотивам ficbook.net дизайна. Подходит как для мобильных телефонов, так и для десктопных устройств (e.g., github).
EN. Summary
The AO3 site skin (inspired by ficbook.net design) that suits both mobile and desktop devices. To use the skin, simply copy and paste the CSS code provided (e.g., github).
-
[Site Skin] A Cup of Tea by orphan_account for Plus_quamperfectum
Fandoms: No Fandom, Archive of Our Own
30 Dec 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. Подходит как для мобильных телефонов, так и для десктопных устройств. Чтобы использовать скин, просто скопируйте код.
-
Tags
Summary
quick html / css reference to writing in-person "chats" or "skits" for your html fic , while styling the skit in a way that might fit in with your html / chat fic.
(documenting how i did the skin for a particular fic, and a useful html guide overall)
this is "generic", but css could be customized to fit any fandom / video game etc.
for skits, think: tales of series, fire emblem, cookie run kingdom, etcSeries
- Part 3 of #ao3_work_skins
-
Tags
Summary
When selecting text, the text will have colors that match with the Reversi theme instead of being blue on white. This can be edited to color the selected text to any color
- Language:
- English
- Words:
- 264
- Chapters:
- 1/1
- Kudos:
- 3
- Hits:
- 571
-
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
A Discord workskin that supports most Discord-style markup. Includes layouts for channels, DMs, and Group Chats. Darkmode only.
-
Tags
Summary
A dark site skin with flat buttons and elements, made using Dracula UI color palette.
Also I took some ideas from Tide: a flat and clean skin for Ao3 by ElectricAlice. -
Tags
Summary
Темный скин сайта с плоскими кнопками и элементами, сделанный на основе цветовой палитры Dracula UI.
Также я использовала некоторые идеи из Tide: a flat and clean skin for Ao3 by 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
In a climate that hates defense attorneys, knowing which cases are worth taking can be harder than it should. Inspired by the similarly named forum, r/AmItheAttorney is a place for defense attorneys to ask for advice on whether or not to take a case!
This is a retelling of the events of the trilogy, through a series of posts just like those.
[Currently on hiatus!]
-
[Site Skin] Drarry authors' notebook by WTF Drarry 2023 (Fandom_Drarry)
Fandoms: Harry Potter - J. K. Rowling, Archive of Our Own
07 Feb 2023
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. Подходит как для мобильных телефонов, так и для десктопных устройств. Чтобы использовать скин, просто скопируйте код.
-
[Site Skin] On the New Year Eve by WTF Drarry 2023 (Fandom_Drarry)
Fandoms: Harry Potter - J. K. Rowling, Archive of Our Own
07 Feb 2023
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] Hogsmeade by WTF Drarry 2023 (Fandom_Drarry)
Fandoms: Harry Potter - J. K. Rowling, Archive of Our Own
07 Feb 2023
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. Подходит как для мобильных телефонов, так и для десктопных устройств. Чтобы использовать скин, просто скопируйте код.
-
[Site Skin] Acchan Blog by WTF BUCK-TICK 2023 (fandom_BUCK_TICK)
Fandoms: BUCK-TICK, Archive of Our Own
10 Feb 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 и выше. Чтобы использовать скин, просто скопируйте код.
-
[Site Skin] The 13th Floor with Moonlight by WTF BUCK-TICK 2023 (fandom_BUCK_TICK)
Fandoms: BUCK-TICK, Archive of Our Own
10 Feb 2023
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
A work skin that imitates the style of Twitch.tv's chat box. (Kinda.)
-
Tags
Summary
The smoker on the balconny made you think a lot.
After Martinaise, after Kim your dear friend transfered to your precinct you found him again.
Thoughts about your identity flare up again.
He invites you to a homosexual underground club. -
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. Подходит как для мобильных телефонов, так и для десктопных устройств. Чтобы использовать скин, просто скопируйте код.
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
Tags
Summary
A work skin that imitates the style of Twitch.tv's chat box. (Kinda.)
-
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
- Language:
- English
- Words:
- 4,500
- Chapters:
- 2/2
- Collections:
- 7
- Comments:
- 363
- Kudos:
- 3,374
- Bookmarks:
- 3,265
- Hits:
- 142,690
Bookmarked by itsjustpoopeh
04 Oct 2023
Bookmarker's Tags:
Bookmarker's Notes
Work/Series Details
How to Make iOS Text Messages on AO3 by CodenameCarrot, La_Temperanza
Completed: 2016-04-10
Work/Series ID: 6434845Relationship Tags:
• No Relationship Tags
Work/Series 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.
(Approximate) Last Read: 2023/10/04
-
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
-
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,024
-
Tags
Summary
Just a quick and dirty HTML reference for AO3, with references to CSS style, HTML style, and other guides.
Series
-
Tags
Summary
Example and basic code for making some text hidden or optional on Ao3 using details and summary tags
-
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
Dark skin with pastel gradients
-
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,024
-
How to Block a User or a Work or a Series on AO3 by ao3commentoftheday
Fandoms: No Fandom
17 May 2022
Tags
Summary
If there are authors or stories out there that you'd rather not ever see in your search results again, you can create a site skin to remove them from your browsing experience.
This was first explained in an AO3 News Post, but I'm going to go into more detail so that anyone with an account can do it, with no need to do any coding at all. Just copy/paste.
Updated to include how to block a series! (and a link to how to block tags)
Series
- Part 8 of How to AO3
-
Tags
Summary
For everyone who wants to use a language in their fic, and provide a translation, making it friendly for mobile and desktop, and something that's fairly easy without needing every possible translation included in the workskin itself, here you go.
-
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
-
Tags
Summary
I made a dark mode site skin that embraces the classic red. Apparently AO3 didn't allow for users to make their skins public anymore so I decided to post it like this!
The skin makes the background black and the text white. Grey and the classic red are accent colours!
Works for desktop and phone great! Feel free to edit and use the CSS however you'd like! But keep in mind this was my first time coding so the CSS is a mess for those of you who are actually good at coding.
(Updated at 2019-12-29
Comment background no longer white.)(Updated 2020-05-24
White background no longer appears in the statistics tab.)(Updated 2020-07-20
When on a page under the upper left menu, the text header in the drop-down menu of the page you are on will show red, not dark grey.)Tutorial on how to use it in notes!
-
Skin for Recreating Bowser’s Inside Story DX’s Stats Display by SpookyTesting (FierySprites)
Fandoms: Super Mario & Related Fandoms, Mario & Luigi Series (Video Games)
17 Sep 2023
Tags
Summary
A work skin for recreating the Star Menu stats display from Mario & Luigi: Bowser’s Inside Story + Bowser Jr.’s Journey.
-
Skin for Recreating Paper Mario’s Menu Screens by SpookyTesting (FierySprites)
Fandoms: Super Mario & Related Fandoms, Paper Mario Series (Video Games)
20 Sep 2023
Tags
Summary
A work skin for recreating several of the menu screens from Paper Mario, as seen in the ROM hack Paper Mario TTYD 64.
For convenience’s sake, the last chapter contains all of the CSS code in one place.
-
Tags
Summary
A Discord workskin that supports most Discord-style markup. Includes layouts for channels, DMs, and Group Chats. Darkmode only.
-
Tags
Summary
A simple text message format that retains basic readability even without skins enabled. Please feel free to use. Instructions included, some assembly required ;) Please feel free to comment if you have any questions or issues.
-
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. -
Tide: a flat and clean skin for Ao3 by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
18 Jul 2021
Tags
Summary
A site skin for Ao3 that clean and minimal and somewhat more modern than the default skin.
Available both in dark and light mode.Series
- Part 8 of CSS code scripts for Ao3
-
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