#ios text messages in ao3

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

[muldxr]

hold my things while i go under

A "Left Unsaid" prompt fill for @flashfictionfridayofficial

Heather Collins & Michael 'Robby' Robinavitch [The Pitt], 500 words, dialogue-only, phone calls, comfort, post-ep 9:00 P.M.

It's 11:00 p.m. He's home, showered and changed, let himself settle into the heaviness of the day. But there's something else he wants to do. Robby calls the first number he can think of.

read it under the cut, or here on ao3

"Hi. It's...it's me. I'm...I don't know why the fuck I'm calling you, Heather, but—"

"Michael? Oh my God—"

"Oh. Hi. I-I thought I was leaving a message, I didn't realize you'd picked up."

"No, I turned my phone on, um, maybe an hour ago?"

"...I woke you up."

"No—"

"This can wait until tomorrow—"

"No, I'm lying on the couch with some curry leftovers and I'm watching a rerun of Law and Order. Talking to you sure beats watching Briscoe and Green interrogate this other guy."

"Fun. What channel is that, again? Maybe I'll watch with you."

"Eleven."

"Eleven...Okay, there we go. Oh, I've seen this one before."

"Well, don't go ruining the ending for me, Mister Talks-Through-The-Whole-Thing."

"Hey! That's Doctor Mister...whatever you just said."

"You're right. My apologies."

"It's not a very good ending. You might be better off knowing how it ends."

"No, don't. You tell it all wrong."

"You sure?"

"Robby."

"Okay."

"Hey."

"Hm?"

"When I turned my phone back on, I had thirty unread texts and fifteen messages from you and Dana and that other nurse on the day shift. I didn't realize... I tried calling back to the desk to see if you still needed me after the initial rush, but nobody picked up. I figured... I don't know. Shit, I feel bad. Is everything okay?"

"Yeah. Yeah, no, don't worry about that. Everything's okay, we're off shift, w-we got through it."

"How many?"

"Around a hundred victims, six deaths."

"Fuck. You guys got slammed. Isn't that the worst mass casualty in Pittsburgh in...well, ever?"

"Yeah. We were lucky to save as many people as we did. The new students, the way they ran through triage...Heath, you should've seen 'em."

"I'll make sure to ask about everything when we get back, all their heroic saves..."

"And their idiotic ones. A resident used an EZ-IO to drill into someone's head."

"What?!"

"Don't ask me why. I was...preoccupied."

"Well, all that aside, they were lucky to have you. Them, and the patients."

"..."

"You still there?"

"Yeah. Just got in my head. It was hard. I could've used you with me, but I don't know if I'd feel better having you here. I was the schmuck who told you to go home, disconnect from the world for a while, and...ha, I really couldn't have predicted this. Um, I didn't ask yet. Are you feeling better?"

"A little, yeah. Thanks."

"I know that it must've been..."

"I could say the same for you, you know."

"Hm?" 

"That we couldn't have predicted this on the same day that...Never mind. I'm just glad you called."

"Me too. Oh, we're onto the good part now, watch this. There's a car chase coming up."

"What did I say about spoilers?"

"Right...Hey, Heather? Can you... would you mind staying on the line a little longer? I can hear your breathing through the speaker and it's kind of nice. Drowns out everything else."

"Of course."

[pkg4mumtown]

Special Weapons and Tactics (Ch. 2)

Pairing: Aaron Hotchner x Original Male Character (OMC)

Rating: Teen (for now)

Summary: Checking up on the agent you carried out of a hostile situation is innocent, right? Right?? León sure thought so.

Content Warnings: strong language, first person POV, canon-typical violence, mostly fluff

A/N: (As of March 8, 2025, this fic has been transitioned to Hotch/ OMC as I realized I put too much detail in later chapters to still make it a feasible Reader fic. Thank you to everyone, so far. I hope you'll continue to read but totally understand if you don't!) Hiiiiii! Thank you to everyone who enjoyed the first chapter, here is the second! I’m embedding the Spotify playlist I made for the fic, but due to the lack of dividers for you all to know what chapters I placed them in, I’ll let you know here. Feel free to listen to the whole playlist if you want, just know I’m still making continuous changes to it.

Chapter 1: The Man, Mad Sounds, Want You Bad, Take A Chance on Me

Chapter 2: If I Wanted Someone, Neon Moon, Lovers Eyes, Want Want

Also available on AO3 - I do use a workskin on AO3 for text messaging, so I uploaded screenshots of the texts here. I know this isn’t what iOS looked like in 2010 but I didnt feel like learning a new workskin lol.

July 2010

I could practically feel his eyeroll through the phone.

Before I could ask for his order, he started typing again.

It felt stupid to send considering his team would probably bend over backwards for him, but I sent it anyway. He should know someone else was thinking about him, right?

—

Beyond the occasional checkup text on how he’d been feeling—I couldn’t help it—he was still on track to get back to work Wednesday morning. It was actually quite convenient for me as I had a medic course to teach at the academy that day.

Keeping a straight face around my team was nearly impossible as his daily updates came in, some of them even unprompted. That part was surprising given that at work, his demeanor seemingly left a lot to be desired.

When Wednesday morning arrived, I got up extra early to stop at a decent coffee place on the way into Quantico instead of whatever sludge passed for coffee and littered every corner of FBI Headquarters. Don’t get me wrong, I was plenty used to dirty water that shouldn’t have the honor of being called ‘coffee’ from my time in the Navy; but when I had the opportunity, I treated myself to good coffee.

The drive was maybe half an hour longer than I would have had going into the DC field office, so I had plenty of time to sweat over seeing Hotch after our brief texting over the last seven days. After stopping for our morning beverages closer to Quantico so his coffee wouldn’t be cold, I made my way into Headquarters armed with the carrier holding our two drinks, a box of coffee for the team, some random assorted pastries to win their hearts over, and my training materials (which were super important, of course).

The elevator dinged on what I hoped was the correct floor for the BAU. Stepping out, I spotted the team immediately and headed over to their group of desks in the bullpen.

“Good morning, I come bearing gifts,” I announced in front of their desks.

Prentiss and Reid had noticed my presence as I walked in, and they peered over their dividers until they were basically standing as I approached. At the sound of my voice, Morgan’s head perked up and he rushed over to greet me.

“What's all this?” He smiled, gesturing to my full arms.

“This is for you all,” I gently handed the box of pastries with the coffee box balancing precariously on top to Morgan. JJ and Emily looked surprised, and I watched their eyes flick back and forth at each other in some unspoken language.

“What’s the occasion?” Derek laughed after setting the boxes down on one of their desks.

“Just didn’t want to come here empty handed for y’all,” I shrugged. He reached for the carrier in my hand, but I swatted his hand away and moved the drink carrier out of reach. “This is for your boss, and speaking of him where can I find him?”

Reid, who hadn’t said a word the entire time, gestured behind me with his chin. He was definitely familiar, and I knew him from somewhere. Judging by the look in his eye, I wasn’t wrong. Reid gave me a knowing smile and it finally hit me that he frequented one of the same local bars that I do, making me instantly nervous given the potential for volatility in a government workplace. Hell, most of my SWAT teammates didn’t even know I was gay because of that overly macho and straight culture on the team. The only one here I was actually out to was Morgan, though by now, I was sure the room of profilers had figured it out. It was inevitable that Reid had seen me flirt with men at said bar but, by his nod and comforting smile, I was reassured that I was safe and in good company.

I turned and looked over my shoulder to where Reid had gestured and saw Hotch skimming through a file behind the window of his office.

Turning back to them, I raised the drink carrier, “Thanks.”

I spun on my heel and made my way up the stairs to his office.

“Well, that was weird,” Emily spoke up as soon as I was out of earshot. When no one replied, she turned around to face the team, “That was weird, right?”

“Nah, just checking up on Hotch, I’m sure. He’s a good dude like that,” Derek shrugged.

“I mean I’m not complaining. That polo was doing wonders for his arms,” she absentmindedly fanned herself with a file to exaggerate her point.

“You should ask him for his number and get his workout routine,” JJ teased.

“Please, Sergio is the only man I need in my life,” Emily laughed, causing the two of them to veer off in a separate conversation.

“You're being awfully quiet, pretty boy,” Morgan murmured suspiciously to Reid as Emily and JJ kept chatting.

“Am I?” the genius jokingly feigned ignorance.

Derek fixed a pointed glare at him, “What aren’t you telling me?”

“We frequent the same bar,” Reid clarified. “Obviously, I recognized him, but I didn’t think he would recognize me, too.”

Derek’s eyebrows had never flown faster up his face, “Have you fu—”

“—No! No, no, no,” Reid cuts him off hurriedly, glancing at the girls who were still talking amongst themselves. “I’m not his type,” Reid answered matter-of-factly with a smirk and directed Morgan's attention to Hotch's office with his eyes.

“Oh, I’m giving him hell over this,” Morgan shook his head and walked back to his desk.

“Over what?” Emily asked as her conversation with JJ ended.

“It seems like he has the number he’s looking for,” Reid answered cryptically and flicked open the box of pastries to hide the smile threatening his features.

—

I took my time on the stairs to gather my wits and my nerves, feeling absolutely ridiculous considering my profession. I knocked on his door frame with my free hand, seeing a pinched frown on his face as he quickly looked up. The tension in his forehead eased upon being greeted with my shy smile and I watched his brain fight his lips as they twitched upward.

After a beat of silence, Hotch snapped out of it and gestured me in, his voice softer than his face indicated, “Navarro. Sorry, come in. Please, sit.”

“Black, two sugars,” I recited while setting the carrier down on his desk. I gently rotated the cup out and placed it in front of him. “And Leon is fine,” I smiled.

Despite most people pronouncing my name as Leon instead of León, intentionally pronouncing it wrong myself still left a bad taste in my mouth after all thirty-five of my years. It was easier to understand the mispronunciations of Navarro, that one even I caught myself slipping to a hard “R” rather than the rolling “r” it was supposed to have. But, it was easier than listening to people struggle and apologize.

Hotch’s lips finally won the battle, turning into a deep, closed-mouth smile before repeating, “Leon.”

As quickly as it came, his smile disappeared again as he turned to look out of his window at the team. They feigned “work” well, but Hotch wasn’t convinced and stood up to lower his blinds.

“Subtle,” I nearly snorted.

“They’re nosy,” he sighed and sat back down.

“How are you feeling?” I shrugged my bag off my shoulder and plopped it on the floor before taking a seat across from him. I twisted my own cup out of the holder and brought the straw to my lips with a satisfied hum. Yes, iced coffee, sue me. I ran hot and didn’t need to be drenched in sweat so early in the morning.

I hadn’t realized I closed my eyes with that sip until I was blinking them open to see Hotch’s calculating eyes scanning me. I tilted my head questioningly.

“Much better. I think the withdrawal headache made it worse,” he lifted the coffee cup up and sipped his. As he pulled it away from his face, he examined the label, “Where’d you get this?”

“Just some place in town I found on the way in. I brought pastries but I think they’ve started decimating them out there,” I laughed, imagining Morgan working with one hanging from his lips.

“That’s kind of you.”

“Felt rude not to,” I shrugged. “I’m glad you’re feeling better though, it didn’t seem like you hit it that hard but the mixture with the blast probably didn’t help.”

“I’ve also had my head rattled more times than I’d like to admit, so my hearing isn’t what it used to be. ”

“You and me both.”

“But, the past week was eventful in all the worst ways.”

A laugh was pulled from deep in my chest as I nearly choked on the liquid in my mouth. I wiped at the corner of my mouth as I recovered, “Seems like that might be putting it mildly.  But hey, you could have used the lingering headache as the perfect excuse to avoid a coffee d—meet.”

Hotch smirked over the lid of the coffee cup with a raised eyebrow, “A coffee date? Presumptuous, SSA Navarro,” he finished, making my face heat up at how deep his voice was and how smoothly it came out. “But…I would have missed out on my wager, and it’s been worth the wait so far.”

Any worry I had last week about whether I was imagining this or not flew out of the window at lightning speed, “I’m glad I’m good company.”

“I know, I was surprised,” he joked, smirking once again. “Hopefully this isn’t too out of your way.”

I bit back a laugh, “I work out of the DC field office in Violent Crimes.”

Hotch’s face dropped immediately, “Why would you come all the way here?”

“You asked me to,” I stated simply. His face was concerned and almost looked mad that I would do that, “I’m teaching an intro to field medicine course at the academy today, don’t worry. I was just making you sweat.”

“You didn’t have to try hard to accomplish that,” he shook his head, visibly relaxing and licking over his lower lip.

We enjoyed a brief silence, savoring our drinks and listening to the bustle outside of Hotch’s office. His eyes flicked between my face and the cup being cradled and dwarfed by his hands. He was reserved, which was unsurprising given the setting, and hadn’t quite shut off the serious demeanor he carried in his office. It was hardly a problem and was still a fairly comfortable silence.

That was until my eyes settled on a photo behind his head, “Is that your son?”

Hotch slowly spun away so he could see what I was looking at and nodded with the brightest smile I’d seen on his face so far. I could tell his son was his whole world just from that look.

“Yea, Jack,” he confirmed with a proud smile.

“May I?” I was already half out of my seat.

“Sure,” he nodded, savoring another long sip of coffee.

I rounded his desk and got a closer look at the photo of father and son, with a real, honest-to-God grin on Hotch’s face, “He’s so cute. How old is he?”

“Five,” Hotch tilted his head at his son’s smiling face, fiddling with the coffee cup in his hand.

I glanced at his left hand, quickly looking back at the photo.

Lack of a ring tan means he didn’t divorce or separate too recently. Oh my—stop that right now.

“He had to have gotten his looks from his mom because…” I looked at Hotch again, making a show of looking him up and down before mocking a cringe. I stepped back from the photo and leaned against his desk.

Hotch hissed from between his teeth, leaning back in his chair and crossing his legs, “That would hurt more if you weren’t right.”

“I’m kidding,” I purposefully knocked my leg into his foot. “He’s got your eyes.”

“He just started school recently. He’s so smart,” Hotch looked thoughtfully up at the photo once more. “Figuring out co-parenting with school has been a bit of a struggle, but Haley and I are making it work.”

“I’m sure it’s a whirlwind, even with two parents.  My younger brother is a newly single father.”

“It is, but he's a great kid and I’m lucky to have him.”

My watch started beeping, alerting me to my twenty-minute warning before I needed to be downstairs for the course. I quickly turned off the alarm and focused back on Hotch.

“Speaking of kids, have you taken him to the new bakery on King and Cameron?  They have these incredible cupcakes that my nephew loves. I don’t know how far that is from you.”

“Not too far and Jack does have a sweet tooth,” he pondered for a moment. “Maybe we could check it out sometime. Without him. You know, make sure it’s safe first.” 

I was taken aback for a second at the invitation, “We? Now who’s presumptuous?” I smirked. Before he could reply I was speaking again, “Would Saturday work for you?”

“It should. Provided we don’t get a case. Eight?”

“Sounds good. I have to run, but—uh—I’ll talk to you later?”

“You will,” Hotch smirked back.

I just about ran out of his office, almost forgetting my bag in the process, not wanting to be late in front of a bunch of trainees. He shook his head at my antics and I had to ignore the way my face felt like it was on fire out of embarrassment.

I’m so fucking dumb.

-

Chapter 3

[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.

[beauty-beast-week]

BatB Week podfic instructions and tips

Thanks to everyone who signed up for the podfic exchange! If you signed up as a reader, you should have gotten a message with info on who you matched with. Send a DM if you missed the message.

(If you didn’t sign up, there is still time! We still need one more podficcer! The form to sign up is here.)

I don’t personally do voice/audio work, but I’ve pulled together some quick tips and instructions for recording, editing, and posting podfics below the cut. If someone else has better/more suggestions, please add on!

Recording and editing

Need audio recording/editing software? You don't need anything fancy; you can record it on whatever voice recording software comes installed on your phone (I have Samsung Voice Recorder, for instance), or use one of these free, beginner-friendly audio editors: Lexis Audio Editor (Android, iOS, Windows), Audacity (Windows, Mac, Linux), GarageBand (Mac), Audiotool (online).

Nastasia Marquez has a great tutorial on how to record and edit voiceovers for beginners in Audacity. It's very easy to follow along and gets straight to the point.

When recording, watch out for plosives and sibilances (e.g. your "pps," "sss," and "shh") as they can easily hinder the quality of your recording by being aggressive to the ear. It’s hard to give tips since everyone will be working with different devices, but my suggestion would be to put some space between your mouth and the microphone, or have your device inside a sock. You can learn more on them and how to deal with them here.

A good way to get clean audio is to record under a blanket. It’s silly, but it’s as close to a padded studio as you can get for free. It reduces echo and makes the audio sound much better no matter the mic you use.

Don't be afraid to record in short batches! There’s no need to do it in long unbroken takes. Piece it together later.

Posting the audio file

Once you have your finished audio file, you have to upload it somewhere, because AO3 can host the link to it, but not the audio file itself. It seems like Internet Archive is popular for hosting podfic audio files. You can also host it on Google Drive, YouTube, Mediafire, or Spotify.

Posting the podfic to AO3

Go to ‘Post > New work’ just like you would for posting any fic to AO3.

In the ‘Post to Collections / Challenges’ field, enter “beauty_beast_week_2025” (see first screenshot below).

Check the box that reads ‘This work is a remix, a translation, a podfic, or was inspired by another work’ and include the URL to the original fic (see first screenshot below). This not only gives credit to and notifies the author, but it adds a link to your podfic from their fic (when they approve it) so that your podfic gets more hits and kudos.

In the body of the post, insert the HTML to embed the audio file (see second screenshot below). It’s easy: AO3 has a simple guide to copy and paste from here.

If you’d like, you can add more content to the body of the post, like the event banner or some text, but it’s not necessary.

Here are some examples of BatB podfics so you can see how they’ve set things up: The Great Wide Somewhere, Mutual Care, and The Beast Within

Posting to the event

Important: tag the @beauty-beast-week account within the body of your Tumblr post itself by typing the @ symbol, typing beauty-beast-week, and then selecting that account name from the autocomplete menu that appears. This is the only way to be sure we see your post so we can reblog it from this account and include it in our master list posts.

Other than that, make sure you post to Tumblr on the day of the prompt you're using and include in your post:

Tag the @beauty-beast-week account within the body of the post (yes, I’m repeating myself)

Which fic your podfic is for, and link to it

Which day/prompt your podfic is for, in the body or tags

The event hashtag #batbweek and/or #batbweek 2025

Any other appropriate hashtags (characters, ship, NSFW and content warnings)

Optional: The event banner (save from the top of this post) or the day's banner (in the full event instructions that will come later)

Heads up authors! Check your AO3 email during the event!

If your work was adapted into a podfic for the exchange, check your email and follow the link to approve linking back the podfic to your original work so more people can discover the podfic version!

Send an ask or DM if you have any problems or questions!

[alpineshift]

Come make a remix with me and create something together! 🥹 I thought it’d be nice to do a little Valentine’s Day prompt fill event, but with a little twist to make it interesting.

There’s two parts to this.

First, you get to pick the pairing. You guys know me—I’m primarily a nicojack author, but I’m happy to write for some of the more common NJD ships, and some honourary ‘quinn hughes gets a bf’ as a side quest! (If I truly don’t know the pairing well, I will be honest with you and let you know I can’t write it, sorry 😔)

Then, you can choose either the format OR the prompt. I’ll choose the other 😉

Format: Either a ficlet (roughly 1,000 to 2,000 words) or a social media interaction—twitter post/thread, iOS text message, or instagram post/DMs. Depending on the social media interaction, I may use a bit of writing here and there to help the story along.

Prompt: Feel free to get creative, and send as many as you like! It can be a classic writing prompt, or a piece of dialogue, or a song inspo. You can give me an AU, a specific scene, or even an expansion/continuation for something I’ve written in the past that you want to see again. Or, a secret third option! (lol) Be as detailed or vague as you wish. If you have a specific rating you want to go for, I’ll do my best for it 😇

(check out my jacknico ao3 collection to get a baseline of what I usually write; mostly AUs, fantasy, magic, slice of life, sfw & nsfw, horror, sci-fi, and more! I won’t write super hardcore content or non-con.)

You can send me your prompts up ‘till February 12 and I’ll post all of the completed stories in a compilation on my ao3 collection the weekend after Valentine’s Day. And that’s it! Hope you’ll indulge me ♥️

+ canva template

[kandisheek]

FIC REC WEEK 14 – AUTHOR WEEK

AUTHOR SPOTLIGHT: La_Temperanza

If you've ever wondered how I and other writers create special work skins for certain fics, look no further! La_Temperanza has a whole library of tutorials for AO3 work skins and general tips and tricks. I've definitely made use of their code for a whole bunch of different projects, and I bet that you'll find something that'll help you in your writing journey.

Here's some of their tutorials that have helped me throughout the years:

Work-Skins:

How to Mimic Letters, Fliers, and Stationery Without Using Images

How to Mimic Author's Notes and Kudos/Comment Buttons

How to Mimic Email Windows

How to Make iOS Text Messages on AO3

How to Create Notebook Lined Paper on AO3

Sticky Notes on AO3 Without Using Images

How to Make Deadpool's Thinking Boxes on AO3

How to Make Newspaper Articles on AO3

Tips and Tricks:

How To Make Images Fit in Mobile Browsers

How to Make Linked Footnotes on AO3

How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile)

