#CodenameCarrot

[xiaokuer-schmetterling]

PODFICCER (and fic author) RESOURCE: things i learned about HTML today

-> from this reference work on ao3: A Complete Guide to 'Limited HTML' on AO3 by CodenameCarrot (please go leave a comment if you find anything here useful !!!)

EDIT: OMG Y'ALL I HAVE BEEN HAVING SO MUCH NERDY GEEKY FUN TWEAKING MY PODFIC HOW-TO GUIDE WITH THIS STUFF

headings, blockquote, div

----

-----

html currently allowed by ao3 html sanitizer

a. abbr. acronym. address. b. big. blockquote. br. caption. center. cite. code. col. colgroup. details. dd. del. dfn. div. dl. dt. em. figcaption. figure. h1. h2. h3. h4. h5. h6. hr. i. img. ins. kbd. li. ol. p. pre. q. rp. rt. ruby. s. samp. small. span. strike. strong. sub. summary. sup. table. tbody. td. tfoot. th. thead. tr. tt. u. ul. var.

-----

in-line (text) formatting tags supported by ao3

-----

OMG LOOK AT THIS !!! IDK WHEN I WOULD EVER USE THIS BUT LOOK HOW COOL !!!

-----

paragraphs & p formats: archiveofourown.org/works/5191202/chapters/161901154#AddParagraphs

-----

omg I'VE ALWAYS WONDERED HOW TO GET THAT LINE BREAK THINGY IN THE MIDDLE OF THE PAGE !!!

-----

end post

[master-of-the-game]

Commissions for the author of this wonderful fic (very fine and subtle piece, strongly recommend to read if you haven't). Pure pleasure to draw such interesting illustrations! Thank you for ordering! :)

[amphibianauthor]

Ao3 HTML/Coding Resources Part II

This is the HTML/Coding for Website mimicking resources in Archive of our Own (Ao3). To find Part I where I go over the Basics, General Text HTML and some Fancy Formatting (images, dividers, columns, photos, tabs etc. CLICK HERE!

Other Websites:

Texting

-How to make iOS Text Messages on Ao3 by CodenameCarrot, La_Temperanza

-A Quick Generator for Embeddable iOS Text Messages by 221b_ee

-imessage Skin by Adzaema

-Retro imessage by Adzaema

-Basic Text Message Work Skin by ProfessorMotz

- Bubble platform [workskin] by Khashana

-Chat Log HTML by deathbymistletoe

-LINE Messenger/Chat by imperiousmarshmellow

-IDOLish Rabbit Chat Workskin by associate

-Replika workskin by FaeriMagic

-Texting Workskin to match light/dark mode by irrationalpie

Tumblr

-Tumblr style CSS Tweaks by Aposiopesis

-Ao3 Workskin Testing and Tutorials by junietuesday25 tumblr DM

-How to make Tumblr Posts on Ao3 by phyyripo

-Plain Text Social Media Platforms by anubisms

-Tumblr Post Work Skin by tsukinosaugi

Twitter

-Repository - Twitter by gadaursan

- How to mimic Social Media in an Ao3 work by aerynevenstar

-Twitter Work Skin Template by etc e tal

-Twitter Workskin: Tweets and Profile by starskin

-Twitter Mock-Up by TheBrookesNook

Ao3/Fandom

-How to mimic Authors notes and Kudos/Comment Buttons by La_Temperanza

-How to mimic AO3 Comments by bittermoons

-How to add mobile Ao3 in your fic by DemigodofAgni

-How to make a fanfic style header Ao3 style by ElectricAlice

-Template for adding post chapter content by SpookyTesting

-CSS based full Ao3 fic integration (Header/Overview, Comments, Title, Summary & Buttons) by deciMae

-How to Mimic LiveJournal Posts and Comments by cursedcuriosities

-Dreamwidth Entries & Comments Work Skin  by folk_melody 

Facebook/Instagram/Whatsapp

-Whatsapp Group Chat builder by FestiveFerret

-How to make Facebook Messenger Chat on Ao3 by ran_a_dom

-Whatsapp Work Skin Template Revamped by etc e tal

-Whatsapp group chat skin by ovely

-Instagram DMs for Ao3 by monarch_rhapsodies

-How to make Instagram DM mockup by xslytherclawx

-Penstagram chats on ao3 by deciMae

Snapchat

-Snapchat skin by Azdaema

-Snapchat Template for Ao3 by starskin

Reddit/Forum

-UPDATED Reddit Skin by diamine

-2020 Reddit Work Skin by timstokerlovebot

-Reddit Work Skin CSS & HTML by knave_of_swords

-How to mimic Social Media in an Ao3 work by aerynevenstar

-template Reddit Skin by spookedcroon

-template:Subreddit page by ireseen

-Ao3 workskin for Forum Thread by fencesit

-Ao3 workskin for Forum Thread [Expansion Pack] by AMereDream

-How to mimic 4chan posts without just taking screenshots of 4chan

Twitch/Youtube

-Mimicking Twitch Chat for fics by Ultraviollett

-Twitch Chat Work Skin by cherrari

-Workskin testing by tohmas [Youtube comments]

-Youtube Work Skin by 1864s

-Youtube Comment Section Workskin by LupaMoe

Discord/Slack/Zoom

-2023 Discord Theme Workskin by TrojanTeapot

-Discord Work Skin by unpredictableArtist

-Discord (Dark Theme) Workskin by Heterochromia_Mars

-Skin for Recreating Discord’s Server Member List by SpookyTesting

-Ao3 Workskin Testing and Tutorials by junietuesday25

-Slack Workskin by Khashana

-Zoom inspired Ao3 skin by mystyrust

Wikipedia 

-Fake Wikipedia article about a TV show: Work Skin by Anonymous 

-Wikipedia article work skin by styletests

-SCP Wiki Style Workskin by thesnager

Working Games in Ao3 Tutorials

Logic Grid Puzzle Work Skin & Tutorial by BookKeep

The Case Of The Clickable Murdle by VThinksOn

Review Sites:

Yelp Reviews by kiwiana

Amazon Reviews by kiwiana

Rate My Professor Work Skin by BookKeep

Video Game Dialog Mimics

-Dialog [workskin] by Clover_Zero

-Dialogue Workskin (with parallax BG effect) by mystyrust

-My S Ranks--System Windows by unpredictableArtist [computer dialog workskin]

-Tutorial: Ace Attorney Work Skin by QuailFence

-Among Us Ao3 skin by mystyrust

-How to Mimic Undertale Fonts on Ao3 by La_Temperanza

-Tutorial:Rain Code Work Skin by faish

-Balder's Gate 3 Documents Work Skin by Professor_Rye

-SpookyTesting has SOO many Nintendo based ones

–Mimicking Minecraft for some fics by Ultraviollett 

Runescape Right Click Menu Formatting by fennfics

How to put Z skits in your Tales fics by wingedcatgirl

How to make Honkai: Star Rail Messages by html_hell (jihnari)

Hold-hands inspired Texting skin by cursedcuriocities(SetsuntaMew)

Simple Linkshell Ao3 Work Skin by Pent – Final Fantasy XIV mimic

Homestuck Chat Clients by 77angel-skins

Workskin: Slay the Princess by ASpooky

Slay the Princess: Updated Workskin by Lilto

Misc. Sites

--How to mimic Deadpool Thinking boxes by La_Temperanza

--FetLife Skin [Work Skin] by Khashana

--Disco Elysium workskin by SarunoHadaki

--StarTrek PADD workskin by duskyspirit

--MDZS-themed letters by allollipoppins

--A Newbie's Guide to Podficcing by Adzaema [skin for podfics]

--Skin for making Character Intro Cards by SpookyTesting

--Kpop Photocards by legonerd

–OVR System Workskin by unpredictableArtist

-How to make Stylized CSS Card Links for your fics by buttertartz

-vroom vroom kachow: Formula1 Race Results Workskin by mackerel_cheese

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: Feb 8 2025 (Have a resource that you want to share? My inbox is open!)

View Part I with HTML Basics HERE!

[holly-ilex-artworks]

Spoilers for “I want a man with a short skant and a long jacket” by CodenameCarrot on ao3!!

I found this fic courtesy of @master-of-the-game, and I could not resist creating the end scene in my own style 🥰

Links to both CodenameCarrot’s fic and @master-of-the-game’s gorgeous art below:

https://archiveofourown.org/works/60653032/chapters/154874350

https://archiveofourown.org/works/64400911

[praline-elegy]

Compiling a list of ao3 tutorials for future reference:

The Fic Writer's Guide to Formatting (An AO3 Repository) by AnisaAnisa - This is the holy grail of how to format an ao3 fic using HTML and CSS

Inline Tooltip Translation by AstariaEverlasting - Hovertext made easy! Instead of constantly jumping to the author’s notes or google translate for every foreign phrase or word, all you’ll need to do now is tap or hover over the text in question and a translated speech bubble will appear! (Requires preplanned translation)

How to Make iOS Text Messages on AO3 by CodenameCarrot and La_Temperanza - If you like chat fics or inserting a little text message for the immersion (without having to use screenshots or images!), then this is the guide for you. You can also “text” images with this tutorial.

Whatsapp Work Skin Template /Revamped by etc e tal (pe_pe_peperoncinocandy) - If WhatsApp is your preferred messaging platform, this is the workskin for you. It even includes a scrollable template, as well! (Check it out, it’s really cool!)

How to Make a "Choose Your Own Adventure" Fic by La_Temperanza - The ever elusive Choose-Your-Own-Adventure format! It is possible to create with an ao3 workskin!

2020 Reddit Work Skin by timstokerlovebot (SchmokSchmok) - If you want to include a Reddit post for some immersive fun, this work skin is calling your name!

How to Make Linked Footnotes on AO3 by La_Temperanza - Very useful when you want to share the extensive research you’ve put into your story.

[html-tryhard]

Html Tutorial Rec Wednesday

Texting, Part 1

Texting is the backbone of all group chat fics. Why not style it with pretty HTML and CSS?

Adding text messages to an AO3 work is very easy, thanks to this simple tutorial by CodenameCarrot and La_Temperanza! (While you're at it, check out La_Temperanza's ao3 work skin tutorial series on AO3.)

"But coding is hard! I see all those <span> things and I get scared!"

What if I told you that there's a code free generator that writes the HTML and CSS for you, to embed into your fics on AO3?

"But how is that any different from using doctored images?" You say? "If I'm not coding it myself and I'm using an online website to make it for me, why not use an image?"

Let me hold you tenderly and tell you why.

Accessibility.

Specifically:

Screen Readers.

Google Translate.

And a secret 3rd option, which is learning how to code if you never did, I guess?

Remember ye olde days of customizing the HTML and CSS of your Tumblr blogs, circa 2014? The cool new place to do that is now your AO3 fics :)))

