13 Bookmarked Items in Collected works explaining coding
List of Bookmarks
-
Tags
Summary
Work skin for different types of found documents, for people who are into that kind of thing.
Update 1 December 2022: Added parameters for links within div sections. Previously, applying this work skin on top of the Reversi site skin could make links difficult to read.
- Language:
- English
- Words:
- 2,579
- Chapters:
- 3/3
- Collections:
- 2
- Comments:
- 18
- Kudos:
- 104
- Bookmarks:
- 102
- Hits:
- 3,844
-
Bookmark Collections:
Bookmark Notes:
documents to include writing
-
Tags
Summary
Newspaper work skin with responsive columns so it works on desktop AND mobile baby!
Series
- Part 2 of Works Skins
- Language:
- English
- Words:
- 537
- Chapters:
- 1/1
- Collections:
- 1
- Comments:
- 12
- Kudos:
- 148
- Bookmarks:
- 170
- Hits:
- 10,631
-
Bookmark Collections:
Bookmark Notes:
newspaper
-
Tags
Summary
This is a live example of my AO3 skin that allows the author to recreate the look of sticky notes (aka Post-Its) in their fic. To learn more about it, you can find the tutorial here.
Series
- Part 8 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 34
- Chapters:
- 1/1
- Collections:
- 6
- Comments:
- 21
- Kudos:
- 339
- Bookmarks:
- 284
- Hits:
- 24,852
-
Bookmark Collections:
Bookmark Notes:
post it notes :)
-
AO3 Workskin for Forum Thread【EXPANSION PACK】(Mobile-Friendly Version) by vanillafog
Fandoms: No Fandom
05 Mar 2026
Tags
Summary
A mobile-friendly rework of AMereDream's AO3 Workskin for Forum Thread【EXPANSION PACK】.
- Language:
- English
- Words:
- 1,314
- Chapters:
- 2/2
- Collections:
- 1
- Comments:
- 3
- Kudos:
- 25
- Bookmarks:
- 27
- Hits:
- 1,374
-
Bookmark Collections:
Bookmark Notes:
forum posts
-
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
- Language:
- English
- Words:
- 17,765
- Chapters:
- 16/16
- Comments:
- 325
- Kudos:
- 1,239
- Bookmarks:
- 895
- Hits:
- 38,318
-
Bookmark Collections:
Bookmark Notes:
moving/expanding letters on hover (as seen in anon's "you've got mail")
-
Tags
Summary
Whatsapp work skin.
- Text messages, photos, videos, voice messages, links and quotes;
- Group chats;
- Header and icons;
- Scrollable.- Language:
- English
- Words:
- 4,661
- Chapters:
- 1/1
- Collections:
- 4
- Comments:
- 68
- Kudos:
- 513
- Bookmarks:
- 546
- Hits:
- 21,963
-
Bookmark Collections:
Bookmark Notes:
whatsapp work skin
-
Tags
Summary
Want to code in ao3?
Heres how!
This work will teach you how to code on ao3 from simple to more advanced techniques.
Some code featured in this work is credited to their respected authors, so be sure to check them out as well!
Series
- Part 1 of Ao3 C̵̬̳͕̲̪̖̉̎̂͌̿̊̈́̅o̶̬̳͇͙̤̎̄͗̈́̓̃̔̚͜͝d̷̙̹̖̳̪̞̬̗̔͐́̏̕i̶̧͈̱̣̝̍ͅn̸̛͉̤̙̭̂̾̏̏̑̈́̀̎̅̅͂g̸̢͉͈̦͍͎̮͎̭̮̉̌́̇̄̓͜ͅͅ
- Language:
- English
- Words:
- 43,986
- Chapters:
- 21/?
- Collections:
- 2
- Comments:
- 148
- Kudos:
- 410
- Bookmarks:
- 617
- Hits:
- 20,004
-
Bookmark Collections:
-
Tags
Summary
Based on phyripo's guide, with some usability improvements made to reblogs and photoset creation.
- Language:
- English
- Words:
- 2,075
- Chapters:
- 3/3
- Collections:
- 6
- Comments:
- 12
- Kudos:
- 144
- Bookmarks:
- 232
- Hits:
- 9,602
-
Bookmark Collections:
Bookmark Notes:
tumblr post coding
-
Twitter HTML & CSS Coding Test Run by Fluffycorn_njst
Fandoms: Marvel Cinematic Universe, The Avengers (Marvel Movies), Haikyuu!!
20 May 2023
Tags
Summary
All of the different kinds of Twitter tweet templates displayed in one place as demonstrated using characters from fandoms written above! Includes the source of the HTML & CSS code work used here!
ALL THE CREDIT goes to gadaursan's Twitter guide & tutorial for the coding! And so I'm basically just a glorified display case to see more examples of what the design looks like! I also only did this to try it out for fun and practice in case I'd use it in the future~
- Language:
- English
- Words:
- 367
- Chapters:
- 1/1
- Collections:
- 4
- Comments:
- 2
- Kudos:
- 26
- Bookmarks:
- 24
- Hits:
- 2,729
-
Bookmark Collections:
Bookmark Notes:
Twitter! all tweet formats <3
-
Epistolary workskin by irrationalpie for Stratisphyre
Fandoms: No Fandom, 陈情令 | The Untamed (TV)
24 Apr 2025
Tags
Summary
A simple workskin and tutorial for including letters in a fic (with a mini fic to demonstrate!).
This workskin merges with the reader's site skin rather than overriding the text or background color (tested with both default/light mode and reversi/dark mode).
-
Bookmark Collections:
Bookmark Notes:
Coding letters whoop!
-
-
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
- Language:
- English
- Words:
- 1,362
- Chapters:
- 1/1
- Collections:
- 1
- Comments:
- 6
- Kudos:
- 61
- Bookmarks:
- 72
- Hits:
- 3,141
-
Bookmark Collections:
Bookmark Notes:
E-mail coding!!
-
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 and interests.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: Videos (and gifs)
Part Seven: Choose Your Own Adventure
Part Eight: Chapter Title
Part Nine: The Title, the Username, and Links
Part Ten: Kudos Message
Part Eleven: Newspaper Article
Part Twelve: Content Notes and Spoiler (NEW: Opacity and hover translations)
Part Thirteen: Playground for Jinx (glitch text, color, table)
Part Fourteen: Text generator
Part Fifteen: Boxes (still in progress)
Part Sixteen: Vertical Text
Part Seventeen: Transition (NEW)
Part Eighteen: Automated Animation (NEWEST)- Language:
- English
- Words:
- 14,992
- Chapters:
- 20/?
- Collections:
- 7
- Comments:
- 201
- Kudos:
- 992
- Bookmarks:
- 927
- Hits:
- 37,612
-
Bookmark Collections:
Bookmark Notes:
Coding and HTML/CSS things!
(e.g. hover for translation <3)
-
How to Make iOS Text Messages on AO3 by CodenameCarrot, La_Temperanza
Fandoms: No Fandom
10 Apr 2016
Tags
Summary
This is a tutorial/live example on how to mimic iOS text messages on AO3 without the need to use images. There's also a chapter on how to have emojis displayed on AO3 as well.
Series
- Part 3 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 4,500
- Chapters:
- 2/2
- Collections:
- 7
- Comments:
- 385
- Kudos:
- 4,496
- Bookmarks:
- 4,399
- Hits:
- 197,981
-
Bookmark Collections:
Bookmark Notes:
Text message work skin.