How to Wrap Text around Images

How to Make Customized Page Dividers

How to Make Invisible Text (That Can Be Highlighted)

[tortoisebore]

i’m currently writing a fic of my own, i loved yours and i was just wondering how you showed the texting. was there an app you used to show it?

hi omg i’m so glad i get to talk about this again ✨✨

the texting was part of a little custom work skin i made with a bit of code!! i talked ab it a little and linked the ao3 creators i learned it from here, they both have some super cool customization tutorials! i feel like the ones i used were called something about iOS messaging. but definitely give their works a browse and you might find other stuff you want to try in your fic too 💕💕💕

[setsuntamew]

Why use the same iOS work skin I've been using since ~2015 when I could code up a whole new one???? aka, I got sidetracked from writing and made this last night OwO I wanted a scrollable text message skin and so....here we go.....

The contact image automatically resizes + becomes circular for convenience, which I'm quite pleased with. I'm not done with it - I wanna add a reply box footer for one thing - but once it's complete, I'll share it on ao3! So look forward to that :D

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

[dessertwaffles]

hey! completely random but how did you get the text messages in the nurseydex fix to look like that?

Hi!! Thanks for asking 😊

I followed this tutorial on AO3: https://archiveofourown.org/works/6434845/chapters/14729722

[debbie-anniversary]

Chapters: 2/2 Fandom: No Fandom Rating: General Audiences Warnings: No Archive Warnings Apply Additional Tags: Fanwork Research & Reference Guides Series: Part 3 of AO3 Work Skins/Tutorials 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.

-----------------------------------------

Saw this through a link on Reddit and had to recommend it!

[unrestricted-chaos]

iOS Practice Fic: Learning HTLM & CSS coding again for Ao3.

This fic and the others in this story are for me to practice using work skins on Archive of Our Own. This admittedly took a lot of time for me to do, but I'm really enjoying the learning process.

-- Prologue:

Next ->

Is this Really the Time?

This story starts the same as many before. Some crappy sharpie scrawled on the stall of a bathroom, and one poor idiot in need of a talk on stranger danger. But to be fair, someone put it there for a reason.

Txt X when life’s shit XXX - XXX - XXXX --

You know that terrible trope and cliche of somebody's number being scratched into the wall of a bathroom stall?

If you don't, that is probably for the best if we're being honest here.

Ekko was certain that it had to be a thing from the past. A relic, outdated and forgotten. Only resurfacing by some dumb college kid playing a prank on his buddy, or a lover scorned. Though it could also be some pubescent kid needing to be educated on stranger danger just as easily.

That being said, he hadn't been expecting to come face to face with some rather questionable art and one rather unassuming message on the wall. And if he was being honest, it might actually be the only thing that was not incredibly offensive in some way on the wall. Though perhaps that was a poor choice of words since it was someone's number, and not a hotline of some sort.

Ordinarily he wouldn't have stopped to care, but ordinarily he wasn't out in a dive bar in the middle of the week either.

Choosing to not think too hard on about it, Ekko glanced around for a brief moment before grabbing his phone and snapping a quick picture of the number, his week had been going about as well as the Titanic's maiden voyage at this point, texting a stranger was not going to be the worst thing to happen to him by a long shot. And maybe he had a reoccurring habit of going out of his way to help people when he could. But this, this right here, he would have wanted someone to tell him if his number was on the wall of a dive bar.

