HTML
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
There are some great quick guides to HTML on A03. This is not one of them - it is a comprehensive guide, dividing all of the available tags into the following categories:
1. Text Formatting (in-line HTML)
2. Page Formatting (block HTML)
3. Tables and Lists
4. Links and ImagesEach tag will 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.
It will also introduce tag attributes, ways to further refine formatting, for a few simple - but widely applicable - cases.
-
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
-
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
-
HTML test coding by Grumpy_Old_Snake
Fandoms: Original Work, Undertale, html help, Non-Fiction - Fandom
10 Jul 2017
Tags
Summary
I set out to see if there's a way to create Sans' spread out dramatic speech in a readable way that line-breaks smoothly. I believe I was successful! So here are some instructions.
-
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
Some formatting fixes that I've found in real-time. If you comment I'll see if I can help, but no guarantees!
-
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: Choose Your Own Adventure
Part Seven: Chapter Title
Part Eight: The Title, the Username and Links
Part Nine: Boxes (still in progress)
Part Ten: Newspaper Article -
How to Size Images on AO3 by Informative_Dandy
Fandoms: media - Fandom, Meta - Fandom, All - Fandom
22 Jan 2019
Tags
Summary
Learn how to edit the HTML of your image files so they automatically size themselves to fit any screen (both mobile and desktop). It's super EASY!
-
Tags
Summary
Based on phyripo's guide, with some usability improvements made to reblogs and photoset creation.
-
loaf of love by arranonymous (fiqueligia)
Fandoms: Kuroko no Basuke | Kuroko's Basketball
28 Jan 2021
Tags
Summary
[ To you all, Paparazzi ]
-
Tags
Summary
A tutorial for creating and formatting spreadsheets in AO3, using CSS and HTML.
-
Tags
Summary
A short tutorial for creating ruby text (furigana) in AO3, using CSS and HTML.
-
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
-
go-black by abracatastrophe (fiqueligia) for homurashunkin
Fandoms: Black Clover - Tabata Yuki (Anime & Manga)
02 Apr 2020
Tags
Summary
Berbekal info dari Gugel yang always listening always understanding, Yuno akhirnya bisa melakukan pemesanan pertamanya.
[ AstaYuno Slight!LichtLumiereRhya ]
-
Tags
Summary
Essentially, I write on a mobile device and therefore have to use HTML instead of rich text. I decided to conduct an experiment and these were the results.
If you're having trouble with formatting, this might help...?
[For HTML basics, click "About" on the hotbar up ^ there, then "FAQ" and find your way from there)
-
Tags
Summary
Based on gadaursan's "Fire Emblem Support Scripting" work skin, a formatting and CSS to format screenplay and scripts (or dialogue-only/dialogue-heavy stories), but now with some edits: 1) adjusted the images for smaller screens, 2) added a text box/speech bubble, 3) In version 3, added character's name.
-
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 ;)
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!I'm not going to say I take requests, but I'm always looking for inspiration.
Series
- Part 1 of CSS in Testing
-
Tags
Summary
Any place that you can add text on AO3, you can also add a link.
- summary
- author's note
- comment
- profile
Here's how you do it.
Series
- Part 4 of How to AO3
-
Tags
Summary
Настройка скина для сайта с сортировкой тэгов и русскими названиями категорий в шапках
Series
- Part 1 of Архив на русском
-
Tags
Summary
Добавим немного кириллицы на главную страницу archiveofourown
Series
- Part 2 of Архив на русском
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
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
-
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 colorize text and circle words and highlight backgrounds (examples in head-note), and change and resize your fonts;
● 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.
Full code is included.If you're interested in CSS effects in your summary, then please see How to Override the Archive's Automated Chapter Headers and Bleed Gold.
I read and appreciate (and try to reply to) all of your comments (they are always welcome)!
𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️
Series
- Part 1 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 ;)
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!I'm not going to say I take requests, but I'm always looking for inspiration.
Series
- Part 1 of CSS in Testing
-
Tags
Summary
A work skin for mimicking Discord messages. Works on both mobile and desktop, with the creator's style enabled or disabled. Code is linked in the fic notes.
Series
- Part 2 of work skins
-
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
Arthur groaned. He sounded muted, as if he pulled the phone away from his head but forgot to press speaker. “You always say that when you’re looking at those sites.”
Merlin gaped and scrolled past the small vibrators and into the XXL. “I am not a sex addict always looking at porn.”
-
Tags
Summary
Just a test for Colour Fonts used on the Basic Skin. This is so I can have people test out whether the fonts are eye-bleeding between Light and Dark Modes while reading, and so personally have quick and easy access to copy/paste CSS for colours.
-
Skin for Recreating Kirby Star Allies’ Boss Subtitles by SpookyTesting (FierySprites)
Fandoms: Kirby (Video Games)
02 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.
-
AO3 Work Skin for In-Universe Investigative/Mission Report With Redaction by wafflelate
Fandoms: No Fandom
10 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
There are some great quick guides to HTML on A03. This is not one of them - it is a comprehensive guide, dividing all of the available tags into the following categories:
1. Text Formatting (in-line HTML)
2. Page Formatting (block HTML)
3. Tables and Lists
4. Links and ImagesEach tag will 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.
It will also introduce tag attributes, ways to further refine formatting, for a few simple - but widely applicable - cases.
-
Tags
Summary
A Quick Guide to Making Translations Accessible on AO3
-
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
There are some great quick guides to HTML on A03. This is not one of them - it is a comprehensive guide, dividing all of the available tags into the following categories:
1. Text Formatting (in-line HTML)
2. Page Formatting (block HTML)
3. Tables and Lists
4. Links and ImagesEach tag will 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.
It will also introduce tag attributes, ways to further refine formatting, for a few simple - but widely applicable - cases.
-
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
-
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 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
There are some great quick guides to HTML on A03. This is not one of them - it is a comprehensive guide, dividing all of the available tags into the following categories:
1. Text Formatting (in-line HTML)
2. Page Formatting (block HTML)
3. Tables and Lists
4. Links and ImagesEach tag will 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.
It will also introduce tag attributes, ways to further refine formatting, for a few simple - but widely applicable - cases.
-
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
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
Based on gadaursan's "Fire Emblem Support Scripting" work skin, a formatting and CSS to format screenplay and scripts (or dialogue-only/dialogue-heavy stories), but now with some edits: 1) adjusted the images for smaller screens, 2) added a text box/speech bubble, 3) In version 3, added character's name.