A Guide to Coding and Fanworks
A collection of tutorials, references, guides, and meta discussion for the creation and appreciation of coding as used for/in transformative works.
(Open, Unmoderated)
Random works
-
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
Live example and tutorial on how to include an Amazon product review in your work.
Series
- Part 1 of AO3 Work Skins
-
Tags
Summary
A simple workskin to mimic a calendar.
Series
- Part 2 of Linwëlin's Workskins
-
Tags
Summary
Use this code to create a link to a specific passage or scene in the middle of a chapter.
-
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
Random bookmarks
-
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
Code and Tutorial for a 2020-style reddit post.
-
Mimicking Twitch Chat for Fics- Some Twitch Chat Workskins by Ultraviollett
Fandoms: Video Blogging RPF, Fandom - Fandom, Real Person Fiction
04 Jul 2022
Tags
Summary
A CSS workskin to mimic twitch chat. I couldn't find any so I decided to create one myself!
Series
- Part 2 of AO3 workskins
-
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
- Language:
- English
- Words:
- 2,156
- Chapters:
- 1/1
- Collections:
- 7
- Comments:
- 92
- Kudos:
- 1,398
- Bookmarks:
- 909
- Hits:
- 60,627
Bookmarked by yue_ix
22 Aug 2019
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
AO3user bafflinghaze says: If you like the look of asterisks or some other divider, but still want to be accessible, you can use code like this (from https://www.ctrl.blog/entry/hr-asterism.html):
#workskin hr {
background: none;
border: 0;
margin: 0.5em 0;
padding: 0;
}
#workskin hr::after {
content: '***';
display: block;
line-height: 1;
text-align: center;
} -
Tags
Summary
Got a fic where characters message each other?
Series
- Part 4 of Azdaema's AO3 Messaging Skins