Have fun writing your wrong number AUs and group chat fics!

[tortoisebore]

editing has just about come to an end 💔 it’s an especially bittersweet feeling

but very fun news, i dusted off my coding skills and added a work skin that makes all the texts in the fic look like actual texts 🫢 i still have to write the code for one more chapter that features texting & omg it’s so much work for the very little amount of texting in this fic but it reads so much better and looks so nice!!!

template courtesy of CodenameCarrot and La_Temperanza on ao3, they are geniuses and scholars and we owe them so much 🧎‍♀️

[ao3feed-ds9]

I Want a Man With a Short Skant and a Long Jacket (A Post-Canon Cardassia Fic)

https://ift.tt/TBCx05g by CodenameCarrot Doctor Julian Subatoi Bashir, Lieutenant, shouldn’t have been in charge of the Federation Relief Effort. But here he was: briefing volunteers, dispensing energy credits, arranging marriages, and trying to meet up with Garak for a literary flirtation over a private meal. (There was no such thing as a private meal with the Castellan but Julian was getting used to the security drones and the paparazzi.) He had everything under control - for most definitions of control - when Admiral Jellico arrived to relieve him. And while Jellico’s leadership style might not be a great fit for the relief effort, it was 100% what Julian needed to leverage in an over-the-top bid to get his lizard. Or: the the one where... Julian accidentally encouraged a generation to take up recreational swimming, forced a planet-wide revision of the public decency laws, and then made it up to Garak by recreating the most famous scene from the Cardassian Union’s most pirated porn as a public declaration of love. Complete. Posts Mondays. Words: 3912, Chapters: 1/3, Language: English Fandoms: Star Trek: Deep Space Nine Rating: Teen And Up Audiences Warnings: No Archive Warnings Apply Categories: M/M Characters: Julian Bashir, Elim Garak, Edward Jellico, Kelas Parmak, Supernumeraries, Cardassian Characters (Star Trek), Starfleet Characters (Star Trek), Vulcan Characters (Star Trek) Relationships: Julian Bashir/Elim Garak Additional Tags: POV Julian Bashir, Julian Bashir and Elim Garak's Book Club, Castellan Elim Garak, Julian "Word Vomit" Bashir, Cardassian Courtship, Cardassian Flirting, Post Canon Cardassia, Skant, Hilarity Ensues, Comedy, Farce, no beta we die like red shirts, Based loosely off Footloose, (just for the one scene)

