1 - 20 of 37 Bookmarked Items in html coding tutorials
Navigation
List of Bookmarks
-
Tags
Summary
There are some great quick-and-dirty guides to HTML on A03. This is not one of them - it is a comprehensive guide
It's now 2025, a decade later. A03 supports some new HTML and and we're all walking around reading fic on supercomputers that fit in a jean pocket. It was time to update.
The previous three chapters have been divided into smaller concepts. Each tag continues to have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. Most tags have their attributes, things like [src] or [title], listed and examples of how using the attributes modify the tags.
There's a chapter on Bad Ideas, including how some of the archive's default CSS is available to you to format your work (users can't turn that off by hiding a workskin!)
Oh. And I added a bunny army. You could learn how to add one too.
/)/) /)/) /)/) (..) (..) (..) *( ) *( ) *( )
Series
- Part 19 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 28,122
- Chapters:
- 15/15
- Collections:
- 8
- Comments:
- 1,403
- Kudos:
- 7,336
- Bookmarks:
- 8,774
- Hits:
- 448,709
-
Bookmark Tags:
Bookmark Collections:
-
Bookmark Collections:
Bookmark Notes:
Coding help for AO3
-
Tags
Summary
Embedding tutorial
- Language:
- English
- Words:
- 212
- Chapters:
- 1/1
- Collections:
- 1
- Comments:
- 4,786
- Kudos:
- 9,033
- Bookmarks:
- 5,684
- Hits:
- 414,926
-
Bookmark Collections:
-
Tags
Summary
Basic HTML codes to create some variety in your AO3 posts.
-
Bookmark Collections:
-
-
Tags
Summary
This is my list of workskin, how to add workskin to your work, and how to use each of the class in my workskin.
If you use it I would appreciate a credit so that more people can be able to use it!-
Bookmark Tags:
Bookmark Collections:
-
-
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:
- 368
- Kudos:
- 1,413
- Bookmarks:
- 1,012
- Hits:
- 45,624
-
Bookmark Collections:
-
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
- Language:
- English
- Words:
- 1,040
- Chapters:
- 1/1
- Collections:
- 6
- Comments:
- 12
- Kudos:
- 241
- Bookmarks:
- 171
- Hits:
- 23,639
-
Bookmark Collections:
Bookmark Notes:
work skins
-
Bookmark Collections:
-
TMA transcript work skin by Ninjabunny99
Fandoms: The Magnus Archives (Podcast), Original Work
18 Oct 2022
Tags
Summary
Workskin for all your original TMA transcript needs! Modeled after the unofficial transcripts archive, I made it as similar as I could. Looks best on desktop but still reads fine on mobile. Formatted example using text from the show in the first chapter, work skin and full html in the second.
Feel free to use and edit however you want. Have fun!- Language:
- English
- Words:
- 443
- Chapters:
- 2/2
- Collections:
- 1
- Comments:
- 9
- Kudos:
- 30
- Bookmarks:
- 27
- Hits:
- 1,561
-
Bookmark Collections:
-
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.
- Language:
- English
- Words:
- 1,719
- Chapters:
- 4/4
- Collections:
- 2
- Comments:
- 3
- Kudos:
- 104
- Bookmarks:
- 117
- Hits:
- 6,418
-
Bookmark Collections:
-
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
- Language:
- English
- Words:
- 714
- Chapters:
- 1/1
- Collections:
- 5
- Comments:
- 14
- Kudos:
- 242
- Bookmarks:
- 197
- Hits:
- 19,425
-
Bookmark Collections:
-
Minimal skin for Ao3 in both dark and light mode by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
26 Sep 2020
Tags
Summary
A site skin that is somewhat clean and minimal and low contrast. Both in dark and light mode.
The images are responsive on mobile so you won't have huge images.
Series
- Part 2 of CSS code scripts for Ao3
- Language:
- English
- Words:
- 290
- Chapters:
- 1/1
- Collections:
- 2
- Comments:
- 62
- Kudos:
- 271
- Bookmarks:
- 95
- Hits:
- 27,289
-
Bookmark Collections:
-
Tags
Summary
I deconstructed Heterochromia_Mars's Discord skin and reconstructed a new one that should work slightly better on screens of all sizes, especially mobile screens.
Note: Please check Chapter 3 for CSS code whenever the skin updates!
- Language:
- English
- Words:
- 7,261
- Chapters:
- 5/5
- Collections:
- 4
- Comments:
- 32
- Kudos:
- 166
- Bookmarks:
- 150
- Hits:
- 7,283
-
Bookmark Collections:
-
Tags
Summary
And different backgrounds to make them as separate as possible for easier reading.
Series
- Part 12 of CSS code scripts for Ao3
- Language:
- English
- Words:
- 492
- Chapters:
- 1/1
- Collections:
- 2
- Comments:
- 38
- Kudos:
- 247
- Bookmarks:
- 139
- Hits:
- 20,170
-
Bookmark Collections:
-
Tags
Summary
A companion to Repository. A comprehensive guide to coding focused solely on emulating Twitter posts for fun or for archiving Twitter fics, up to and including:
- Quote Retweets
- Embedded Images
- Twitter PollsSeries
- Language:
- English
- Words:
- 7,564
- Chapters:
- 8/8
- Collections:
- 7
- Comments:
- 95
- Kudos:
- 430
- Bookmarks:
- 599
- Hits:
- 23,970
-
Bookmark Collections:
-
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
- Language:
- English
- Words:
- 6,494
- Chapters:
- 12/?
- Collections:
- 7
- Comments:
- 112
- Kudos:
- 970
- Bookmarks:
- 1,175
- Hits:
- 51,781
-
Bookmark Collections:
-
AO3 Work Skin for In-Universe Investigative/Mission Report With Redaction by wafflelate
Fandoms: No Fandom
10 May 2020
Tags
Summary
This work provides the CSS and HTML necessary to make a fanfiction look like an investigative report or mission report, suitable for a variety of fandoms and purposes.
- Language:
- English
- Words:
- 1,545
- Chapters:
- 3/3
- Collections:
- 4
- Comments:
- 16
- Kudos:
- 248
- Bookmarks:
- 279
- Hits:
- 10,044
-
Bookmark Collections:
-
How to Mimic Letters, Fliers, and Stationery Without Using Images by La_Temperanza
Fandoms: No Fandom
27 Jul 2017
Tags
Summary
This is a tutorial/live example on how to mimic the look of letters, fliers, and stationery (as well as other forms of written media) without using images. For all your epistolary fic needs.
Series
- Part 17 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 3,724
- Chapters:
- 1/?
- Collections:
- 8
- Comments:
- 156
- Kudos:
- 2,034
- Bookmarks:
- 1,643
- Hits:
- 67,541
-
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:
- 97
- Kudos:
- 1,612
- Bookmarks:
- 1,046
- Hits:
- 70,692
-
Bookmark Collections:
-
How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile) by La_Temperanza
Fandoms: No Fandom
22 May 2017
Tags
Summary
This a tutorial/live example on how to have text change or appear once a cursor is hovering over it. Helpful for pop-up spoilers, language translations, quick author's notes, etc.
Series
- Part 15 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 999
- Chapters:
- 1/1
- Collections:
- 8
- Comments:
- 120
- Kudos:
- 876
- Bookmarks:
- 1,148
- Hits:
- 50,419
-
Bookmark Collections:
-
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
- Language:
- English
- Words:
- 729
- Chapters:
- 1/1
- Collections:
- 5
- Comments:
- 23
- Kudos:
- 530
- Bookmarks:
- 181
- Hits:
- 19,722
-
Bookmark Collections:
-
Tags
Summary
This is a tutorial/live example on how to align images to the left or right of the screen and have text wrap around them.
Series
- Part 13 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 2,891
- Chapters:
- 1/1
- Collections:
- 4
- Comments:
- 10
- Kudos:
- 183
- Bookmarks:
- 184
- Hits:
- 16,425
-
Bookmark Collections: