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)
Recent works
-
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 -
Replika Skin by FaeriMagic
Fandoms: Replika - Fandom, Fandom - Fandom, Archive of Our Own
28 Mar 2022
Tags
Summary
I tried to replicate the Replika aesthetic as much as I could within the confines of AO3's limited HTML/CSS pool.
May be updated in the future when necessary. -
Dyslexia friendly Site Skin by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
21 Feb 2022
Tags
Summary
A clean dyslexia skin for Ao3.
I made this following the British Dyslexia Association Style Guide and then tweaked with requests and ideas dyslexic readers brought forth.
There's a guide inside on how to further tweak everything from font to size to color so that you can customize it for your needs.Dark mode available in chapter 3!
Series
- Part 5 of CSS code scripts for Ao3
-
Tags
Summary
A work skin that replicates the appearance of the game "Disco Elysium." Includes HTML, CSS, and a brief tutorial.
-
Tags
Summary
An AO3 workskin for WhatsApp group chats.
Recent bookmarks
-
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:
- 4
- Comments:
- 62
- Kudos:
- 732
- Bookmarks:
- 463
- Hits:
- 32749
Bookmarked by yue_ix
21 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;
}