Glancing in the mirror, Ekko slid his phone in his pocket before once again questioning why he would have ever decided to say yes to this in the first place.

[pkg4mumtown]

Special Weapons and Tactics (Ch. 3)

Pairing: Aaron Hotchner x Original Male Character (OMC)

Rating: Teen (for now)

Summary: León and Hotch meet up for their coffee date…

Content Warnings: strong language, first person POV, canon-typical violence, mostly fluff

A/N: (As of March 8, 2025, this fic has been transitioned to Hotch/ OMC as I realized I put too much detail in later chapters to still make it a feasible Reader fic. Thank you to everyone, so far. I hope you'll continue to read but totally understand if you don't!) Welcome back!! I hope you’re all enjoying so far! A quick note that I’m a dumbass and put Hotch in a sweater in July in the fic, then did the art, then wondered who in their right mind would be in a sweater in July…then realized I put him in the sweater in the art and uh—well it’s inconsistent and I’m sorry LOL. I’m embedding the Spotify playlist I made for the fic, but due to the lack of dividers for you all to know what chapters I placed them in, I’ll let you know here. Feel free to listen to the whole playlist if you want, just know I’m still making continuous changes to it.

Chapter 3: Let Me Down Easy, The Heart is a Muscle, Want You So Bad

Also available on AO3 - I do use a workskin on AO3 for text messaging, so I uploaded screenshots of the texts here. I know this isn’t what iOS looked like in 2010 but I didnt feel like learning a new workskin lol.

tags: @l-a-u-r-aaa

July 2010

I was fifteen minutes early.

Fifteen.

And too embarrassed about it to text him that I arrived just in case he was running late. His response yesterday to me asking if we were still on for today was an enthusiastic—well what I assume was enthusiastic for Hotch—text reading, “See you then.”

I caught myself gripping my steering wheel so tightly that the material creaked under my hands. I forced myself to settle for some rhythmic tapping with my thumbs to pass the time, turning up the radio to drown out my thoughts. I checked the time to see only five minutes had passed and sighed, watching the cars passing me and parking and wondering which one was Hotch.

I rounded his desk and got a closer look at the photo of father and son, with a real, honest-to-God grin on Hotch’s face, “He’s so cute. How old is he?”

“Five, almost six,” Hotch tilted his head at his son’s smiling face, fiddling with the coffee cup in his hand.

I glanced at his left hand, quickly looking back at the photo.

Lack of a ring tan means he didn’t divorce or separate too recently. Oh my—stop that right now.

“He had to have gotten his looks from his mom because…” I looked at Hotch again, making a show of looking him up and down before mocking a cringe. I stepped back from the photo and leaned against his desk.

Hotch hissed from between his teeth, leaning back in his chair and crossing his legs, “That would hurt more if you weren’t right.”

“I’m kidding,” I purposefully knocked my leg into his foot. “He’s got your eyes.”

“He just started school recently. He’s so smart,” Hotch looked thoughtfully up at the photo once more. “Figuring out co-parenting with school has been a bit of a struggle, but Haley and I are making it work.”

“I’m sure it’s a whirlwind, even with two parents.  My younger brother is a newly single father.”

“It is, but he's a great kid and I’m lucky to have him.”

My watch started beeping, alerting me to my twenty-minute warning before I needed to be downstairs for the course. I quickly turned off the alarm and focused back on Hotch.

“Speaking of kids, have you taken him to the new bakery on King and Cameron?  They have these incredible cupcakes that my nephew loves. I don’t know how far that is from you.”

“Not too far and Jack does have a sweet tooth,” he pondered for a moment. “Maybe we could check it out sometime. Without him. You know, make sure it’s safe first.” 

I was taken aback for a second at the invitation, “We? Now who’s presumptuous?” I smirked. Before he could reply I was speaking again, “Would Saturday work for you?”

“It should. Provided we don’t get a case. Eight?”

“Sounds good. I have to run, but—uh—I’ll talk to you later?”

“You will,” Hotch smirked back.

I just about ran out of his office, almost forgetting my bag in the process, not wanting to be late in front of a bunch of trainees. He shook his head at my antics and I had to ignore the way my face felt like it was on fire out of embarrassment.

I’m so fucking dumb.

Chapter 3

July 2010

I was fifteen minutes early.

Fifteen.

And too embarrassed about it to text him that I arrived just in case he was running late. His response yesterday to me asking if we were still on for today was an enthusiastic—well what I assume was enthusiastic for Hotch—text reading, “See you then.”

I caught myself gripping my steering wheel so tightly that the material creaked under my hands. I forced myself to settle for some rhythmic tapping with my thumbs to pass the time, turning up the radio to drown out my thoughts. I checked the time to see only five minutes had passed and sighed, watching the cars passing me and parking and wondering which one was Hotch.

“Just got here, no rush.” -León

“Parking.” -Hotch BAU

Oh, thank the stars.

I got out of my car and headed for the entrance, nervously wiping my damp hands on my pants. The line wasn’t terribly long, so I waited near the front door for Hotch, occupying my mind with figuring out what to drink. The door chimed behind me, Hotch’s slim frame casting a tall shadow in front of him.

“Hey,” came his soothing voice as I felt his hand on my mid-back.

Don’t be weird, don’t be weird.

I turned to face him, seeing him endearingly dressed in dad-clothes. His dark polo and well-worn jeans were a nice reprieve from the suits I’d seen him in so far. His hair was soft-looking but in order and he looked surprisingly rested for eight in the morning. I couldn’t say the same for myself as I had been driving myself crazy all-night thinking about this…date.

“You just ruined your chances of me paying,” he glared playfully, sliding his hand from my back to my waist and jabbing my side with his finger.

My eyes lingered on the way the polo clung to his shoulders as he walked past me, looking over his shoulder expectantly. He reached the counter without me and swept his arm inviting me to stand next to him.

Oh, right.

He laughed softly as I shuffled over and stood next to him. Too far away at first, so I took a step closer. Well, now I was too close.

“What do you usually get?” He bent down at the waist and examined the wide selection, ignoring the internal battle I was having regarding proximity.

