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!!

RESOURCES FOR POSES

Line of Action

JustSketch.Me

PoseManiacs

Human-Anatomy-For-Artist.com

MagicPoser

MIXAMO

Pose Archives

Bodies in Motion

Posemy.art

ReferenceAngle

CroquisCafe

29K notes View Post

cainyxs

6 months ago

Writing advice from my uni teachers:

If your dialog feels flat, rewrite the scene pretending the characters cannot at any cost say exactly what they mean. No one says “I’m mad” but they can say it in 100 other ways.

Wrote a chapter but you dislike it? Rewrite it again from memory. That way you’re only remembering the main parts and can fill in extra details. My teacher who was a playwright literally writes every single script twice because of this.

Don’t overuse metaphors, or they lose their potency. Limit yourself.

Before you write your novel, write a page of anything from your characters POV so you can get their voice right. Do this for every main character introduced.

231K notes View Post

cainyxs

5 months ago

crazy how fanfic authors drop the most beautiful and gorgeous pieces of work ever, leaving you speechless and sobbing at three in the morning as you quietly contemplate the masterpiece you just read

and they don’t get paid for it they just do it because they’re having fun and they want to share their joy with you

like I would literally die for all of you fanfic authors out there reblog to swear your allegiance to fanfic authors

58K notes View Post

cainyxs

4 months ago

(My eyes are a pale green-grey, but they don't have that on this one — they have yellow, instead — so I just used grey. This is also the closest shade they had to my chestnut hair color, though it isn't really close. Eh, I tried my best.)

Picrew train!!

Do this picrew : and tag people!!

Picrew

tunasalad character maker

!! personal / non-commercial use only !! ✅ profile pictures, icons, social media ❌ branding / business, advertising, promotion !! do not

(not my picrew credit to artist!!)

@megaroniandcheez @fish-nailed-to-a-cross @justobsessedwithvic @cheesesandwjch @milltheinfinity @illiteratesblog @le-dormeur-du-val @that-one-xachster @hermy-97 @ladyloss-blog and anyone else who wants to join!

676 notes View Post

cainyxs

6 months ago

now 2 beanie baby dragons are crossing your dash together :3

83K notes View Post

cainyxs

5 months ago

Rules: go to Pinterest, search “[your name] core aesthetic” and create a moodboard from the first nine images. no need to mention your name!

I really like the ones I've gotten! They represent my name really well! This is a really cool exercise!

(I hope I'm tagging right, I haven't been on Tumblr for 14 years! 😅)

Wanna try this out? @scrapimmortal @sdeek @crystalsamethyst @artingstarvist

Tags

writeblr aesthetic pinterest mood board aesthetic moodboard name core your name core pinterest mood board aesthetic Pinterest

0 notes View Post

cainyxs

4 months ago

31K notes View Post

cainyxs

4 months ago

over-psychoanalyzing blorbos is healthy and needed enrichment for the girlies in order to avoid over-psychoanalyzing themselves. like giving a dog a chew toy in order to redirect chewing on its hind legs

62K notes View Post

cainyxs

4 months ago