[disasterbuck]

not sure if this has been asked before, but how do you do the text messages formatting? I'm new to ao3 writing and have no idea what I'm doing when it comes to coding 😅

Hiii friend!

When it comes to the text fics that @veronae-buddie and I write, I tend to leave all the coding to Veronae! But I am aware of this very handy tutorial on ao3 for it as well, so if I were you I'd bookmark this and refer back to it whenever necessary! I'm pretty sure it has everything you'll need to know!

[the960writers]

Guides and tricks for formatting on AO3, for instance text messages or lined paper.

[t1meslayer]

hey! i’ve been reading a handful of ur fanfics (which r rlly gud btw!) and i was wondering how you were able to resize and edit the text like this

and also like this

i’d be rlly interested to know because i’m unsure if it’s even possible through normal means on ao3!

Hey hey! I'm very glad you're enjoying my work <3

Thanks so much for taking the time to give me a read!!!

The text editing stuff is actually a basic function on AO3, you can do it too! When you're looking at the text editing/posting page, you'll see at the top that you can utilize "plain text with limited HTML"

Clicking the question mark icon there shows you all of the HTML functions that are available, with a basic explanation for how to apply them in your text:

The TL;DR is when you've picked one you want, you can start that section of text with the HTML signifier in diamond brackets <like this>, and then end that section with diamond brackets using a forward slash </like this>