“H-honestly, I get something different every time,” I hummed. “I might go for a cheese roll today,” I answered, tapping on the glass while pursing my lips.

My head popped up as I heard my name being called from behind the counter.

“León! Buenos días, mi guapo,” León! Good morning, my handsome, an excited voice floated over the display case, her delicate hand reaching out to me, covered in weathered skin.

“Ay, buenos días, preciosa,” Oh, good morning gorgeous, I greeted, matching her enthusiasm and taking her hand, clasping my other hand on top of both of our hands. “How‘ve you been, Sam?”

“Great, can’t complain,” she grinned. “No Ben?”

“No, not today, but I brought a friend,” I nodded toward Hotch.

“Aaron,” he introduced himself with a wave and a gentle smile toward the cheery, older woman.

“Nice to meet you! Let me know when you boys are ready to order.”

“Ben?” He murmured.

“My nephew. He’s practically a regular when they visit,” I gave him a look over my shoulder, “I don’t make a habit of inviting strange men here, you know.”

A subtle eye roll passed over his features as he shook his head.

I grabbed his wrist, laughing and doing my best to convince him despite laughter in his eyes, “I’m serious!”

After ordering with Sam, we found a table that we non-verbally agreed upon before sitting and waiting for our orders. It was quiet for a moment, the only sounds were made by the baristas and patrons around us, as I gathered the brainpower and courage to both say something and say something not idiotic.

“So, anything fun planned for the rest of the weekend?” I finally spoke up, fidgeting the tip of my finger over a dent in the table.

“This,” he replied, shrugging nonchalantly. Looking at other patrons before glancing at me to of the corner of his eyes with a playful smirk.

“Smooth.”

A wide smile finally graced his face, “Haley—my ex-wife—took Jack to visit her parents, so mostly relaxing unless we get a case. We’re on call this weekend.” He blew out a breath, “But, I’ve been thinking about doing the FBI triathlon next year so I should start training for that. Mm, Jack’s soccer season started; Dave—er, Rossi—has been helping me coach the kids. The field field they play at is undergoing renovations this week, so they postponed the games and practices.”

“As if you don’t have enough on your hands. Soccer parents can be crazy; I don’t envy you,” I chuckled, tapping on the table when I remembered his mentioning of the triathlon. “The triathlon! I run it every year, I’ll train with you!”

“Yea? You run?” Hotch leaned forward, intrigued at the revelation.

“As often as I can. These knees don’t snap, crackle, or pop for no reason,” I laughed. “I ran a lot in the Navy.”

“Navy?” He hummed, holding up a finger and flicking his wrist down to point at me as he guessed, “Corpsman?”

“Guilty. I was a greensider, so after FTMB I had to continually qualify with the Marine PFTs and had to run a lot. I was very lean ten years ago,” I sighed sadly at my long-lost cardio.

“You still look good,” he murmured, eyes flicking down so fast I almost missed it.

“Ooh, tell me more,” I leaned my chin on my hand, my elbow propped up on the table fluttering my eyelashes at him jokingly.

“I don’t think you’ll be giving Derek a run for his money, but…”

“Oh, no one can compete with that man. He is fine,” I stressed.

“He—yea, I can’t argue with that,” Hotch shook his head guiltily with a huffed laugh.

“Fun fact: I had the biggest crush on him at the academy,” I admitted.

“No comment,” Hotch’s laughed softly, ears tinged read.

“Here you go, mijo,” Sam said as she came around with our drinks and chosen pastries. My coffee rattled with ice as she set it down in front of me.

“You’re an angel,” I smiled gratefully, which she returned with a squeeze of my shoulder before getting back to work.

I turned my attention back toward Hotch, who took a sip of his scalding coffee, “You know, I’m not a profiler or anything but I think that coffee says a lot about you,” I nodded toward his cup.

“Besides the fact that it has your name instead of mine?” He squinted tilting his head at the scrawl.

“Force of habit for her. I don’t blame her, I’m pretty memorable,” I raised my eyebrows and dipped my head to take a bite.

“No comment,” he dodged with a small smile and picked up a fork. “So, enlighten me.”

“Mm, black coffee is your exterior that you show everyone. Harsh, hard to swallow, but effective and efficient. The sugar is the touch of sweetness hidden underneath that I see when you talk about your family and your team…” I shrugged.

“Not bad. A little too astrological for me,” he smiled, looking at me through his lashes while taking a piece of cinnamon roll from his fork. “Hard to swallow?”

“Mm, mm, no sir. Don’t you dare,” I laughed, feeling heat rising in my cheeks.

Hotch’s eyes crinkled with laughter at my embarrassment. But, honestly? I could have faced embarrassment forever just to keep that look on his face.

“I—um,” I started and stopped, not wanting to ruin the good atmosphere we had. Hotch patiently waited for me to continue. “Assuming I’m reading this correctly. I—have you ever been out with a…” I paused and glanced around out of habit, “…man?”

“No,” he answered and paused, carefully thinking over his words before speaking, “but I’ve known I was attracted to men for a while. I don’t know if Haley did, she never brought it up if she did,” he was quiet for a moment.

I could tell he wanted to say more, so I reached out and placed my hand comfortingly on his. I placed it hesitantly at first, then upon seeing that he was okay with it, let the full weight of my hand rest there.

“I loved her a lot—I still do—I mean, we were together for over twenty years. But, I wasn’t—I wasn’t a good husband, or father for that matter. The divorce was about four years ago, but since then I’ve stepped it up. I’ve delegated to Morgan and Rossi more so I can be there for Jack, but she made it clear that she wouldn’t want to get back together,” he paused, taking a sip of his coffee. “I don’t blame her, she deserves better. I think that if I did date again, it would have to be with someone who understands my job, my responsibilities, my…drive for doing this job and can be okay with everything that entails.”

When Hotch finally made eye contact with me his eyes were a little misty, but he held it together. I genuinely felt bad for bringing up the question even if it I hadn't asked directly about his family, “I’m sorry.”

“No, no it was probably good for me to admit,” he turned his palm up so he could reassure me with a swipe of his thumb over my fingertips. “I—um—to answer your actual question, no I haven’t been with a man in any way, but I’d say I’m still attracted to women, too.” He squinted, not really having ever given it much thought growing up, “How did you figure it out?”

