1 - 20 of 31 Bookmarked Items in Hoard of Excellent Coding Templates and Tutorials
Navigation
List of Bookmarks
-
Tags
Summary
A glimpse into Shane and Ilya's life after getting together on Facebook Marketplace, and a short-lived attempt at finding a third roommate.
A sequel to hi shane, is this still available?
Series
- Part 2 of message sent to seller
-
Tags
Summary
iMessage as it looks in iOS 7 to present.
Series
- Part 1 of Azdaema's AO3 Messaging Skins
-
How to Make Facebook Messenger Chat on AO3 by ran_a_dom (revabhipraya)
Fandoms: No Fandom
02 Jun 2026
Tags
Summary
A tutorial and live example to make Facebook Messenger Chat using AO3 skin.
Series
- Part 3 of AO3 Chat Skin Tutorial
-
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
-
Tags
Summary
Trying out css and html things so I can make a fic—not sure what type of fic.
Maybe a full on social media fic… or just for a few things here and there… I don’t really know, but it’s here and I can’t wait to use it!
-
How to make a News Website Article skin on Ao3 by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
26 Dec 2019
Tags
Summary
Live example and tutorial for a news article extract that include website header, fake social media buttons, title and author of the article.
Series
- Part 1 of CSS code scripts for Ao3
-
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
Based on gadaursan's "Fire Emblem Support Scripting" work skin, a HTML and CSS to format screenplay and scripts (or dialog-only/dialog-heavy works), but with some edits: 1) adjusted the images for smaller screens, 2) added a text box/speech bubble, 3) In version 3, added character's name.
Series
- Part 1 of Clover Zero's AO3 HTML & CSS
-
Tags
Summary
Primarily just where I share work skin code and discuss ways to improve the Ao3 experience, including:
- Twitter and Instagram like posts
- Non iOS messaging systems
- Avatar and image formatting for script formats.
- Search engine interfaces
- Documentation on AO3 Site SkinsSeries
-
Skin for Recreating Discord Chat Logs (2025) by SpookyTesting (FierySprites)
Fandoms: No Fandom
20 Nov 2025
Tags
Summary
A work skin for recreating a somewhat simplified version of Discord’s chat logs circa November 2025, using wovenstarlight’s original 2020 one as a base. Only uses the color palette for Discord’s dark mode, not light mode.
For convenience’s sake, the last chapter contains all of the CSS code in one place.
-
Tags
Summary
A Discord workskin that supports most Discord-style markup. Includes layouts for channels, DMs, and Group Chats. Darkmode only.
-
Tags
Summary
Code & tutorial for an old!Reddit (pre-2018 redesign) post.
-
Tags
Summary
Code and Tutorial for a 2020-style reddit post.
-
Mimicking Twitter Posts for Fics - Some Twitter Workskins by Ultraviollett
Fandoms: Fandom - Fandom, Real Person Fiction
20 Apr 2024
Tags
Summary
A repository of a twitter skin I made for Ao3, so you can add your characters tweeting at eachother inside your fic. Friendly towards different siteskins, disabled workskins, screenreaders and mobile readers.
This is mainly a demo, not a tutorial. I am currently planning to create a generator for this workskin on this site.
Series
- Part 4 of AO3 workskins
-
Tags
Summary
This is a tutorial on how to create Twitter / X templates for AO3, includes both Tweets and profile card.
- Scalable so it's also accessible to mobile users.
- Tweets (chapter 1): text, tags, quote tweet, photo(s), replies, verified checkmark.
- Profile card (chapter 2): displays a user's profile as shown on Twitter.
- Please let me know if there are bugs and/or requests.Ao3 Twitter Template Generator now available! (Made possible by the amazing Anlanther): Now you only have to fill in your text and copy-paste the generated code!
-
Tags
Summary
好吧我相信肯定有人HTML学得比我好Skins做得比我漂亮，我只是来制作傻瓜教程的，致力于让每个看了的人都能学会。
主要原因是鹅师傅永远怀抱一种花时间写了的东西一定要分享的精神。
Series
- Part 1 of 沉迷于CSS和HTML😵
-
Tags
-
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) -
Css in Testing: Second in the Series by InfinitysWraith
Fandoms: Ao3-Skins, Work-Skins, css - Fandom
21 Aug 2023
Tags
Summary
𝔚𝔢𝔩𝔠𝔬𝔪𝔢 𝔱𝔬 𝔭𝔞𝔯𝔱 𝔱𝔴𝔬 𝔬𝔣 𝔴𝔥𝔞𝔱 𝔦𝔰 𝔫𝔬𝔴 𝔞𝔭𝔭𝔞𝔯𝔢𝔫𝔱𝔩𝔶 𝔞 𝔰𝔢𝔯𝔦𝔢𝔰 𝔟𝔢𝔠𝔞𝔲𝔰𝔢 ℑ 𝔟𝔯𝔬𝔨𝔢 𝔰𝔬𝔪𝔢𝔱𝔥𝔦𝔫𝔤 𝔦𝔫 𝔪𝔶 𝔩𝔞𝔰𝔱 𝔚𝔬𝔯𝔨 𝔖𝔨𝔦𝔫 𝔞𝔫𝔡 𝔠𝔞𝔫'𝔱 𝔞𝔡𝔡 𝔞𝔫𝔶𝔱𝔥𝔦𝔫𝔤 𝔪𝔬𝔯𝔢 𝔱𝔬 𝔦𝔱 :)
𝔜𝔬𝔲'𝔯𝔢 𝔴𝔢𝔩𝔠𝔬𝔪𝔢 𝔱𝔬 𝔞𝔰𝔨 𝔮𝔲𝔢𝔰𝔱𝔦𝔬𝔫𝔰, 𝔰𝔱𝔢𝔞𝔩 𝔠𝔬𝔡𝔢 𝔬𝔯 𝔬𝔣𝔣𝔢𝔯 𝔪𝔢 𝔦𝔫𝔰𝔭𝔦𝔯𝔞𝔱𝔦𝔬𝔫. 𝔍𝔲𝔰𝔱 𝔡𝔬𝔫'𝔱 𝔱𝔞𝔨𝔢 𝔪𝔶 𝔞𝔯𝔱𝔴𝔬𝔯𝔨 𝔴𝔦𝔱𝔥𝔬𝔲𝔱 𝔞𝔱 𝔩𝔢𝔞𝔰𝔱 𝔩𝔦𝔫𝔨𝔦𝔫𝔤 𝔪𝔢 𝔶𝔬𝔲𝔯 𝔣𝔦𝔠 ;)
ℑ𝔣 𝔶𝔬𝔲 𝔥𝔞𝔳𝔢𝔫'𝔱 𝔞𝔩𝔯𝔢𝔞𝔡𝔶, 𝔱𝔞𝔨𝔢 𝔞 𝔩𝔬𝔬𝔨 𝔞𝔱 𝓟𝓪𝓻𝓽 𝓞𝓷𝓮 𝔣𝔬𝔯 𝔪𝔬𝔯𝔢 𝔭𝔯𝔬𝔧𝔢𝔠𝔱𝔰.
Click me!
Ao3 done unleashed a monster right here and it's goddamn beautiful.
Series
- Part 2 of CSS in Testing
-
Twitter Mock-Up (Heavily Inspired by aerynevenstar's work) by TheBrookesNook
Fandoms: No Fandom
20 Jun 2021
Tags
Summary
This is me trying out aerynevenstar's workskin for the tweet format. So big thanks to them!
I also end up tweeking a bit of the CSS to fit my personal preferences.