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
Here is the CSS/HTML for a simple sports scoreboard to use in your AO3 works.
-
Tags
Summary
Tim invents his own Bat-approved texting service. The jury is still out on whether it's a good idea or not.
Series
- Part 4 of The Gentlekid Series
-
Tags
Summary
This is the code and guide for my Star Trek PADD work skin. Let me know if you have any questions!
-
SITE SKIN: Condensed ByLine by Gay_4_Space
Fandoms: AO3, Archive Skins, css - Fandom, Site Skin - Fandom
23 Jul 2021
Tags
Summary
A condensed version of the site skin ByLine.
Series
- Part 3 of Updated Site Skins
- Part 3 of Site Skins
-
SITE SKIN: Updated Workings Fix Actions Left by Gay_4_Space
Fandoms: css - Fandom, Archive Skins, Site Skin - Fandom, AO3
23 Jul 2021
Tags
Summary
Updated the Workings Fix Actions Left to work properly nowadays. Copy/Paste into your own site skin to make it work.
Series
- Part 1 of Updated Site Skins
- Part 1 of Site Skins
-
Decorations for Fic (HTML/CSS): Fan Art, Dividers, Embedded Songs, and More by Jnsn
Fandoms: No Fandom, Archive of Our Own
24 Jul 2021
Tags
Summary
NON-FICTION. This work shows some examples of use of HTML/CSS to decorate a fic with art and other things. The second chapter provides the HTML for each example.
-
Tags
Summary
CSS and work-skin for a fake local journaling app for use in fics. Use it to style journal/diary entries for a character who wouldn't post their innermost thoughts in a blog, but would put them in a device for themselves.
-
Tags
Summary
Guide for using CSS and HTML to create work skins and site skins on Ao3
-
Tags
Summary
AO3 work skin CSS & HTML formatting for imitating reddit in a work. CSS is my own and not copied from somewhere else. Feel free to use as you wish.
-
Tags
Summary
A Reddit template for use on AO3.
-
Tags
Summary
Code and Tutorial for a 2020-style reddit post.
-
[Site Skin] BT Black-and-White by orphan_account for robin_puck, Angrboda_SommarsDottir
Fandoms: BUCK-TICK, Archive of Our Own
08 Sep 2021
Tags
Summary
Фандомный скин для сайта ао3. Написан в подарок команде fandom Buck-Tick, с огромное благодарностью за игру! Тестировался на ноутбуке (разрешение экрана 1366 x 768) и планшете (разрешение 2048 х 1536); see github.
The AO3 site skin. To use the skin, simply copy and paste the CSS code provided.
-
Tags
Summary
AU
What if Franky had a diary -
[Site Skin] Звучание их сердец by orphan_account for robin_puck, Angrboda_SommarsDottir
Fandoms: BUCK-TICK, Archive of Our Own
15 Nov 2021
Tags
Summary
Фандомный скин для сайта ао3, вдохновленный прекрасной серией "Твое сердце" и замечательными артами. Тестировался на ноутбуке (разрешение экрана 1366 x 768) и планшете (разрешение 2048 х 1536); see github. Мобильная версия, подходящая для телефонов, также представлена; see github.
The AO3 site skin. To use the skin, simply copy and paste the CSS code provided.
-
How I Style My System by Emriel for shura_alice, komengrebi
Fandoms: 人渣反派自救系统 - 墨香铜臭 | The Scum Villain's Self-Saving System - Mòxiāng Tóngxiù
24 Nov 2021
Tags
Summary
A few people wanted to know how I style my work so here's a few guides and useful resources to help you because I suck at explaining and I'm no expert.
-
Blaseball Work Skin by facingthenorthwind (spacegandalf)
Fandoms: Blaseball (Video Game)
01 Jan 2022
Tags
Summary
How to get text in your fic to look like things on blaseball.com! Featuring gods, soulscreams, election results and stat changes.
-
Tags
Summary
A work skin that replicates the appearance of the game "Disco Elysium." Includes HTML, CSS, and a brief tutorial.
-
Tags
Summary
Change the code as much as you'd like.
Base is from Reversi. The blue theme is changed back to red and the text colour is a light gray instead of white for ease of reading. The kudo's paragraph is removed (coded by arsenicjade on tumblr, adjusted by me), too many tags on a work are cut off at a certain point (coded by xparrot) and the greeting of your account is removed (coded by goldenfalls on tumblr)
-
Tags
Summary
Made on the request of a friend ages ago.
-
Tags
Summary
Good and bad times inevitably happen, the most important is staying close to your partner and be able to read between the lines
(Please read the End Notes)
Series
- Part 5 of Pompous Pep - 100w Drabbles
- Part 16 of Pompous Pep - Illustrations & Fics
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
Tags
Summary
Live example and tutorial on how to include an Amazon product review in your work.
Series
- Part 1 of AO3 Work Skins
-
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
-
Tags
Summary
A skin that makes the text rainbow and multicolored.
Sot of Beeline style.Series
- Part 6 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 -
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
-
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!
-
This work isn't hosted on the Archive so this blurb might not be complete or accurate.
Tags
- Bookmarks:
- 1
-
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
-
how to (accidentally) start a cult by jihnari
Fandom: 僕のヒーローアカデミア | Boku no Hero Academia | My Hero Academia, 僕のヒーローアカデミア | Boku no Hero Academia | My Hero Academia (Anime & Manga)
19 Jul 2024
- Words:
- 149,822
- Works:
- 4
- Bookmarks:
- 2,244
Bookmarked by hsi__iwg
16 Aug 2021
Bookmarker's Tags:
Bookmarker's Notes
THIS IS FUCKING AWESOME, PLS TEACH ME UR WAYS /hj
-
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
-
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
-
AO3 Work Skin for In-Universe Investigative/Mission Report With Redaction by wafflelate
Fandoms: No Fandom
11 May 2020
Tags
Summary
This work provides the CSS and HTML necessary to make a fanfiction look like an investigative report or mission report, suitable for a variety of fandoms and purposes.
-
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
A Quick Guide to Making Translations Accessible on AO3
-
Skin for Recreating Kirby Star Allies’ Boss Subtitles by SpookyTesting (FierySprites)
Fandoms: Kirby (Video Games)
03 Apr 2022
Tags
Summary
A work skin for recreating the Boss Subtitles that show up in Kirby Star Allies.
Includes all color variants from that game, as well as the ones from the Wave 3 update/Heroes in Another Dimension.
-
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
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. -
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
-
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
-
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