1 - 20 of 63 Bookmarked Items in Hoard of Excellent Coding Templates and Tutorials
Navigation
List of Bookmarks
-
Tags
Summary
This is a workskin meant to mimic the Reddit mobile UI, updated as of 2026. Features include customisable default display pictures, cross-posting, pinning, locking, archiving, having moderators, lightmode, darkmode, and more.
-
𖤂 Starfleet Themed Work Dividers for Fic Formatting by CodenameCarrot for DoubleStashed
Fandoms: Star Trek, Star Trek: Starfleet Academy (TV 2026)
07 Feb 2026
Tags
Summary
A css skin and tutorial that allows you to make Starfleet themed dividers for use within a chapter. It can be used to modify the h3 heading (for dividers with titles or description) or the hr element (for dividers without).
This skin and the resulting dividers have been tested on, and work with, the standard site skin, low vision site skin, reversi, snow blue, and the highly modified version of simply twilling I use as my standard. So it should work for almost every one of your readers.
Series
- Part 21 of AO3 Work Skins/Tutorials
-
Tags
Summary
Add a direct link to comment on a chapter that looks like a real A03 button!
Right now, if a user is reading in "entire work" the easiest way to comment on a chapter is to open the next chapter in a new tab, then go back a chapter, click comments, and then leave a comment. Readers who downloaded a work have even more hoops to jump though.
This is a guide to making a direct link to the feedback section and/or dedicated comment pages so that our readers can give us some. It uses AO3's default CSS classes to piggyback on the archive formatting our reader is using, making it look like an official A03 button on the web. (CSS formatting does not carry-over if the work is downloaded, but the link will remain.)
Series
- Part 20 of AO3 Work Skins/Tutorials
-
How to Mimic Author's Notes and Kudos/Comment Buttons by La_Temperanza
Fandoms: No Fandom
20 May 2017
Tags
Summary
Anonymous on tumblr: do you have a skin that would mimic the author’s notes and review/kudos buttons section from the end of a fic? the desired effect being that the fic could go on after the “end” of the fic, so after the author’s notes and review/kudos buttons
Here's a tutorial/live example to do just that, with some of the buttons actually functioning. I'll explain more inside!
Series
- Part 14 of AO3 Work Skins/Tutorials
-
How to Make Show/Hide Buttons for Your Fics (including Homestuck Pesterlog-Style) by buttertartz
Fandoms: No Fandom
01 Jan 2026
Tags
Summary
This is a tutorial on how to use CSS skins and HTML on AO3 to make buttons that show/hide a portion of text, similar to Pesterlogs from Homestuck.
Series
-
continued by AMereDream
Fandoms: 人渣反派自救系统 - 墨香铜臭 | The Scum Villain's Self-Saving System - Mòxiāng Tóngxiù
07 Oct 2022
Tags
Summary
> ... and also, you've started reusing old text again. Kudos to you for almost making it six chapters without using the copy/paste button!
The way you described Luo Binghe reacting to AU!Shen Qingqiu is almost exactly the same as the way you described the wife of the Pale Moon Arc, Chapter 3425 to be specific. Is it really that hard to come up with another turn of phrase, or are you just that lazy?
And furthermore... (Read More)
>> O.o what if its deliberate tho...
>> "...the same as the way you described the wife..." Uhhh Airplane? That was an accident, right? Airplane??
(or, several weeks after Airplane Shooting Towards the Sky had posted what he swore was the last chapter of Proud Immortal Demon Way, a new chapter was uploaded to the site.)
Series
- Part 9 of Scum Villain One Shots
- Part 1 of meta madness
-
Tags
Summary
Text convos with bubbles in several systems!
IOS, Signal and WhatsApp for nowSeries
- Part 1 of Works Skins
-
Tags
Summary
Newspaper work skin with responsive columns so it works on desktop AND mobile baby!
Series
- Part 2 of Works Skins
-
Put an Ao3 Fic in YOUR Fic! by lordvoldemortsskin (lordvoldemortsnipple)
Fandoms: No Fandom
01 Feb 2022
Tags
Summary
Work skin to add Ao3 fic layouts, meta info and comments inside your very own fic! Inception, but make it about fics. Ficception.
Series
- Part 3 of Works Skins
-
Tags
Summary
This is a live example of my AO3 skin that allows the author to recreate the look of lined notebook paper in their work. To learn more about it, you can find the tutorial here.
Series
- Part 7 of AO3 Work Skins/Tutorials
-
Tags
Summary
Original coding and design is from layouttest. I make no claims for it, just tweaked it so it will work on AO3.
Series
- Part 5 of AO3 Work Skins/Tutorials
-
mm whatcha say?: Changing Text On Hover for Multilingual Fics (A Download Friendly Workskin) by mackerel_cheese for Graverobbber, enbyguous, spearsofstarlight
Fandoms: No Fandom, Babel - R. F. Kuang
20 Mar 2026
Tags
Summary
Do you want to have a nifty way to have multiple languages in a fic:
- Without making your readers scroll to the AN for a translation?
- Without the text and translation sitting side by side?
- And still make it look pretty when people download it into an EPUB or PDF format?
- Making it work with screenreaders? (Subject to varying screenreader capabilities)
Here is a solution for you. Come on babygirls, let's roll.
(This is a HTML tutorial but I'm lowkey flirting with you by calling you babygirl occasionally because I got bored while writing this.)
NEW UPDATE [20/3/2026]:
- Chapter 1: Sample Usage (Excerpt from a WIP in my drafts)
- A short character study about Griffin Harley from Babel (by R.F. Kuang). Utilizies 3 languages in multiple formats. You don't need to have read Babel to pick apart the code used.
- Chapter 2: Basic Tutorial (same as before)
- Chapter 3: FAQ (regarding customization and usage)
Series
- Part 3 of .shapes_and_colours
-
Tags
Summary
A work skin and tutorial for a Discord chat in AO3. The Discord page is available in light and dark mode!
See Chapter 1 for examples of the work skin, Chapter 2 for a tutorial on how to set up your HTML page and explanations on the code, Chapter 3 for HTML templates for easy copy-pasting and Chapter 4 for the complete CSS code of the work skin.
-
Tags
Summary
Including translations for your story is a hassle, so I'm working to find an easy solution! Join me in this journey!
- PC and Mobile Friendly
- For both SHORT and LONG translations/notes
- Inline edits (no editing your work skin for every translation) -
Tags
Summary
CSS and work-skin for a fake local journaling app for use in fics. Use it to style journal/diary entries for a character who wouldn't post their innermost thoughts in a blog, but would put them in a device for themselves.
-
Action and Reaction by Aeterna_Blooms
Fandoms: Spider-Man: Spider-Verse (Sony Animated Movies), Spider-Man - All Media Types, Marvel (Comics)
19 Aug 2024
Tags
Summary
Group projects are the worst! But you've been paired with Miles G. Morales, and it's no secret that you loathe each other.
Failing the project is unthinkable, unless you'd like to face your parents' unholy wrath, so maybe you can put your differences aside, just this one time?
A reader insert texting AU.
-
Tags
Summary
Whatsapp work skin.
- Text messages, photos, videos, voice messages, links and quotes;
- Group chats;
- Header and icons;
- Scrollable. -
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.
-
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】.
-
Tags
Summary
An expansion to the existing forum skin by fencesit.