tech tips
This tag belongs to the Unsorted Tag Category.
This tag has not been marked common and can't be filtered on (yet).
Bookmarks which have used it as a tag:
-
Tags
Summary
Some exercises in CSS that may or may not be used in actual fic later.
Bookmarked by TipToe_Tanpopo
08 May 2025
Bookmarker's Tags:
Bookmarker's Notes
CSS Practice by chronondecay
CSS demonstrations include working clock(s), google/twitter interface, and a text choose your own adventure.
-
Tags
Summary
A work skin tutorial of a Google Search Suggestions page in AO3.
See Chapter 1 for examples of the work skin with 4 different suggestions types (auto-complete suggestions, recent history, related to recent searches and trending searches), Chapter 2 for an explanation of the CSS work skin, Chapter 3 for the complete CSS code of the work skin, Chapter 4 for explanations of the HTML code and Chapter 5 for the complete HTML code (all 4 types of suggestions).
- Language:
- English
- Words:
- 2,667
- Chapters:
- 5/5
- Collections:
- 2
- Comments:
- 13
- Kudos:
- 109
- Bookmarks:
- 97
- Hits:
- 1,968
Bookmarked by TipToe_Tanpopo
08 May 2025
Bookmarker's Tags:
Bookmarker's Notes
Google Search Suggestions Work Skin & Tutorial by BookKeep
Detailed demonstration of how to mimic Google Search suggestions
-
Tags
Summary
A small experiment inspired by jedijae's The Once and Future Queen. What would the news be like after the murder in the first chapter?
Bookmarked by TipToe_Tanpopo
08 May 2025
Bookmarker's Tags:
Bookmarker's Notes
ARB News by OneEightActual
CSS example of online news formatting
-
Tags
Summary
This is not a story but a testing ground for CSS formatting experiments.
Bookmarked by TipToe_Tanpopo
08 May 2025
Bookmarker's Tags:
Bookmarker's Notes
CSS Experiments by justasnake
Truly evil formatting that tricks user into pattern of behavior that fails when expectations aren't met. Brilliant trolling technique.
-
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:
- 88
- Kudos:
- 375
- Bookmarks:
- 524
- Hits:
- 20,043
Bookmarked by TipToe_Tanpopo
09 May 2025
Bookmarker's Tags:
Bookmarker's Notes
Repository: Twitter by gadaursan
Detailed demonstration of how to mimic Twitter, twipolls, twitreplies.
-
Tags
Summary
A short tutorial for creating ruby text (furigana) in AO3, using CSS and HTML.
- Language:
- English
- Words:
- 366
- Chapters:
- 2/2
- Collections:
- 1
- Comments:
- 8
- Kudos:
- 35
- Bookmarks:
- 26
- Hits:
- 2,121
Bookmarked by TipToe_Tanpopo
09 May 2025
Bookmarker's Tags:
Bookmarker's Notes
Ruby Text by Elsepth
Furigana formatting
-
Tags
Summary
A tutorial for creating and formatting spreadsheets in AO3, using CSS and HTML.
Bookmarked by TipToe_Tanpopo
09 May 2025
Bookmarker's Tags:
Bookmarker's Notes
Learn to (Microsoft) Excel by ssc_lmth
How to replicate appearance of Excel
-
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)- Language:
- English
- Words:
- 14,968
- Chapters:
- 20/?
- Collections:
- 7
- Comments:
- 166
- Kudos:
- 775
- Bookmarks:
- 754
- Hits:
- 30,791
Bookmarked by TipToe_Tanpopo
09 May 2025
Bookmarker's Tags:
Bookmarker's Notes
P̶e̶r̶s̶o̶n̶a̶l̶ Experiment with HTML and CSS
Strikethrough in fic title link, CSS changing appearance of author name from MohnblumenKind to unclickable Poppy Red, colored text animations via gifs.
-
Targeting specific AO3 work sections (not site) with CSS effects by Charles_Rockafellor, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: css - Fandom, AO3
26 Jan 2025
Tags
Summary
Want to apply CSS effects (e.g.: some background color, image, or .gif) to entire sections automatically from your work skin (without having to waste precious character count within said sections)?
Wish you could adjust the font, color, highlight, alignment, etc. of the section headers themselves? Perhaps even extend the work beyond the boundaries, covering that wasted space to the sides, and even the site page header and footer regions?
No clue where to even start? Tired of trying to find which part of the work is which from peeking at other works' work skin rules, or mucking about with trial and error?
🤣 Don't Panic. 😉
Here you'll find how to aim your work skin rules at any section of your work (or combination thereof) that you want — and yes, even how to expand those effects to outside of the work area ! (Even... comments )
I read, appreciate, and reply to all of your comments — they're always welcome! ❤️
Series
- Part 8 of How to
- Language:
- English
- Words:
- 20,838
- Chapters:
- 1/1
- Collections:
- 7
- Comments:
- 89
- Kudos:
- 77
- Bookmarks:
- 27
- Hits:
- 2,523
Bookmarked by TipToe_Tanpopo
09 May 2025
Bookmarker's Tags:
Bookmarker's Notes
Targeting specific AO3 work sections (not site) with CSS effects by Charles_Rockafellor
Detailed how to format with varied examples and instructions.
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom Deadpool (Comics), Deadpool - All Media Types, No Fandom, Star Trek, Star Trek: Starfleet Academy (TV 2026), Undertale (Video Game)
07 Feb 2026
- Words:
- 93,652
- Works:
- 21
- Bookmarks:
- 4,502
Bookmarked by TipToe_Tanpopo
09 May 2025
Bookmarker's Tags:
Bookmarker's Notes
AO3 Skins/Tutorials by CodenameCarrot, La_Temperanza
Includes details on messaging designs and emoji reference.
-
Decorations for Fic (HTML/CSS): Fan Art, Dividers, Embedded Songs, and More by Jnsn
Fandoms: No Fandom, Archive of Our Own
24 Jul 2021
Tags
Summary
NON-FICTION. This work shows some examples of use of HTML/CSS to decorate a fic with art and other things. The second chapter provides the HTML for each example.
- Language:
- English
- Words:
- 3,825
- Chapters:
- 3/3
- Collections:
- 2
- Comments:
- 8
- Kudos:
- 235
- Bookmarks:
- 188
- Hits:
- 5,793
Bookmarked by TipToe_Tanpopo
09 May 2025
Bookmarker's Tags:
Bookmarker's Notes
Decorations for Fic (HTML/CSS): Fan Art, Dividers, Embedded Songs, and More by Jnsn
Amazing chessboard animation demo.
-
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:
- 232
- Bookmarks:
- 246
- Hits:
- 8,396
Bookmarked by TipToe_Tanpopo
09 May 2025
Bookmarker's Tags:
Bookmarker's Notes
AO3 Work Skin for In-Universe Investigative/Mission Report With Redaction
by wafflelate -
Tags
Summary
This is a tutorial/live example on how to create a "Choose Your Own Adventure" fic. While this has been explained before (see here), this particular tutorial shows you how to use a work skin to hide the next parts from the reader until they click through to get to them.
Series
- Part 16 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 1,769
- Chapters:
- 1/1
- Collections:
- 7
- Comments:
- 77
- Kudos:
- 1,190
- Bookmarks:
- 1,051
- Hits:
- 52,020
Bookmarked by TipToe_Tanpopo
09 May 2025
Bookmarker's Tags:
Bookmarker's Notes
How to Make a "Choose Your Own Adventure" Fic
by La_TemperanzaTutorial on in-fic CYOA.
-
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
Bookmarked by TipToe_Tanpopo
09 May 2025
Bookmarker's Tags:
Bookmarker's Notes
CSS in Testing
by InfinitysWraithFantastic exploration of hover-animation effects in CSS, CSS art, animated door and envelope etc.
-
Tags
Summary
As of April 2016, The database that stores works on A03 does not allow emoji. If you try to add an emoji it will end your story there. Any words after the emoji? Poof. Gone. This is a known, if poorly advertised, issue with the archive.
There are some workarounds; you can find them in: How to Make iOS Text messages on A03. But here? Here is for ALL THE EMOJI*.
10 chapters of emoji tables, each with the HTML for putting the emoji into your work and the CSS for putting it into your workskin. Copy-Paste baby. Copy-Paste.
*Does not contain the 2016 Unicode release. You'll have to come up with the code for pickle yourselves.
(Note, because this is 10 chapters of emoji tables, here is a link to the Index Tables (chapter 1) to speed up load times and reduce confusion if you have preferences set to "entire work.")
Series
- Part 11 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 33,325
- Chapters:
- 11/11
- Collections:
- 4
- Comments:
- 54
- Kudos:
- 339
- Bookmarks:
- 378
- Hits:
- 26,295
Bookmarked by TipToe_Tanpopo
09 May 2025
Bookmarker's Tags:
Bookmarker's Notes
All the Emoji
by CodenameCarrot -
Tags
Bookmarked by TipToe_Tanpopo
10 May 2025
Bookmarker's Tags:
Bookmarker's Notes
Tabbing experiment
by gifbotclickable tabbed text boxes.
-
Tags
Summary
Want to code in ao3?
Heres how!
This work will teach you how to code on ao3 from simple to more advanced techniques.
Some code featured in this work is credited to their respected authors, so be sure to check them out as well!
Series
- Part 1 of Ao3 C̵̬̳͕̲̪̖̉̎̂͌̿̊̈́̅o̶̬̳͇͙̤̎̄͗̈́̓̃̔̚͜͝d̷̙̹̖̳̪̞̬̗̔͐́̏̕i̶̧͈̱̣̝̍ͅn̸̛͉̤̙̭̂̾̏̏̑̈́̀̎̅̅͂g̸̢͉͈̦͍͎̮͎̭̮̉̌́̇̄̓͜ͅͅ
- Language:
- English
- Words:
- 41,554
- Chapters:
- 20/?
- Collections:
- 2
- Comments:
- 92
- Kudos:
- 234
- Bookmarks:
- 365
- Hits:
- 11,919
Bookmarked by TipToe_Tanpopo
10 May 2025
Bookmarker's Tags:
Bookmarker's Notes
Coding Encyclopedia by Anonymous
Contains massive list of links to other works to reference and read.