14 Bookmarked Items in CSS and HTML
List of Bookmarks
-
Tags
Summary
Example and instructions on how to mimic AO3 comments in a fic.
- Language:
- English
- Words:
- 530
- Chapters:
- 1/1
- Collections:
- 1
- Comments:
- 7
- Kudos:
- 37
- Bookmarks:
- 27
- Hits:
- 1,761
-
Bookmark Tags:
Bookmark Collections:
-
How to Override the Archive's Automated Chapter Headers by C Ryan Smith (AiedailEclipsed)
Fandoms: No Fandom
25 Nov 2018
Tags
Summary
This is a tutorial/live example on how to override the Archive's automated chapter heading system and define your own (eg remove "Chapter 1: Chapter Title" and insert "Act 1, Verse 1" instead).
- Language:
- English
- Words:
- 997
- Chapters:
- 2/2
- Collections:
- 4
- Comments:
- 43
- Kudos:
- 253
- Bookmarks:
- 289
- Hits:
- 10,760
-
Bookmark Tags:
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:
- 116
- Kudos:
- 851
- Bookmarks:
- 1,112
- Hits:
- 48,264
-
Bookmark Tags:
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,539
- Chapters:
- 8/8
- Collections:
- 7
- Comments:
- 93
- Kudos:
- 419
- Bookmarks:
- 576
- Hits:
- 23,006
-
Bookmark Tags:
Bookmark Collections:
-
Tags
Summary
A Reddit template for use on AO3.
- Language:
- English
- Words:
- 2,841
- Chapters:
- 4/4
- Collections:
- 2
- Comments:
- 50
- Kudos:
- 386
- Bookmarks:
- 318
- Hits:
- 15,620
-
Bookmark Tags:
Bookmark Collections:
-
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.
- Language:
- English
- Words:
- 7,929
- Chapters:
- 4/4
- Collections:
- 3
- Comments:
- 52
- Kudos:
- 255
- Bookmarks:
- 236
- Hits:
- 7,640
-
Bookmark Tags:
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:
- 30
- Kudos:
- 157
- Bookmarks:
- 141
- Hits:
- 6,879
-
Bookmark Tags:
Bookmark Collections:
-
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:
- 76
- Kudos:
- 568
- Bookmarks:
- 610
- Hits:
- 24,993
-
Bookmark Tags:
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 Tags:
Bookmark Collections:
-
Tags
-
Bookmark Tags:
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:
- 511
- Bookmarks:
- 169
- Hits:
- 18,825
-
Bookmark Tags:
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:
- 238
- Bookmarks:
- 190
- Hits:
- 18,794
-
Bookmark Tags:
Bookmark Collections:
-
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,708
- Bookmarks:
- 4,580
- Hits:
- 206,626
-
Bookmark Tags:
Bookmark Collections:
-
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
- Language:
- English
- Words:
- 835
- Chapters:
- 1/1
- Collections:
- 5
- Comments:
- 13
- Kudos:
- 318
- Bookmarks:
- 412
- Hits:
- 22,259
-
Bookmark Tags:
Bookmark Collections: