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.
-
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
-
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 HTML and CSS to format screenplay and scripts (or dialog-only/dialog-heavy works), but 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 ;)
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
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 Архив на русском
-
Tags
Summary
Страницы создания и редактирования работ на русском.
Series
- Part 3 of Архив на русском
-
Tags
Summary
Адаптируем боковое меню фильтров
Series
- Part 4 of Архив на русском
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
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
-
The Nice and Accurate Guide to Footnotes by Vigs for fish_from_murderland
Fandoms: Good Omens - Neil Gaiman & Terry Pratchett, Good Omens (TV)
10 Aug 2019
Tags
Summary
If you're writing fanfiction for Good Omens, you may find yourself wanting to include footnotes.
But html can be confusing. What can you do?
Read this guide to find out!
-
Tags
Summary
A place for very basic HTML.
There will be a LOT of repetition in this guide.
-
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 tutorial + live example on how to add Gmail-esque emails into your fic using CSS and HTML.
Series
- Part 3 of Cool Coding Kumquats
-
Summary
We ride at dawn, to fight the programming errors on our screens and to tear our hair out and cry the long suffering cry.
- Words:
- 8,476
- Works:
- 3
- Bookmarks:
- 1
-
The Choose Your Own Adventure Guide to Choose Your Own Adventure Fics with AO3 Limited HTML by 0_0_MLM
Fandoms: No Fandom, Fandom - Fandom
30 Jan 2024
Tags
Summary
Create single chapter interactive choose your own adventure fics—no links required! Just some creative CSS.
-
Tags
Summary
Someone asked me how Bruce Wayne's company is structured and I went a little overboard, so now I'm archiving it Because Reasons. Feel free to use this for your own fics if you are also writing a universe where the Wayne family turned spite and pettiness into a billion-dollar empire.
Series
- Part 50 of Sorrowful and Immaculate Hearts
-
Tags
Summary
Would you like to change your AO3 so that each type of tag is a different colour? Do you want to make the Relationship tags bold instead of the Warnings? Do you want to combine this Quality Of Life feature with another skin you're already using? Read on!
Chapter One is the CSS code (for those who already know how to site skin). Chapter Two is an explanation of how to put a skin onto your AO3, as well as how to combine skins.
You must be logged into an AO3 account in order to use a site skin.
Series
- Part 13 of How to AO3
- Part 16 of pi learns how to site skin
Bookmarked by Latias_Eevee
17 Jan 2024
Bookmarker's Tags:
Bookmarker's Notes
Change the colour and style of AO3 tags by memorizingthedigitsofpi
=
Would you like to change your AO3 so that each type of tag is a different colour? Do you want to make the Relationship tags bold instead of the Warnings? Do you want to combine this Quality Of Life feature with another skin you're already using? Read on!Chapter One is the CSS code (for those who already know how to site skin). Chapter Two is an explanation of how to put a skin onto your AO3, as well as how to combine skins.
You must be logged into an AO3 account in order to use a site skin
=
Part 13 of How to AO3 Part 16 of pi learns how to site skin -
The Nice and Accurate Guide to Footnotes by Vigs for fish_from_murderland
Fandoms: Good Omens - Neil Gaiman & Terry Pratchett, Good Omens (TV)
10 Aug 2019
Tags
Summary
If you're writing fanfiction for Good Omens, you may find yourself wanting to include footnotes.
But html can be confusing. What can you do?
Read this guide to find out!
-
Tags
Summary
Type in colour, make pesterlogs, and more by following the provided instructions.
I know there already is a Homestuck skin, but this one has a background function and a function for the larger command font.
-
Tags
Summary
In this work, I'm going to outline different elements of AO3 and how you can customize them in different ways. Using these instructions, you can start understanding the basics of CSS code for the specific purpose of creating an AO3 site skin.
I'm self-taught with CSS and still learning how to build a comprehensive AO3 site skin, but I'm sharing what I know so that you can join the skin-creation community - or at least modify existing skins to suit your needs better.
No prior knowledge of CSS or html are required to use the instructions in this work.
-
Tags
Summary
Example and instructions on how to mimic AO3 comments in a fic.
-
Tags
Summary
This is a tutorial/live example on how to mimic social media in an AO3 work, specifically Twitter, Reddit, and LiveJournal.
-
Tags
Summary
Example and instructions on how to mimic AO3 comments in a fic.
-
The Fic Writer's Guide to Formatting (An AO3 Repository) by AnisaAnisa
Fandoms: No Fandom
15 Mar 2024
Tags
Summary
A guide/resource/tutorial/testing ground for HTML and CSS on AO3.
1. HTML Basics – Manipulating text and page formatting.
2. Links & Embeds - How to add links, images, and GIFs.
3. Page Dividers - How to customise page dividers.
4. Titles - How to customise work, chapter, username and link titles.
5. Fonts - How to customise fonts.
6. Tables - How to make tables.
7. Borders - How to implement borders.
8. Boxes - How to make a box.
9. Navigations - How to use hyperlinks.
10. Afterword - Further reading and resources.Series
- Part 1 of The Fic Writer's Guide
-
Tags
Summary
Just a quick and dirty HTML reference for AO3, with references to CSS style, HTML style, and other guides.
Series
-
How to Override the Archive's Automated Chapter Headers by C Ryan Smith (AiedailEclipsed)
Fandoms: No Fandom
25 Nov 2018
Tags
Summary
This is a tutorial/live example on how to override the Archive's automated chapter heading system and define your own (eg remove "Chapter 1: Chapter Title" and insert "Act 1, Verse 1" instead).
-
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
-
The Fic Writer's Guide to Formatting (An AO3 Repository) by AnisaAnisa
Fandoms: No Fandom
15 Mar 2024
Tags
Summary
A guide/resource/tutorial/testing ground for HTML and CSS on AO3.
1. HTML Basics – Manipulating text and page formatting.
2. Links & Embeds - How to add links, images, and GIFs.
3. Page Dividers - How to customise page dividers.
4. Titles - How to customise work, chapter, username and link titles.
5. Fonts - How to customise fonts.
6. Tables - How to make tables.
7. Borders - How to implement borders.
8. Boxes - How to make a box.
9. Navigations - How to use hyperlinks.
10. Afterword - Further reading and resources.Series
- Part 1 of The Fic Writer's Guide