Ao3 HTML/Coding References-Part I

I recently made a code-heavy choose your own adventure fic, and I wanted to compile all of the really helpful resources I've found along the way. Basics, Text altering and Fancy Formatting (adding dividers, columns, photos, videos, tabs etc.) is below!

(Note: I've had to split this in two, so see Part II for all the website mimic HTML)

Basics:

This Ao3 Posting Doc converts Google doc into HTML, adding bold, underline, italics, strikethrough, paragraph breaks, and centered text. Major game changer for heavy HTML works

The Fic Writer's Guide to Formatting by AnisaAnisa: This is a masterpost in itself, covering links, images, boxes, borders, fonts etc. So I'm putting it here since it's amazingly helpful

HTML References by W3 schools- I've linked the HTML colors here, but this is a platform designed to help people learn/reference HTML

Ao3's own guide to HTML on their site Lovely Q&A for Ao3 specific HTML questions

Text resources: (altering the color, font, emoji, style etc.)

Font's chapter: The Fic Writer's Guide to Formatting: okay I know I already linked it above, but listen it's very good so I'm linking again

Fonts colors and work skins oh my by Charles_Rockafeller takes fonts to a different level.

Multicolored text skin by ElectricAlice GRADIENT TEXT

All the Emoji by CodenameCarrot while Ao3 has signifigantly improved on hosting emojis, this code helps with using some more unconventional emojis. Amazing resource.

Upsidedown text and Zalgo text generators - these specific text generators allow for you to see their direct HTML codes

Fun CSS Text Effects by DoctorDizzyspinner

Workskin for showing and hiding spoilers by ElectricAlice makes text appear when hovered/clicked. Amazing for Trigger Warnings

Make text appear when you click [Work skin] by Khashana clickable end notes buttons for your work, similar to the spoiler button text

Desktop/mobile friendly short tooltips workskin by Simbaline

How to make Linked Footnotes on Ao3 by La_Temperanza

User-selectable Names in a Fanfic work by fiend Ever want people to select between different names in a fanfic? I could also see this used as ability to switch gender in a fanfic.

AO3 Comic Text Effects using CSS by DemigodofAgni Ever want a giant comicbook POW in your fic?

How to override the Archive's Chapter Headers by C Ryan Smith

Fancy Formatting: (adding dividers, columns, photos, videos, tabs etc.)

Embedding youtube videos on ao3 to scale with the screen by pigalle add youtube videos mid fic

Conlangs and Accessibility by Addleton this fic instructs how to have accessible translations in fic

How to mimic letters, fliers and stationary without using images by La_Temperanza Really helped with box formatting

Decorations for Fic (HTML/CSS): Fanart, Dividers, Embedded Songs and More by Jnsn this has SO MANY cool coding features, including a chessboard that moves when you hover over it

How to make a News Website Article Skin on Ao3 by ElectricAlice

Newspaper/Magazine Article Template by deathbymistletoe

Newspaper Article by lordvoldemortsskin --basic but adaptive for mobile

Newspaper Article Adaptation by KorruptBrekker modification for different columns

Screenplay skin by astronought

Screenplay workskin by legonerd

How to make custom Page Dividers by La_Temperanza

How to make Images Fit on Mobile Browsers by La_Temperanza great image adding code

How to Wrap text around images by La_Temperanza image text wrapping

How to insert Gmail emails in your fic by DemigodofAgni

How to mimic Email Windows by La_Temperanza

How to make a Choose Your Own Adventure Fic by La_Temperanza allows for clickable links and hidden text.

Personal Experiment with HTML and CSS by MohnblumenKind This has a variety of help, Chapter 6 & 7 were great for choose your own adventure, Chapter 4 talks about columns and skins, and Chapter 10 even has a newspaper made entirely from site code.

Basic blogpost skin by Anonymous

Blog Post Work Skin by Anonymous

Learn to Microsoft Excel by ssc_lmth insert a spreadsheet in your fic

Ao3 Work skin: a simple scoreboard by revanchist shows how to code a scoreboard

Colossal Cave Adventure by gifbot Working Keyboard anyone?

How to make a rounded playlist by La_Temperanza Ever want to show a character's music playlist within your fic

Tabbing experiment by gifbot (clickable tabs)

Repository by gaudersan google searches, ao3 stats, instagram and text messages galore

Workskin for in Universe Investigative/Mission Report with Redaction by wafflelate case files/CSI reports

CSS in Testing/Bleed Gold by InfinitysWraith Masterclass in cool formatting, including overidding default headers, Doors opening animation, Grid interactive photos, Hovering to change a photo, Retroactive text etc.

CSS in Testing:Second in Series by InfinitysWraith: Interactive keypads, Mock news site and interactive locking mechanism.

Bonus: Ever wanted to see how crazy HTML can be on AO3? Try playing But can it run Doom? or Tropémon by gifbot

Happy Creating!

Last updated: Nov 28 2024 (Have a resource that you want to share? My inbox is open!)

See Part II for Website Mimics here!!

Skip Google for Research

As Google has worked to overtake the internet, its search algorithm has not just gotten worse. It has been designed to prioritize advertisers and popular pages often times excluding pages and content that better matches your search terms

As a writer in need of information for my stories, I find this unacceptable. As a proponent of availability of information so the populace can actually educate itself, it is unforgivable.

Below is a concise list of useful research sites compiled by Edward Clark over on Facebook. I was familiar with some, but not all of these.

⁂

Google is so powerful that it “hides” other search systems from us. We just don’t know the existence of most of them. Meanwhile, there are still a huge number of excellent searchers in the world who specialize in books, science, other smart information. Keep a list of sites you never heard of.

www.refseek.com - Academic Resource Search. More than a billion sources: encyclopedia, monographies, magazines.

www.worldcat.org - a search for the contents of 20 thousand worldwide libraries. Find out where lies the nearest rare book you need.

https://link.springer.com - access to more than 10 million scientific documents: books, articles, research protocols.

www.bioline.org.br is a library of scientific bioscience journals published in developing countries.

http://repec.org - volunteers from 102 countries have collected almost 4 million publications on economics and related science.

www.science.gov is an American state search engine on 2200+ scientific sites. More than 200 million articles are indexed.

www.pdfdrive.com is the largest website for free download of books in PDF format. Claiming over 225 million names.

www.base-search.net is one of the most powerful researches on academic studies texts. More than 100 million scientific documents, 70% of them are free

300K notes View Post

fannybunnycunny

2 months ago

idk if you’re still doing this but Pretty Boy??? Plsplspls

1/15/25 WIP Wednesday (CLOSED) | Pretty Boy

“I should…have been more clear when we talked about this earlier and agreed to talking during this. I liked all of the talk about how I felt, what you were going to do, what you wanted to do, and what you were going to do. I…don’t want you to degrade me when we’re together like that.” He watches as Neil wraps his arms around his middle as if to try and comfort himself.

Andrew feels like Neil has just said something in a completely new foreign language.

“Neil, what did I say that you took as me degrading you?” Andrew asks because he can’t think of a single degrading comment he’s made when they got started.

43 notes View Post

fannybunnycunny

4 months ago