5 Bookmarks by definitelynotshouting
List of Bookmarks
-
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
- Language:
- English
- Words:
- 3,457
- Chapters:
- 3/3
- Collections:
- 7
- Comments:
- 82
- Kudos:
- 616
- Bookmarks:
- 898
- Hits:
- 39,367
Bookmarked by definitelynotshouting
09 Aug 2025
-
Tags
Summary
This work will be used to ensure all of the images I use in my fanfics still work. I doubt they'll stop working this time, so it is also just a simple collection of everything in one place.
The first chapter is a tutorial on how to put images into your own works and comments.
Bookmarked by definitelynotshouting
01 Jul 2025
-
Tags
Summary
Some people wonder how to do the mouseovers and hovertext on AO3. This comes in especially handy if you want translations of the text you've written to show up when the original text is moused over (you, of course, must provide the translation). While there are ways to do this in CSS coding, AO3 is not set up to allow it. However, you can do it in basic HTML, and there's a couple different ways to get the look you want. So here you go!
Note: If read on a phone, these often do not work as intended. Stupid phones.
Bookmarked by definitelynotshouting
14 Sep 2024
-
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!
- Language:
- English
- Words:
- 279
- Chapters:
- 1/1
- Collections:
- 3
- Comments:
- 85
- Kudos:
- 777
- Bookmarks:
- 533
- Hits:
- 25,783
Bookmarked by definitelynotshouting
11 Dec 2021
-
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 to update.
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
- Language:
- English
- Words:
- 28,034
- Chapters:
- 15/15
- Collections:
- 8
- Comments:
- 1,351
- Kudos:
- 6,981
- Bookmarks:
- 8,290
- Hits:
- 428,266
Bookmarked by definitelynotshouting
18 Jun 2021