“Oh, well I knew I found guys attractive when I was like twelve, but one of my mom’s many ex-boyfriends was a super macho—well, he was a dick—and constantly hounded me about girls. So, I made out with Patty Serrano in the 8th grade and realized how much I hated that. Stuck with boys from then on,” I cringed, shifting back to Hotch’s dilemma. “You sound pretty bisexual, though, but don’t stress or feel like you have to label it or anything,” I waved my hands a little erratically. “And just so you know...if you feel like you aren’t into it, I won’t be offended. I swear.”

Hotch shook his head at my story, “I don’t think you have to worry about that.” He punctuated this with a squeeze of my hand and a wide smile.

I noticed his eyes drifting back down to his cup repeatedly over our interaction, but left it for him to speak up.

“Yo—,” he started and stopped. “Your name is León?” He finally finished, the emphasis coming through at the end as he spoke on the slower side, with a clear question mark. He’d noticed the accent that Sam included in writing on the cup as well as in her spoken greeting toward me.

I exhaled, taking a long sip before answering, “Yeah. Technically. But Leon is easier.”

“Easier for who?” Hotch pushed, fingers tapping lightly on his cup.

I blinked, caught off guard at his question, “Uhm, English speakers.” I shrugged, “I got tired of correcting people when I was a kid.”

He hummed, gaze still trained on me, “But it’s not your name.”

I paused, rolling his words over in my head. No one had ever really said it like that before. I thought it, sure, but that was me. No one had ever made the distinction that the pronunciation wasn’t just wrong, but that it mattered, too. A warmth crept into my chest as that thought set in, a warmth that ideally shouldnt be there as I sipped on an iced coffee.

I cleared my throat, breaking eye contact with a half-smile, “Guess not.”

Hotch nodded once, like he’d just decided something and took a sip of his coffee.

“León,” I heard him murmur softly, but certainly.

I looked up, his eyes already steady on my face. For the first time in a long time, my name wasn’t a question; something to be debated. It wasn’t something I needed to explain or justify. It just was.

We continued chatting and Sam came by at some point to refill Hotch’s cup with a wink, making him blush at the attention. I thoroughly enjoyed seeing him so relaxed and at ease, so when his phone chimed, seeing him deflate as he saw the caller ID was like a punch to the gut.

“Damn,” he murmured. I nodded as he looked at me for permission to answer the phone.

I nodded, waving my hand eagerly for him to just answer it.

He mouthed the word ‘sorry’ at me and answered. His agent façade immediately rose up, a frown adorning his face and deep lines forming on his forehead, “Hotchner. Okay. How long? How many? Okay, I’ll gather the team. Bye.”

Hotch let out a heavy sigh, an apology written all over his face. It was probably a look ingrained into his routine by now, having to be apologetic constantly for missing life events and family bonding. The lines that creased on his face with that expression made me want to smooth them out, tell him it was okay, and to go do good.

So, I did.

“Don’t look at me like that, go,” I laughed, running my thumb over the deepened crease of his cheek from frowning, where some of the glaze had stuck to his skin. “Believe me I—,” my own phone chimed. I read the text, seeing a message from my chief. “—I get it. I gotta run, too.”

We both practically stuffed our faces in a rush to leave and took the drinks with us. With a grateful wave to Sam for her hospitality, we exited the bakery and made our way back to our cars.

“Is it bad?” I asked as we neared my car first.

“Three girls, one missing, two dead,” he sighed. “Indiana.”

“Castrated male in Maryland. Probably gangs.” I responded, shaking my head as we walked side by side.

I felt Hotch grab my hand and tug me to a stop. He took the time to look me in the eyes despite the foot traffic and noisy street that had finally woken up, “Thank you for today. Really. I had a great time.”

“Me, too. You know how to reach me,” I squeezed his fingers, admiring the way the late morning sun reflected off his eyes, making them glow amber.

He leaned forward toward my face, and I had to resist the urge to gulp as my brain went into overdrive thinking he was leaning in for a kiss. I relaxed, however, as he bypassed my face and pressed his cheek to the side of my head, chin brushing the stubble on my face. His hand came up to rest on the side of my waist as he spoke, “Be careful.”

I swore I felt the ghost of his lips pressing against my temple and it made me shiver despite the rising temperature outside, “Y-you, too.”

-

Chapter 4

[fantasy-pens]

A Guide to Making iOS Text Messages on AO3, Miraculous Style

(This is a contribution to @miraculousfanworks​ for formatting tips in AO3)

Writers like to experiment with different fanfiction types. And one of the most popular types are the text fics.

A text fic resembles a log of two or more characters texting each other. It may be written entirely in the form of text messages, or it may contain narrated passages. Writers often prefer to include texting between characters in their stories, for it gives the readers a deeper insight into the characters’ lives and personality. And no doubts the level of personal interactions associated with texts is what makes text-fics a popular type amidst the readers.

A story can be written entirely in texts, or even contain a minor scene where the characters text each other. Often, writers have different ways to distinguish the texts from the rest of the narration, to enable the readers to easily differentiate between the two parts.

One of the most common ways is formatting. Aligning, boldifying and italicizing the texts is a common way to highlight them in the story. However, many a times, the formatting fails to give off the necessary vibes. To rectify the same, a few writers use screenshots of text conversations between the characters in their stories.

But what if there was a way to present the text messages in the story, WITHOUT using the images? Something like this:

Read under the cut to find out!

How to make iOs Text Messages on AO3 (Miraculous Style)

(Note: For this article/tutorial, the reference chosen is How to Make iOs Text Messages on AO3 by CodenameCarrot and La_Temperanza.)

The tutorial does not dive into the details of how exactly the CSS for the text messages is coded, for there is a predefined skin made available for all the main characters of Miraculous Ladybug. The skin is made such that the colors of the text differ on every character’s phone (civilian and superhero alter ego). 

The right side (the darker bubble) is always the texts written by the character. The left side (the lighter bubble) is always the texts the character has received.

The skin used is Messaging Miraculous and since it is a bit tedious to make it available to public use, here’s a link to the document that contains the necessary CSS for the same.

To use the above skin

Simply go to your ao3 dashboard, click on Skins > My Work Skins >  Create New

Fill in the necessary details there and at the part where you have to write the code, copy paste the CSS from the document linked above! Then click on Create and your skin is created!