(Be sure to include the ending set of brackets otherwise you'll accidentally make the entire rest of your story in italics or somethin - not speaking from experience I swear)

However, I found a "story" posted in 2015 that was particularly helpful with visualizing the major elements. It's called "A Complete Guide to 'Limited HTML' on AO3" by CodenameCarrot. In particular, this highlighted stuff like being able to do sub- and superscript text using <sub> and <sup> that I used (I think) to great effect in my Pokemon Scarvi piece "Paradiso" - where a lot of my experimentation happened under the guise of nightmare bs.

The way I made text look almost like the "Chat" option here on Tumblr was through "Special Types of Text."

They all produce the same result when published on AO3, but I personally use <tt>.

I've also been messing with image embedding like the text message thread in "Peaks and Caverns" and my Author's Notes in "Stone-Cold Lovers (ch. 3)," there should be more of that coming in pieces that I'm writing now! I learned a good practice for how to do so from the 2014 piece "Super Awesome Learning How to Embed Place" by leftennant.

Tbh I've been a bit surprised at how many people have asked me about this text editing stuff in my comments, because it's one of the first things I noticed is available compared to, say, fanfiction.net. I like that you can use the basic tools of the service to tailor your stores to a vision in even small ways, so I've even been testing things like pseudo-graphic design like recreating RIAA record plaques using just HTML features on my Splatoon fic "By Moonlight":

Hopefully these explainer pieces can help you out with it too!! They're the only things I currently have bookmarked on my AO3 'cause I refer back to them so often.

[alexseanchai]

@snowflakechallenge 3:

Create a wish list of fandom things (podfic, graphics, playlists, canon recs translations, research help, vids, sky's the limit!) that you'd like to receive. Post your answer to today’s challenge in your own space and leave a comment in this Snowflake Challenge Dreamwidth post saying you did it. Include a link to your post if you feel comfortable doing so.

I'm mostly blanking on things I want that aren't on my fandomtrees wishlist (which has Emelan, Encanto, Miraculous Ladybug, and Yuri on Ice prompts) or holiday_wishes wishlist (though the only fannish bits there that aren't on the fandomtrees list are in the spending-money section).

But! The first chapter of starting right now I'll be strong and all chapters of Jeu des princesses avec les pommes d'or de la discorde, inscribed 'to the fairest', both canon-divergent Yuri on Ice fics, are told entirely through stuff the characters said on the internet. Notably on Instagram. Thing is I do not have either the art skills or the art commission money to illustrate most of those Instagram posts. So if I can't glue the Insta post together using canon screenshots, Wikimedia Commons, and Unsplash, then the Insta post has to stay text-only. (You can see in the second chapter of Jeu des princesses how well that's going. I do have two and a half of the images for the first chapter of starting right now—the first one, the Minami one, and the top half of the one where the bottom half is Yuuri stole Phichit's Pikachu hat—but comparing those two chapters may illustrate why I haven't added those images yet.)

So in addition to what's listed on fandomtrees—and I'm joining the chorus of Snowflake participants who want people to look over all those wishlists, or at least the ones with fewer than two gifts, and fill what you can—I am asking for fanart that's the image part of one or another of the Insta posts in one of those two fics.

And! fandomtrees doesn't do Creator's Choice of Fandom, which is valid, but does mean I had to leave this prompt off that list:

* exploration via historical documents, primary and secondary sources, etc., of canon characters/events and their effects on the local, regional, and global courses of history. this could be set a couple hundred years after canon and thus explore canon from a historian's perspective (social media posts could be both primary and secondary sources here, depending), or it could be set around, during, or before canon and explore characters who have been name-checked at most.

Also, the how to use CSS to make iOS messages look realistic guide by CodenameCarrot and La_Temperanza makes it seem like there should be a way to use background-image in the CSS from the how to use CSS to make vintage-2016 Instagram posts look realistic guide by gadaursan (with instIcon1 instIcon2 instIcon3 instead of instIcon, as well as instIconRight instHeart) so that those five little icons don't display when creator style is off. But so far all I seem to be achieving is making them not display when creator style is on, either. Send help?

[drmellking]

OMG APRIL! I am obsessed with the formatting for your "emails i can't send" fic! Such a cool concept and I can't imagine how long it would have taken you to set it all up 🤩

MEEGS!!!!!! u are so lovely and sweet, thank you 🥺 i'm so glad u enjoyed it!!! the formatting is actually pretty easy to do!!! i used a tutorial for the skin and just copy pasted the code basically ksjsksjdj

i'll leave the series i bookmarked bc its so helpful and easy to follow and i think its just fun to add these little silly things to fics ksbsjshhd u can add texts, emails, playlists, post it notes, everything!!!

[badgod01]

List of work skins I've used in fics

Just in case if anyone wants to use some of the same work skins I use in fics! Info under the cut.

Inline tooltip (AstariaEverlasting): I use this for Pest's dialogue whenever he speaks Japanese; you're able to tap on (mobile) or hover over (desktop) the text to see what he says.

SMS text messages (CodenameCarrot, La_Temperanza): SMS/iOS text messaging. I haven't used it in a fic but I have teased it in WIPs, so I'm getting ahead of the curve.

Snapchat Skin (Azdaema Codes): What it says on the tin. Also haven't used in a fic but have teased it in WIPs.

[megamindfandombookclub]

A Complete Guide to 'Limited HTML' on AO3 CodenameCarrot

[avengersnewb]

I tweaked festiveferret's AMAZING texting work skin html maker to make a dating app version that looks a lot like Grindr:

Here's the spreadsheet link: https://docs.google.com/spreadsheets/d/1IpCpw4ZEoJqXHtOUvw1G8zk9h9M0pVFqIF8nLTojxRk/edit#gid=461656288

Again all the hard work is done by ferret based on the helpful work skin guide done by CodenameCarrot and La_Temperanza’s (that's linked in the spreadsheet)

Please let me know if there is an issue with this spreadsheet, or if you used it and it worked! show me all your texting fics I LOVE THEM!

p.s. I tried to mention ferret but tumblr doesn't want me to bother her at this busy time. love you ferret, thank you for all you do for fandom!