8 Bookmarked Items in A Guide to Coding and Fanworks
List of Bookmarks
-
User-Selectable Names in a Fanfic Work by feindcode (feind)
Fandoms: Testing, AO3 Abuse, HTML Tryhard - Fandom
06 Aug 2023
Tags
-
Bookmark Collections:
-
-
Tags
Summary
Code and Tutorial for a 2020-style reddit post.
- Language:
- English
- Words:
- 3,248
- Chapters:
- 3/3
- Collections:
- 1
- Comments:
- 10
- Kudos:
- 167
- Bookmarks:
- 129
- Hits:
- 5,931
-
Bookmark Collections:
-
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.
- Language:
- English
- Words:
- 874
- Chapters:
- 4/4
- Collections:
- 1
- Comments:
- 5
- Kudos:
- 128
- Bookmarks:
- 100
- Hits:
- 4,578
-
Bookmark Collections:
-
How to Make Facebook Messenger Chat on AO3 by ran_a_dom (revabhipraya)
Fandoms: No Fandom
17 Jun 2019
Tags
Summary
A tutorial and live example to make Facebook Messenger Chat using AO3 skin.
Series
- Part 3 of AO3 Chat Skin Tutorial
- Language:
- English
- Words:
- 975
- Chapters:
- 1/1
- Collections:
- 1
- Comments:
- 7
- Kudos:
- 101
- Bookmarks:
- 78
- Hits:
- 5,561
-
Bookmark Collections:
-
Tags
Summary
Got a fic where characters message each other?
Series
- Part 4 of Azdaema's AO3 Messaging Skins
- Language:
- English
- Words:
- 938
- Chapters:
- 3/3
- Collections:
- 3
- Comments:
- 12
- Kudos:
- 144
- Bookmarks:
- 94
- Hits:
- 7,691
-
Bookmark Collections:
-
Tags
Summary
This is a tutorial/live example on how to mimic social media in an AO3 work, specifically Twitter, Reddit, and LiveJournal.
- Language:
- English
- Words:
- 893
- Chapters:
- 1/1
- Collections:
- 4
- Comments:
- 50
- Kudos:
- 1,071
- Bookmarks:
- 947
- Hits:
- 37,776
-
Bookmark Collections:
-
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
- Language:
- English
- Words:
- 1,182
- Chapters:
- 1/1
- Collections:
- 3
- Comments:
- 25
- Kudos:
- 139
- Bookmarks:
- 118
- Hits:
- 5,654
-
Bookmark Collections:
-
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:
- 96
- Kudos:
- 1,545
- Bookmarks:
- 998
- Hits:
- 67,291
-
Bookmark Tags:
Bookmark Collections:
Bookmark 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;
}