Now, in your work, go to Select Work Skin and choose the Messaging Miraculous work skin. (This is the name of the skin that I have on my dashboard :) )

This will import the skin in your story.

The skin has different color formats for different phones. In other words, texts on Marinette’s phone will have a different color scheme from how they appear on Adrien’s phone or Ladybug’s phone and so on. The idea behind this is that each user has a specific color theme of their choice installed in their phones :)

So, a basic thing about the CSS involved in the skin.

The messages received have an attribute of text[code] and the messages sent have an attrivute of [code]reply

Now what is this [code] thing?

The code thing is the small piece of text used to differentiate the code for all the characters. 

The codes used for the different characters are:

So, if I want to write a chat window for Ladybug’s phone, the received messages would be textlb and the sent messages would be lbreply

For Nino’s chat window, the received messages would be textnino and the sent messages would be ninoreply

What do these attributes mean to me? How will I use them?

These attributes are what we are going to use in our AO3 HTML editor to implement the chat format.

The usage of the skin is explained below based on a sample conversation between Marinette and Adrien from the episode Frozer, something that goes lke this:

Adrien:  Marinette! Perfect timing! Marinette:  Huh? You think so? Adrien:  Actually, what I meant was...

It is done for Marinette’s chat window.

First of all, remove all the formatting from the chat texts that you have made.  This is how your chat will start to look like:

Then, go to Edit, and click on the HTML button in the editor.

The HTML editor has automatically put a series of <p> tags around your text messages. Something like this:

Remove these. The result looks like:

Remember: only remove the <p> and </p> tags that surround the text messages. You would not want to mess up the formatting of the rest of the story

Now, let’s get down to a little coding. Add this little code shown in the next image to the part just above the first text message.

and this little piece at the end of the last text message on the window.

The <div> tag is what makes the editor aware that this is the place where we are using the imported worksin, and specifically, a coding that has the CSS attribute by the name “phone”.

The <p> tag indicates a new paragraph, and here it encloses all of the text messages that occur on the phone window, and the class “messagebody” tells the editor that it has to implement code for the same :)

Perfect! Now getting to the part of making the chat bubbles. 

(This coding has been done for Marinette’s window. Hence the attributes used are textmari and marireply. You can similarly use the other attributes for different characters) The first dialogue is that of Adrien. So, Marinette received this text on her phone. Hence we go like: 

The “span” attribute here differentiates between the different chat formats we have for the different characters. The <br> tags are for telling the editor to move to a new line :)

The next dialogue piece is of Marinette. So, she sends this text. Therefore, we go like:

The next (and last dialogue) is Adrien again, hence the code for it is like:

And now, clicking on “Preview” then “Save as Draft”, the result is:

Perfect!

(It is always recommended to preview the story before posting it. You can always check for non functional links or code errors if you find any :) )

You can make the same for other characters as well in the similar fashion! To check out the different color schemes offered by the skin, here’s the link to the document on AO3!

Miraculous Messaging Work Skin Tutorial

What if I want to boldify or italicise a certain word/phrase within the text message?

It’s simple! Enclose the certain word/phrase <b> , <i> and <u> tag for bold, italics and underline respectively! Like this:

gives:

Does this skin work all the time?

As long as “Hide Creator’s Style” is disabled, yes!

But what If someone uses “Hide Creator’s Style”? Will not that ruin the story?

There is a solution around that too! You simply need to add this extra piece of code to each text message, along with the name of who types that message :)

so when you click on that “Hide Creator’s Style” button on the top, you end up with

which is absolutely cool!!

Hoping this article helped explain all the doubts! For further queries or character suggestions, feel free to comment on the sample work linked above!

[simon-eriksson]

@Fanfic writers:

My friend send me this link, is a series on a profile on Ao3 (tumblr) that has different tutorials to insert things to fanfics via html code, I thought I would share bc it’s really cool

Lists of tutorials:

How to make images fit in mobile browsers

This is a tutorial/live example on how to make large images fit on mobile browsers but remain normal size on desktop browsers.

How to mimic letters, fliers, and stationery without using images

This is a tutorial/live example on how to mimic the look of letters, fliers, and stationery (as well as other forms of written media) without using images. For all your epistolary fic needs.

How to make a “choose your own adventure” Fic

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.

How to make linked footnotes on Ao3

This is a live example of how an author can create linked footnotes in their work with only a little bit of HTML and no workskins required. This is best viewed by clicking "Entire Work". While I've included the actual coding in bold and italic once you click "Hide Creator's Style", there's a more detailed explanation here.

How to change text on Ao3 when the cursor is hovering over it (or clicked on mobile)

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.

How to mimic author’s notes and Kudos/Comment buttons

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!

How to wrap text around images

This is a tutorial/live example on how to align images to the left or right of the screen and have text wrap around them.

How to mimic email windows

This is a tutorial/live example on how to mimic email windows on AO3 without the need to use images.

How to make ios text messages on Ao3

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.

How to make Customized page deviders

Bored with the default page dividers? This is a tutorial/live example on how customize your page dividers with no images needed (though I do show you how you could use images if you wanted to do such a thing).

How to make invisible text (That can be highlighted)

This is a live example how to make invisible text that can only be seen by highlighting the text. Tutorial is included in text, and you can always leave comments about questions you may have.

MOBILE USERS: Sadly, this probably won't work for you, since highlighting in a mobile browser is different than web. I've tried correcting this, but have yet to find a solution.

How to make a rounded playlist

Original coding and design is from layouttest. I make no claims for it, just tweaked it so it will work on AO3.

How to create notebook lined paper on Ao3

This is a live example of my AO3 skin that allows the author to recreate the look of lined notebook paper in their work. To learn more about it, you can find the tutorial here.

Sticky notes on Ao3 without using images

This is a live example of my AO3 skin that allows the author to recreate the look of sticky notes (aka Post-Its) in their fic. To learn more about it, you can find the tutorial here.

How to make deadpool’s thinking thinking boxes on Ao3

This is a live example of my AO3 skin that allows the author to recreate the look of Deadpool's thinking boxes in their fic. To learn more about it, you can find the tutorial here.

How to make newspaper articles on Ao3

This is a live example of my AO3 skin that allows the author to recreate the look of a newspaper article in their work. To learn more about it, you can find the tutorial here.