1 - 20 of 45 Bookmarked Items in AO3 & Coding Layouts & Creative References
Navigation
List of Bookmarks
-
Tags
Summary
Automatic bookmarklet to transform all Y/N in a fanfic to a word/name of your choosing.
it works on mobile too.
Series
- Part 1 of Scripts for Ao3
-
Bookmark Collections:
-
Tags
Summary
This is an example story to demonstrate some CSS formatting options on the Archive. Click the "Hide Creator's Style" button and check out the related tutorial to see how it's done.
-
Bookmark Collections:
-
-
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
- Language:
- English
- Words:
- 6,444
- Chapters:
- 4/4
- Collections:
- 4
- Comments:
- 215
- Kudos:
- 808
- Bookmarks:
- 518
- Hits:
- 47,484
-
Bookmark Collections:
-
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: 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)
Part Thirteen: Playground for Jinx (glitch text, color, table)
Part Fourteen: Text generator
Part Fifteen: Boxes (still in progress)
Part Sixteen: Vertical Text (NEW)- Language:
- English
- Words:
- 13,788
- Chapters:
- 18/?
- Collections:
- 7
- Comments:
- 123
- Kudos:
- 637
- Bookmarks:
- 647
- Hits:
- 25,826
-
Bookmark Collections:
-
Workskin for showing and hiding spoilers by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
29 Aug 2021
Tags
Summary
A very simple workskin to hide/show spoilers in your works by having your users clicking on a button!
Series
- Part 9 of CSS code scripts for Ao3
- Language:
- English
- Words:
- 319
- Chapters:
- 1/1
- Collections:
- 5
- Comments:
- 19
- Kudos:
- 147
- Bookmarks:
- 127
- Hits:
- 8,625
-
Bookmark Collections:
-
Tags
-
Bookmark Collections:
-
-
Skin for Putting Music Indicators in Your Fic by SpookyTesting (FierySprites)
Fandoms: No Fandom
26 Apr 2022
Tags
Summary
A work skin for inserting stylized music links into your fic, ala Super Smash Bros.’ music labels at the start of each match.
- Language:
- English
- Words:
- 931
- Chapters:
- 2/2
- Collections:
- 2
- Comments:
- 2
- Kudos:
- 60
- Bookmarks:
- 50
- Hits:
- 1,370
-
Bookmark Collections:
-
Tags
Summary
Documentation/Examples for the CSS workskin and HTML code for a Wikipedia article inspired layout to use in your mixed media works.
Created with help from Nautilusopus and DarthTofu.
- Language:
- English
- Words:
- 1,846
- Chapters:
- 4/?
- Collections:
- 6
- Comments:
- 18
- Kudos:
- 183
- Bookmarks:
- 232
- Hits:
- 8,256
-
Bookmark Collections:
-
How to permanently filter out certain tags on AO3 by orphan_account
Fandoms: No Fandom, site-skins
09 Jun 2023
Tags
Summary
Series
- Part 2 of ao3css's templates
-
Bookmark Collections:
-
Tags
Summary
Example and basic code for making some text hidden or optional on Ao3 using details and summary tags
-
Bookmark Collections:
-
-
Tags
Summary
A template for making a playable Murdle with an interactive grid and cards.
- Language:
- English
- Words:
- 10,188
- Chapters:
- 4/4
- Collections:
- 1
- Comments:
- 4
- Kudos:
- 42
- Bookmarks:
- 18
- Hits:
- 873
-
Bookmark Collections:
-
Tags
Summary
A tutorial + live example on how to recreate Ao3 on mobile in your Ao3 fic using CSS and HTML.
Series
- Part 2 of Cool Coding Kumquats
- Language:
- English
- Words:
- 5,081
- Chapters:
- 4/4
- Collections:
- 1
- Comments:
- 3
- Kudos:
- 34
- Bookmarks:
- 22
- Hits:
- 1,292
-
Bookmark Collections:
-
Tags
Summary
[this is an updated version of one of my older workskins!] The perfect workskin for when your character is scrolling through Youtube. I've made it to work well with the workskin disabled, and to look more seamless in fics.
Series
- Part 3 of AO3 workskins
-
Bookmark Collections:
-
Tags
Summary
Make text appear when you click a "button"
Chapter 2: Simple tweaks to existing email and stationery skins- Language:
- English
- Words:
- 1,712
- Chapters:
- 3/?
- Collections:
- 3
- Comments:
- 2
- Kudos:
- 45
- Bookmarks:
- 30
- Hits:
- 1,970
-
Bookmark Collections:
-
Tags
Summary
quick html / css reference to writing in-person "chats" or "skits" for your html fic , while styling the skit in a way that might fit in with your html / chat fic.
(documenting how i did the skin for a particular fic, and a useful html guide overall)
this is "generic", but css could be customized to fit any fandom / video game etc.
for skits, think: tales of series, fire emblem, cookie run kingdom, etcSeries
- Part 3 of #ao3_work_skins
- Language:
- English
- Words:
- 2,940
- Chapters:
- 2/2
- Collections:
- 5
- Comments:
- 10
- Kudos:
- 54
- Bookmarks:
- 28
- Hits:
- 3,513
-
Bookmark Collections:
-
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.-
Bookmark Collections:
-
-
Tags
Summary
A Reddit template for use on AO3.
- Language:
- English
- Words:
- 2,841
- Chapters:
- 4/4
- Collections:
- 2
- Comments:
- 49
- Kudos:
- 331
- Bookmarks:
- 268
- Hits:
- 12,802
-
Bookmark Collections:
-
Tags
Summary
are your characters stuck in quarantine and attending online zoom classes??? here's a really simple skin for that
Series
- Part 2 of #ao3_work_skins
- Language:
- English
- Words:
- 321
- Chapters:
- 2/2
- Collections:
- 6
- Comments:
- 3
- Kudos:
- 49
- Bookmarks:
- 28
- Hits:
- 6,561
-
Bookmark Collections:
-
Tags
Summary
This is a simple workskin that mimics a basic forum thread!
- Language:
- English
- Words:
- 1,159
- Chapters:
- 1/1
- Collections:
- 4
- Comments:
- 23
- Kudos:
- 108
- Bookmarks:
- 151
- Hits:
- 6,262
-
Bookmark Collections:
-
Fonts, and colors, and work skins, oh my! by Charles_Rockafellor, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: css - Fandom, Work Skins - Fandom
24 Jan 2021
Tags
Summary
Explains:
● how to make a work skin;
● how to view fics' work skin rules;
● how to colorize text and circle words and highlight backgrounds (examples in head-note), and change and resize your fonts;
● how to turn all links blue-underscore automatically;
● the CSS code for diacritics to render properly, e.g.: “ầ” & “ồ” (with diacritics not superimposed), or “ị” (with underdot directly beneath, not kerned to the left), without breaking words such as “gầu” or “vịt” (using a monotype font for these letters would create gaps to each side of the ầ or the ị). Head-note has corrected examples;
● Site Skin addenda to block / shrink tags, and block authors / works;
● even a quick way (code included) to simply make a Site Skin so that you can read everything in your font of preference!Full code is included.
I read, appreciate, and reply to all of your comments — they're always welcome!
𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️
Series
- Part 5 of How to
- Language:
- English
- Words:
- 34,816
- Chapters:
- 1/1
- Collections:
- 9
- Comments:
- 411
- Kudos:
- 669
- Bookmarks:
- 871
- Hits:
- 73,711
-
Bookmark Collections: