#How to: Add Images to Your HTML AO3 Format

[deityoftherain]

Random AO3 Tips

I have a list of resources on my pinned post, but I don't really have a place for the simple miscellaneous tips and tricks, so here's this!

I didn't know most of these existed for probably far too long, so this post is mostly to spread awareness for new users or those who may not have heard of them before <3

I'll update this post if I learn of any other handy tricks. If you know any, let me know and I'll add it here :D

Basic HTML codes for A/Ns and etc

Note: Screenshots of the HTML "codes" at work are shown under the cut!

Center Text <center>TEXT</center> Clickable Link <a href="LINK">TEXT</a> Hideable Information <details> <summary>SHOWN</summary> HIDDEN </details> Insert Image from Link < img src="LINK" alt="IMAGE DESCRIPTION" width="100%" align="center" />

Italicize/Slant Text <i>TEXT</i> Line Breaks <br>TEXT</br> Paragraphs <p>TEXT</p> Strikethrough Text <strike>TEXT</strike> Underline Text <u>TEXT</u>

Single-post AO3 Guides

short guide on how to tag your own fics

short guide on how to title your fics/stories

how to embed images and links on AO3 [via Rich Text]

how to sign up for AO3-based exchanges (ft. @trafficteamsupportexchange)

Note: This is for formatting with HTML for the work, and for the authors notes where you Rich Text doesn't exist/work. Rich Text, on the other hand, should transfer most of these from whatever document resource you're using, but I've personally had issues with strikethrough not transferring from Google Docs copy-pasted to AO3 Rich Text, so just double check those areas!

[canon-in-too-deep]

A Tutorial On Typesetting In Affinity (With Template)

This is an semi-abbreviated guide to typesetting in Affinity Publisher, using the template I posted here.

While this is not a comprehensive tutorial, I tried to be as detailed as possible, and hope this help folks with their typesetting journeys! Note: there are different ways to to do this, these are just the ways I've used personally. (And by 'used', I mean all the features and functions I've bashed my head against till something readable came out). Second Note: these steps do apply specifically to the template I posted. This is the template I use to save time when typesetting, as it already has all the Paragraph and Character Styles and text boxes and margins I've made in previous works. Warning: wall of text below the break!

Part 1

Importing your text into Affinity. First things first, this step all depends on where you are getting your text from. If you are typesetting something from Project Gutenburg or a similar site, copy and paste the text into Google Docs. If you are typesetting from AO3 or a similar site, download an html file of the text, then copy and paste that into Google Docs. Once in Google Docs, download the file as Rich Text Format (.rtf). Open the .rtf, and copy and paste that into the Affinity Template. Just stick it into any of the body pages on page 9 or up. It'll 'flow' automatically to fill the pages. Whew. Okay. Now, you can actually work on your text in the template.

Document size (optional). So the template I made is for half letter (letter folio). Letter is the size of the page I would be printing on, and folio is the imposition (which means if I was making it into a physical book, I would fold that page in half. Folio = the page is in halves. Quarto = page is in quarters. Octavo = page is in eighths etc.). You want your document size to be the size of one single page in your book. - Now, again, the template I have is all set up for a single page size equal to half letter. If you want to change the size, you can go to File -> Document Setup -> Dimensions. If you change the size, you will have to go in and change the text boxes and margins I have left in the template to fit your new dimensions.

How to Auto Flow your text. You will notice that the template only has 50 pages. Chances are, you can't see all your text. To get it to automatically appear, just hold down Shift and click the red triangle on the right of one of the text boxes with your body text in it. It should automatically generate the pages you need with your text. - If you need to manually get your text to flow from one text box to another, just click the little triangle on the right of the text box your text starts in, and then click the text box you want it to flow into. Bonus: To make a text box, click the image of the T in the white square on the left, and draw it on the page. This is the Frame Text Tool, or the text box maker, To add a picture, click the rectangle with an X through it. This is the Picture Frame Rectangle. Draw a frame, then go to File -> Place, and add your image.

Your text is in the template. Time to get it dressed. Okay, now you need to set up your Text Styles. Text Styles should be located on the right hand tool bar. Text Styles are essentially how you tell Affinity how you want the different parts of text to look like. You can change your fonts, spacing, justification, etc, by playing around in the settings of a Text Style (to do so, just click the three lines next to the text style's name, or create a new one by clicking one of the + symbols at the bottom of the Text Style tool bar. Now, there are two types of Text Styles: Paragraph Styles (have the backwards 'P' looking symbol) and Character Styles (have the underlined 'a' symbol). Think of these like jackets and shirts for your text to where. The Paragraph Styles go on over the Character Styles, but you can still see the Character Styles underneath. - First thing to do is go to Find and Replace. It should be next to the left hand tool bar. - Click the cog to the right of 'Find'. Then click 'Format'. This should bring up the screen below. - Click the box next to Italics so it turns into a check mark. Now hit Ok. This will now allow you to find all Italics in your text. - When you find the Italics, you can now Replace them. Hit the cog next to 'Replace with'. Click Character Style. Click Emphasis. -Find and Replace all.

This will save all your Italics while you work on the text. Note, do NOT select all your text and use a Character Style on it. It will override and remove your Italics. You can only have one Character Style and one Paragraph Style applied to specific text. Because of this, I don't really use any Body Character Styles, and make all my changes usually in Paragraph Styles. Part 2

Chapter Headings. Find and Replace is one your best friends in Affinity. After I have Italics saved, I do the Chapter Headings in the text next. I Find and Replace the Chapter Headings if I can, or manually select them. Then I apply the Chapter Character Style to them. Now, if I ever want to change them en mass, I can just Find them using that Character Style to apply a new Paragraph Style or whatever I want to them.

Body Text. Now is the time to finally use a Paragraph Style. I select my text, and apply the Paragraph Style labeled Body to it. While I have it selected, I can change my font type, size, and leading to whatever I want. If I change leading, I do have to go in and edit the Paragraph Styles to have the same leading across all of them. The template is setup for 11 pt font and 140% leading. - To change leading in a Paragraph Style, click the three lines to the right of the Style -> Edit 'Name' -> Spacing -> Leading. - If you change font size/leading, you will need to change the Baseline Grid. Baseline Grid is the underlying grid that your text will snap to (you can disable this in a Paragraph Style, but I like to use Baseline Grid to make sure the Body Text is all lined up the same). To change Baseline Grid, click the button in the top middle of Affinity that looks like an A with blue lines behind it. Then go to Grid Spacing. I usually set it to whatever is my body text leading equal to.

Back to Chapter Headings. At this point, I usually use Find and Replace again, and Find the Chapter Headings with their Character Style. I use Replace to apply the Paragraph Style 'Chapter Heading' to them.

Other Styles. Okay, so Chapter Headings are set. Body text are set. But there's still text that need different formats, like where there's a body divider/dinkus, or the start of a chapter where there's no indent. From here, I manually go through the text, and start setting the little things that weren't covered by the Body or Chapter Heading styles. I use Body No Indent Drop Cap (Paragraph Style) for the first paragraph of each chapter. I use Body Divider (Paragraph Style) wherever there's a section break. I use Body No Ident (Paragraph Style) wherever there's a new paragraph after a section break. And I use Body Special as needed, if there's unique bits of text in the work, like letters, or poems, or songs, to make them stand out more. - This part of typesetting is a lot of me just going through manually, while scrolling through and checking the original text I am typesetting to see if there's any places that need special attention or different paragraph styles. Lot of side by side scrolling and comparing how the original author/publisher had the fic looking, and making sure my typeset matches in a way that I like.

More on Body Dividers. You can check out my book of dinkuses for potential fonts for section breaks/dividers. Once I find the dinkus I like, I copy and paste it into my text, or use find and replace. Just make sure that the Body Divider Paragraph Style is applied to whatever you put. - Now, you may need to adjust the dinkus because it's not centered or spaced how you like. To do this, click the three lines to the right of Body Divider under the Text Styles tab on right hand side of your screen. This brings up the Text Style Editor Box (see the picture below). - To get the divider looking how I want, I go to Paragraph and then adjust the Leading, Space Before, and Space After until the Body Divider looks how I want. Sometimes you might want a section break with a lot of space, sometimes you might want it narrower. This is the place to do it.

Part 3

Next step: Working in Master Pages. Master Pages are great. You can apply them to your text to make your text look uniform. Whatever the Master Page is, the other pages must follow. -To apply a Master Page, right click the page you want on the left sidebar under Pages. Then click apply Apply Master. Then choose what Master to apply. The body text pages all have the Master Body text applied to them already, but you may need to change one because it's the start of a new Chapter. -If you want different margins in your text, this is where to do it. I have mine set up for .8 outer and inner margins, and slightly narrower on the top and bottom margins to account for leading. If you want to change this, just drag the text box to whatever size you want to fit your margins.

Headers/Footers. In the Master Page titled Master Body, you can change the placements and formats of the headers/footers. I usually just have these all centered, but you can put them and size them however you like here, and it will apply to all the main body pages of your text. - The template is setup so you can just fill in your title name and author name in the header locations of the Master Body pages. Click the text boxes and type in whatever you want. If you don't want to use these, you can delete them on the Master Pages, and they won't show up at all.

Master Chapter Heading. The Master Chapter Heading pages are not applied to the text. In the template, you will see that page 9 does not have the Master Body applied to it. This is because I like to play around with different text box sizes and chapter heading designs here, then copy and paste them into the Master Chapter Heading when I have one I like. Then, I can just apply the Master Chapter Heading to wherever there is the start of a new chapter.

Part 4

How to add a Table of Contents. Okay, once all the Chapter Headings are formatted and everything is on the page they should be on, you can put in a table of contents. To add a table of contents, put a text box down wherever you'd like your table of contents to be located. This is usually on page 7 of the template for me, but it may be different for you based on your text or how you do your front matter. - Click in that text box. Then, click Text (on top of your Affinity Screen, towards the left). Go to Table of Contents. Then Insert Table of Contents. - See the picture below. Your screen should look similar to this. - On the left, you can see we are in the Table of Contents tab now. Under Style Name, check the one that says Chapter Heading. Now, everything that had the Paragraph Style Chapter Heading will be in our Table of Contents. - Click the three lines to the right of where we checked Chapter Heading. You can then check Include Page Numbers here.

Part 5

Alright! Now we have pretty much everything done. Almost. There's just the front matter to do now. These parts are pretty much just pasting/typing in your information. The front matter in the template I made is set up for Project Gutenburg public domain stuff. When I typeset things from AO3, I put the stats here instead.

Front matter. What is it exactly. The front matter included in the template is as follows: bastard title page (just the name of the book), blank page, full title page (title and author; you can include publication/imprint info here as well), copyright page, book bound by page (this is not an official thing, just something I decided to add to my templates since mine as free to use), blank page, table of contents. Sometimes a text has a preface or dedication. You can add these pages to the front matter, and if you need more pages to add them, just right click on the left hand side under Pages wherever you would like the new pages to go, then click Add Pages. I use Master A for front matter pages. These are just plain, blank pages with nothing on them.

Title Pages. Title pages. You can pretty much do whatever you want here. I've posted links before to places you get free to use images/art, but you don't need to include any images/art at all. It's all totally optional, I just like to have a bit of fun on my title pages and put in little extra bits.

Anyway, hope this helps and I didn't ramble tooooo much (this started as a short post to just talk about how to import text). If you're looking for more detailed help, I do recommend joining the Renegade Binder discord. I learned how to use Affinity Publisher from someone's tutorial there. I can also try to make more posts in the future further explaining things.

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

[luciaintheskyainthi]

Hi!! I just reed the last chapter of EMC and by the gods!!! I LOVE IT!! The newspaper format?!? FUCKING AMAZING!!! I do want to ask how you did it? I knew you could do many things in ao3, but that?! You're so creative!!!

🥰🥰🥰

Thank-you so much!! As the texts in ECM would probably suggest, I really love mixing up the narrative with these kinds of things (I did something similar in my other fic, A Permanent Fixture).

I used Work skins and CSS for the formatting - nothing ground-breaking! Just fonts. That and using the H1, H2 and H3 headings in AO3's html. I will not claim anything more than slightly above average skills at this stuff!!

This is the CSS I used for the fonts with the work skin:

#workskin .News-name { font-size: 200%; font-family: Old English Text MT, Copper Plate Gothic Bold, Rockwell Extra Bold, serif; }

#workskin .font-serif { font-family: Georgia, Cambria, Constantia, Palatino, serif; }

Here's AO3s guidance on work skins

Here's a bunch of tutorials on the amazing things you can do with skins!

Honestly it took me ages! Mostly because there was a lot of hit 'preview', check, hit 'edit', change CSS/HTML, rinse and repeat while growing increasingly more irate.

I tried a billion times to do something with the images: I wanted them aligned with the text, but also needed the caption to float with it. However my abilities are relatively limited and AO3's HTML coding is equally limited so in the end I gave up and just added the captions onto the image in paint lmao. Paint these days lets you save with transparencies, which is a nice thing to know! But that's why the font in the captions is big and looks a little funny.

If you want to know how to get text to wrap around an image, then you do this:

<img src="IMAGE URL" alt="TITLE OF YOUR IMAGE" width="x" height="Y" align="right/left" />

(the underlined bit is what you add to put in the alignment)

It's not perfect: the text sticks tightly to the image when it wraps, which is why they're both aligned to the right so it was harder to notice, but it works well enough. I know you can use CSS and work skins to give the image a bit of a border, but by that point I was getting the shits and figured it was good enough lol.

I would note that skins sometimes don't work on things like phones (for instance, on my phone the Old English font doesn't appear for the name of the newspaper)!

Hope this is helpful!

[sicktember]

Content Promotion Reminder

When sending in your submissions, don't forget to include :

A link to your work. (Ao3, FF.net, wattpad, tumblr, ect...)

A fandom/alternate fandom tag of your choice. (You can also request no fandom tags)

The prompt that inspired your work

Your art or a snippet/summary of your work. (not a whole fic)

At the end of the month, we will also accept submissions for your 2024 masterlists!

'keep reading' for additional information on how to format and submit your content! (with pictures!!)

On a PC, you find the submissions by clicking on the three dots at the top of the page. That will bring up a menu, where you would click, 'Submit.'

64.media.tumblr.com

It works a little differently on mobile (This screenshot is from an iPhone but I imagine it would look similar on an andrioid.) You click the envelope at the top of the screen to bring up a menu, where you would choose 'Submit 2023 content.'

64.media.tumblr.com

Once you get to the submissions form, it will look like this. (I filled out the form to give you an example of what the formatting could look like.) The mobile version may not give the 'please include' instructions, so be sure to refer to the faqs as needed!

You can create links within your submission the same way you would in a post. If the form is set on 'text' vs. 'html' you will find a menu bar that will allow you to add links, and images, embolden, italicize, or create bullet points. You can see that menu bar in the image below.

64.media.tumblr.com

Please click all of the available submission tags. We will edit the tags prior to posting to include your preferred fandom tags (or request NO fandom tags!) as you list them in your submission. Please limit the additional tags to no more than four. Original work and OC tags are perfectly acceptable!

[morningnoodles]

Could you please make a tutorial on how to add pictures to ao3 chapters ? Phone version please 🙏

hey anon, sure thing!

i actually did the whole 7 days of bagginshield week on computer as i find that easier but here's how i updated the epilogue through my phone ˙˚ʚ(´◡`)ɞ˚˙

1) your image

if it's an existing image on the internet that you want to add (hopefully with the permission of the owner), you can skip to the next step.

if it's an image you created, upload it somewhere that can be accessed publicly (blogs, websites, etc). if you want to maintain its quality, i would not recommend social media platforms because they're notorious for ruining em.

i uploaded mine here on tumblr. if you're using phone, you can upload yours via the app and save the draft but you will need to open tumblr in a browser for the next step.

2) grab the image link

it's also called image location, image address or image URL. because you can't upload images directly on ao3, you need this to add your image to your chapters.

long press on your image and something like this will pop up

tap on "copy image location" or the equivalent for you.

you can also tap on "open image in new tab" and the URL in that tab usually is also the image URL. you know it's the right one if it has "media" or your file format (jpeg, png etc) on the URL somewhere.

i think tumblr app can't do this which is why you need to open tumblr via browser to grab the URL. (i could be wrong tho! ✿)

3) add to ao3

tap on "Rich Text", not "Html" and then tap on the photo icon below

add the copied image URL to "Source", add image description if you like, then change the dimensions to your desired size. for the comics i put their full size (1600x4800). then tap "Save".

i'd recommend going back to Html for the next paragraph if that's easier on phone but that's it!

hope this helps! (❁´◡`❁)

[ao3-userscripts]

AO3: Comment Formatting and Preview

What it does: Above the comment textbox, adds buttons which will insert HTML code to format text (italics, bold, underline, etc), to insert links or images, or even custom text. It also shows a preview of the comment.

Found at: GreasyFork by escctrl

Typing HTML by hand is a drag. Especially if you're just trying to get your squee on in the comments. That's something the Comment Formatting Options script addressed wonderfully, by letting you insert the HTML at the push of a button. But it hasn't been updated in years to make fixes or improvements, such as the ideas its author dusty had noted on its GreasyFork page.

Recently, a different script was published, which takes dusty's to the next level and adds several nifty features.

Install ⇒ AO3 Comment Formatting and Preview

The smaller new features are additional formatting buttons for lists and paragraphs. As before, you can highlight text within your comment and then click the button, to insert the HTML around it.

And the buttons now show reliably on Inbox messages, while replying to comments, and while editing comments.

The more noticable addition is that there's a GUI for configuration!

Go to any page that has comments, for example by opening a work, or viewing your Inbox (if you have an Ao3 account). In the top menu, there'll be a "Userscripts" option, with a "Comment Formatting Buttons" entry.

In the top section of the GUI, you can pick which of the buttons you want to see or hide, if there are some you'll never use anyways.

At the bottom, you can add your own custom buttons. Follow the step-by-step guide in the GUI. One thing to remember when you pick the icon is that this only works with Font Awesome v4 (which has a limited set of icons available), not with the new v5. So make sure to stay on the v4 page when you pick something.

When you chose an icon, copy its four-letter Unicode into the first field in the script GUI. Then it shows up on your custom button.

The other obvious new feature is that you'll have a Preview field, which'll show how the comment will look like once it's been posted.

... And as far as I can tell, it works nicely on mobile devices. \o/

If you use and enjoy this userscript, also consider giving its author some feedback!

[sunderedazem]

Going to add! With some basic site-mechanics tips for ao3 newcomers mixed in, because I'd hazard a guess that some of the lack of etiquette might be remedied if new folks understood how to use this kind of website a little better - it runs very differently from the algorithm-spam of many websites today, and people who missed early internet days due to lack of access or lack of being born yet might face a bit of a learning curve.

Prefacing all this with - as stated earlier, ao3 is not a social media site. It is an archive. That means it's more similar to JSTOR or other online research databases than it is to social-media fandom hubs. It's just Not Built the same. If attention and statistics are your driving force, this site *will* disappoint.

Learn some database searching tricks! Most search engines will respond to certain phrasing (i.e. searching something like 'dog*' will return multiple results beginning with "dog" such as dog, doggo, doge, dogs, dogged, dogma, etc), and ao3 is no exception. Here's a helpful starter site for these kinds of tricks. They should also work on regular search engines like Google!

Make sure to check tags when a fic updates, especially if the author has noted something like "rating may change" or "additional tags to be added". Sometimes a surprise shock factor tag might show up that you don't like after the fic has been posted - seat-of-the-pants authors get bouts of Horrible Whimsy sometimes, and while most will warn of major changes in notes, ultimately it is on the reader to tag-check. (I am seat-of-the-pants authors)

While constructive criticism (unless specifically okayed) is usually considered rude, you can always politely ask an author to add a tag you feel may be relevant. They might say no (which is their call - only the major archive tags are required checkboxes) but asking never hurts as long as you respect the decision they make.

Learn to use site skins! There's plenty of available ones on ao3 for you to choose from that can modify your ao3 site appearance to something that better suits your tastes or needs, or filter certain things from results for you, and you don't have to be particularly ao3-savvy to apply a pre-built site skin - the option to preview and apply is built in through the site itself.

Learn a little HTML! You can insert clickable hyperlinks to your tumblr or social media or etc this way, format your fics if you want to, and you can also embed images into the text of your fics using html. You can also use this to customize site skins! (It's also very handy for customizing your tumblr too, btw)

Choose Not to Warn is not the same as No Archive Warnings Apply. If you go into a CNTW fic you're knowingly walking into something that could be incredibly disturbing or triggering, and not be explicitly tagged for that disturbing or triggering thing - the CNTW tag covers it. It's a risk you have to accept when you read that fic.

Authors can see what you say in your bookmarks, even if said bookmarks aren't visible to others. (Giving a story a "grade" in bookmarks is not the move, folks)

Favoriting tags pins them to the ao3 homepage! Very useful for quickly finding fics with your favorite ships or tropes or characters.

Do NOT mention the word "commissions" or anything similar when posting your fic - this will get your story removed because AO3's big legal defense of fanfic hinges on people NOT making money from it. This also means do NOT link to a commission site or a Ko-fi. It's not personal, it's just so they can keep themselves from eating a lawsuit.

Edit: one more! Essays and meta ARE allowed - fannish nonfiction is totally cool, just tag it appropriately.

AO3 Etiquette

It would seem a whole new kind of AO3 reader/writer is emerging and it is becoming clear not everyone quite understands how the website community works. Here is some basic guidance on how most people expect you to go about using AO3 to keep this a fun community archive that funtions correctly:

Kudos is for when the story was interesting enough to make you finish reading. If it sucked or was badly written, you probably left. If you finished - you kudos.

If you liked it, you should comment. It can be long and detailed or a literal keysmash. Writers don't care, we just love comments.

No critisism unless the author has specifically asked or agreed to hear it. Even constructive critisism is a no-no unless an author note tells you it's okay. Many people write as a fun hobby or a way to cope with, among other things, insecurity. Don't ruin that for them.

Do not comment to ask the author to write/update something else. It's tacky and off-putting and will probably have the opposite effect than the one you want.

There is no algorithm, it's an archive. Use the search and filter function to add/remove the pairings/characters/tropes etc. you want to read about and it will find you the fics that fit the bill.

For this to work, writers must tag and rate stories. This avoids readers finding the wrong things and missing the stuff they want. I don't care how cringy that trope is in your eyes - it gets tagged.

Character A/Character B means a ROMANTIC or SEXUAL relationship of some kind. Character A&Character B is PLANTONIC, like friendship or family.

Nothing is banned. This is an implicit rule because banning one thing is a slipperly slope to banning another and another, until nothing is allowed anymore. Do not expect anyone to censor for you. Because of the tags system, you are responsible for your own reading experience.

People can create new chapters and sequels/fic series any time after they "complete" a story. So it's considered perfectly normal to subscribe, even to a finished story. You can even subscribe to the author instead just to cover your bases.

Do not repost stories or change the publishing date without an extremely good reason (like a complete top to bottom rewrite). It's an archive, not social media. No one cares what's the most recent, only what fits their tag needs.

Avoid deleting a story you wrote if you hate it - orphan it so others can still enjoy it, without it being connected to you anymore.

This is a creative fanfiction archive. No essays on your insights or theories please. There are other places for that.

I KNOW there's plenty more I missed but I'm trying to cover most of the basics that people seem to be struggling with.

I invite anyone to add to this, but please explain, don't berate.

[sephhaa]

How to Customize Your AO3 Writing HTML Format & More!

Okay! So you want to know how to customize your AO3 HTML writing format/how to navigate AO3 in general—well you’ve come to the right place! 

Here I’ll be addressing common errors that happen when navigating AO3 as both a reader and primarily as a writer. I’ll also be giving out some great tips and tricks on navigating AO3—especially when it comes to customizing your AO3 writing. I’m mainly making this because when I was trying to simply publish my stories on AO3 with indentation on my writing format; it was such a HASSLE. Especially going through countless blogs that were really freakin’ old and youtube videos that weren’t at all helpful and/or very confusing. Hopefully today I’ll be able to help you try and alleviate that confusion. 

I’m also going to make a youtube video on this in the near future as well as my tumblr guide( if you want to learn how to customize your Tumblr blog(theme, linking things on your bio, navigating certain functions) go ahead click here.

Alright! So let’s say you already have your chapter ready and prepped to be pasted onto the HTML writing format. Here are a few things you need to know before pasting that long written chapter onto the HTML format.

If you have a bunch of indentation on your chapter and go ahead and paste that onto AO3 HTML format—it’d immediately remove all that indentation.

Indentation:

No Indentation:

This is going to happen no matter how much spacing you put in that text on HTML. It’s primarily because HTML is meant to be a bunch of code in between text. There is no code suggesting to create indentations on your text. So you might be asking yourself, well how do I create indentions Seph? Here is how:

^ here is my secret weapon hehe~

Now, before I came across this holy grail of a website(after going through long hours of searching through youtube videos and articles etc) I was manually typing out all of my code onto my stories. It was literal hell(especially because I write very LONG chapters(20k-60k) so I had to physically scroll through my own writing to put code in between text that sometimes didn’t even work when I finally published my story/chapter. The website I’m going to link to you—it’s a website where you paste your work onto the google doc and it’d put the code in FOR YOU. So you don’t have to sit there for hours implementing your own code for indentations, bold text, etc. Here’s how to use the website:

Website link: https://docs.google.com/document/d/19eZnBQ4989Dr17v2ODFgE8QWAo9Oahi4USDNS3hOSvM/copy (as far as I know this website doesn’t have a name but imma just call it the HTML holy grail lolll)

* You’re going to click, “make copy.”

Make sure before you’re clicking, “make copy,” that the gmail you’re signed into is the same one your browser is signed into. So when you go through the process of selecting a google account to sign into—you don’t select a different gmail. If you don’t write your stuff on google docs and for example—use Word—just copy your writing from your Word document and paste it into the website’s google doc. You’d just have to sign into an email anyway lol.

Now when you click, “Make copy,” it’d open to this page. This page has a bunch of instruction you don’t need to read. What you’re going to do is delete all of this text and paste your writing on it. To select all the text:

SHIFT+CMD+A (MAC)

SHIFT+ALT+A (Windows)

Then hit:

Delete (Mac)

Backspace (Windows)

Now that it’s empty, you’re going to go ahead and copy your story:

 SHIFT+CMD+A  & then CMD + C  (MAC)

 SHIFT+ALT+A  & then ALT + C (Windows)

and paste it to this document.

Now it’s going to look very similar to your own google docs page where you copied your writing from. What you’re going to do next, is click/look for the text that says, “Post to AO3″ which can be found on taskbar above the writing functions next to, “Help.” 

When you click this, it’d ask you two things:

and:

Obviously, we want to select, “Prepare for pasting into HTML Editor.” Click that and it’d immediately start running. It will ask you to sign into a google account as well:

Click continue (this is where it’d ask you to sign into a google account):

Here choose your gmail account (for obvious reasons I won’t be showing my email lol):

It’d ask for permission, select— “Allow” below.

It’d immediately run the script and it should look like this:

Everything highlighted in blue is your code. This coding will make your indentations for you as well as make the coding for bold text, italic text, so on and so forth. 

Now, you’re going to copy all of this text:

SHIFT+CMD+A :then: CMD + C (MAC)

SHIFT+ALT+A :then: ALT + C (Windows)

and paste it into your HTML editor on AO3 (ofc, delete all the text already on your ao3 editor):

Now all of your writing should look like this—all code and text. 

Keep in mind, when you click, “Preview” your indentations/italics/bold text won’t appear. Idk why it doesn’t (ao3 is just wack like that) but when you publish your indentations/bold text/italics, text WILL appear. I guarantee it.

Alright so adding tags/editing your work is very simple:

Here is where you’re going to tag all of your work. As you can see, you have a lot of options:

Here is where you start rating your fic. It runs from Not Rated to Explicit. This is primarily to let readers know what type of fic they’re reading before actually clicking on it. It lets younger audiences know not to click it if it’s too mature or too explicit. This also makes it easier for readers to search up stories under whichever rating you choose.

Now the Archive warnings are just extra EXTRA warnings that are more specific. So if your story falls under any of these specific warning tags go ahead and put them—you can also choose not to use the warnings.

The fandom tag is pretty self-explanatory. If you’re confused then you clearly don’t know what AO3 is LOLL. Ao3 is commonly known as a fanfiction site where people will upload fanfics in relation to the fandom they’re writing for. So let’s say I made a fanfic for the anime Death Note, I would type, “Death Note” onto the fandom tag:

Now the categories tag is very self-explanatory as well, choose the tag pertaining to the relationship of your main characters. For example:

I’m going to use Death Note as my example: both of my main characters and/or ship is L/Light Yagami depending on how both characters identify their genders, in this case both characters identify as male in my fanfic. I would choose the “M/M,” tag. Another example:

If I wrote a BTS fanfic and it’s a x-reader X Park Jimin fic, the x-reader for my fic identifies as female, while Park Jimin identifies as a male in my fanfic so I would choose the “F/M” tag. 

If the fanfic you wrote has characters that are nonbinary for example, you can choose the “other” tag. 

The trend here is knowing what your characters identify as in your fanfic and applying that tag here.

The relationships tag is where you’d put the main ship tag. So again:

If I wrote a Death Note fanfic, and my main romantic pairing or sexual pairing was L/Light Yagami I’ll type that pairing onto the bar and depending on how popular that ship is, it’d pop up for you.

The characters tag is where you’d put all of your characters by name onto the bar. So going back to the Death Note example, I would put L, Light Yagami, and Misa Aname as my characters. You also have the option to add OC characters as a tag (OC—Original characters.)

Additional tags is just that—additional tags. Here is where you’d list specific tags/concepts pertaining to your fanfic. So my tag list will look something like this:

*Gore

*Violence

*Explicit Sexual Content

*Fluff

etc.

Here is where authors commonly put a bunch of random thoughts/writing. You have to keep in mind—if you want to write your thoughts, for example, “L totally rims Light cuz we all know Light is king of the bottoms” you can’t make your thoughts EXTREMELY long. If your thoughts end up being very long—ao3 won’t let you publish your fanfic unless you fix the tags. 

Onwards!

Now, here is where you’re going to put your story title, summary, add any co-creators, beginning notes and end notes. All very self-explanatory. Though, I will come back to beginning notes/endnotes later.

Here is all the extra stuff that I don’t really find a lot of authors using. The only one that has a lot of relevance is the “Language” tag which is very important for obvious reasons. Though the small list of tags/buttons to click on—hold some value. If you have a fanfic that is a series, as an example, you can select this box. If you have a fanfic that has multiple chapters, you’d check off the mark that says “this work has multiple chapters.” When you click this, it’d ask you how many chapters. If you don’t know how long your fic will be, you can simply put a question mark. If you selected the option where your fanfic is part of a series, it’d ask you from what series in your works and/or let you make a new series (if your first work is the first book to said series.) The last option, “Set a different publication date,” is an interesting feature on ao3. This feature lets you prep your works in advance and if you know what exact date you plan on publishing your fanfic, you can put an exact date on that fic for when you want to publish it. 

Now work skins, or, “Skins,” is a feature I don’t find a whole lot of people using. I had ended up using it because again—I wanted to create indentations to my work on a HTML format and upon some research I found that someone recommended to use skins and apply them to your work to create those indentations. 

You may be asking yourself, “What is a skin/work skin?” 

A work skin/skin is a body of code you can customize in a separate window. I don’t know the exact details on how to successfully make this code since I forgot how to properly do it (also I mainly don’t want to go into extreme detail how to make a work skin lol) this work skin can be applied to your writing and modify it in a way where you don’t have to manually add certain features. For example:

I wanted to make indentations for my fanfic on the HTML format. At first I used a work skin with code to do the indentation for me:

Here’s a link where you could learn how to do that: work skin indentation

The issue I found when creating this work skin and applying it to my writing, it made it look really wonky. Now I’m sure you can go ahead and change the settings to the work skin in terms of sizing/spacing etc. But to be honest, that sounds like a lot of work I don’t wanna be doing. If you find yourself successfully using work skins (and you know your way around advance coding) by all means, use work skins to your advantage. As far as I know, work skins also have different functions but I do not know those exact functions. I have the holy grail google docs to make indentations/coding for me lol. Moving on!

Last but not least, we have the privacy section where you’d obviously make your selections based on your preferences. Registered users are users who have actual ao3 accounts. Guests are users who don’t have ao3 accounts. Pretty self-explanatory. You can choose where you want a specific audience to read your fics, register users or guests. Or choose both. Or none at all. 

START NOTES/ENDNOTES:

Remember how I mentioned that I would be coming back to beginning notes/endnotes? Here’s why:

Let’s say you successfully publish your fanfic and it’s a multi chapter fic. A common problem I found myself having and A LOT of other people, when you have multiple chapters and you add endnotes to a specific chapter, your first chapter endnotes appear on that latest chapter you’ve created different endnotes for.

Let me make this clearer:

Let’s say my fic is 10 chapters. In the very first chapter, I added specific endnotes that look like this:

The text: “Leave a comment if you enjoyed the first chapter! Chat with me on my <a href="https://sephhaa.tumblr.com/" rel="nofollow">tumblr</a> Chat with me on my <a href="https://twitter.com/Sephhaa" rel="nofollow">Twitter!</a>” <— this is my endnotes I put for my first chapter.

Now if I go ahead to check my chapters outside of the editor page and then check my latest chapter (in this case is chapter 10):

Both my endnotes for that chapter (chapter 10) and my endnotes for the very first chapter appear on my 10th chapter when only my endnotes for, specifically, chapter 10—should be the only one that readers SHOULD see. My readers should only be seeing chapter 10 endnotes. NOT chapter 10 endnotes AND chapter 1′s notes. 

Now you may be asking yourself, “Well, how do I get rid of my first chapter notes on my chapter 10 endnotes? When I go to the editor page, to chapter 10, my endnotes look fine and I don’t see my first chapter endnotes there?” Here is how you get rid of them:

Now, I want you to pay attention to this screenshot. This is a screenshot of my ao3 editor page for my latest fic, “IMPOSTERS.” The reason why I want you to pay attention to this screenshot because I want you to notice a very alarming detail we all gloss over.

We are in the, “Edit Work” page. We are NOT on chapter 1. 

Let me break this down:

You know how your first chapter’s endnotes keep appearing on your latest chapters? Yeah, that’s because they’re appearing on every other chapter because you’ve pasted your first chapter’s endnotes on the, “Edit Work” editor page instead of putting your endnotes to chapter 1 and ONLY chapter one. 

What you’re going to do is scroll down to your endnotes

*Copy them if you want

*DELETE! the endnotes on the, “Edit Work” page by selecting this little window:

*Make sure to un-click the little blue check mark so it deletes the endnotes.

Go over to your first chapter by selecting the chapter number on the above taskbar:

*Scroll down to your endnotes

*Paste those endnotes you copied in the endnotes box (now these notes will only appear on chapter 1)

And BOOM! No more first chapter endnotes to your latest chapter endnotes:

Keep in mind: what commonly happens is if you see your first chapter endnotes and then you go and publish chapter 6, just know that if you had written notes in the editor page instead of the chapter, will now naturally move on to the next chapter until another update —it’s because your first chapter endnotes will move onto the latest chapter you post. Those first chapter endnotes won’t be applied to every single chapter of yours. 

HITS/KUDOS/COMMENTS:

Now, Hits, Kudos and especially comments are very self-explanatory but here are some things I really do love about each feature:

HITS:

Hits are something I really do enjoy about ao3. Main reason being it’s so different compared to every other writing platform for example—Wattpad.

Now I’ve been, up until recently, on Wattpad for 8 years, I started as an original novel writer and then transferred into fic writing (which is hilarious cuz a lot of writers start as the very opposite.) 

In saying that, Wattpad is famously known for clicking and rising the amount of views/reads on a story based on the amount of clicks you give that story. What I didn’t like, even as the writer to my own work, if I click my own stories—Wattpad would count those clicks and mark them as reads. So whenever I edit or check my own work, my reads would go up simply by me—as the author— clicking my own story/chapters. It would be extremely hard to know who was actually reading my story and how many of those reads were actually me just clicking my story. 

AO3 doesn’t do this. Since you are the author of that fanfic, it doesn’t count you as a reader when clicking your own story. 

This is super great and it just gives me an idea of how many people actually went to give my fic a hit.

KUDOS:

Kudos is a great function and I like it a lot because ao3 doesn’t have the option where people can dislike a fic. Ao3 and many writing sites don’t have a “liking” system like Instagram and Facebook. And that’s mainly because ao3 is NOT a social platform. You cannot make social posts on ao3 and while it’d be nice to notify my readers about x, y and z you can just link your social platforms in your end notes. Which is something I’ll get into in a second.

COMMENTS:

Comments are just that, comments. A good feature on ao3 tho is, you as the author can filter comments. I see authors, unfortunately get a lot of hate for x and y ship and/or concept. It happens a lot and it’s complete BS—especially when authors end up orphaning said story so they can get a little peace of mind. 

Ao3 has a pretty good filtering system where you can choose to allow certain comments underneath the story/chapters. The only downside to this, you as the author have to manually read through all these comments (which are commonly hate comments) and it can put a mental toll on you. Ao3 has yet to figure out a way where we can block certain users so they won’t be able to comment/read your fic. So if you are someone who has recently came out with a fic and you are receiving some kind of hate—maybe get a friend or close family member to log into your account and filter your comments for you. Otherwise, you’d have to grow a backbone and can take the hate and filter through your own comments. 

In saying that, please please be aware to not take every comment personally and surround yourself with good people. What people say doesn’t matter as long as you were happy writing that chapter/pairing/concept. If it means you’d need a minute away from the internet or not check your inbox at all—both options are available to you and you as the writer don’t have an obligation to respond to hate if you don’t want to.  

LINKING YOUR SOCIAL MEDIA IN NOTES:

If you had came from my tumblr guide (which I highly recommend if you’re trying to navigate your tumblr) the coding used for adding links to your tumblr bio in that guide is extremely similar to the coding we will be using today in the AO3 beginning notes/endnotes:

Now here is my social media links in my endnotes. You can add social media links to both beginning notes and endnotes (I find they’re placed more commonly in the endnotes) the coding we will be focusing on is:

<a href=“

that is:

<a SPACE href= QUOTATION MARK ( “ ) 

(really familiar yeah? lollll shoutout to y’all who came from my tumblr guide)

Now, you’re going to want to type this out in your notes window, and then go grab a social link (I’ll just go ahead and use my Twitter social link) simply copy whichever social platform link you want to copy and paste it right after the quotation mark. It’d look a little something like this:

<a href=“https://twitter.com/Sephhaa” 

and end it with a quotation mark( “ ) again. 

Right after that we need to write more coding and that coding is:

ref=“no follow”

that is:

SPACE ref=QUOTATION MARK( “ ) no SPACE follow QUOTATION( “ )

So your link will now look a little something like this:

<a href=“https://twitter.com/Sephhaa” ref=“no follow”

Now more coding, but this time, we need some type of text so it just doesn’t look like some long ass link in your notes. Here is the code we’re going to use:

>  - beginning

</a> - end

that is:

(start) > TEXT </a> (end)

(my text in this case is going to be “>Twitter!</a>”)

(together ofc, for the sake of the example I’m spacing it) Your link should look something like this:

<a href=“https://twitter.com/Sephhaa” ref=“no follow”>Twitter!</a>

Now you can do this with every social media you have to convert it into a link inside your notes/endnotes. 

You can tell whether it worked or not if it’s underlined and highlighted. 

ADDING IMAGES TO YOUR HTML FORMAT:

Alright! Adding images to your fic is great! Especially if you want to feature some fanart and you want everyone to see it etc. I personally use this feature to add text dividers. Text dividers is what separates my text, for example, if I’m going from one POV to another—I can add a text divider. I’m going to teach you how to add images to your HTML format since it’s a bit complex and takes a little trial and error—especially when it comes to sizing.

 Alright so the coding you’re going to use here is this:

<img src="

that is:

<img SPACE src= QUOTATION MARK ( “ )

After that we’re going to use a website that can convert our images into a link:

Postimages.org!: Website Link.

Here is where you can choose an image, the website will convert it and then you can copy the link of your image and paste it to your code:

After converting your image of choice—you’re going to copy the direct link.

Now, once you have copied the direct link you will go back to your coding and paste it after the quotation mark. It should look like this:

<img src=“https://i.postimg.cc/kGfmV3hQ/C6-CF33-E3-8-D9-E-4-E92-B63-F-1-EE2-B5-FA00-AF.jpg" alt="

and make sure you end it with another quotation mark. 

Here is the next set of coding:

alt=“

that is:

alt= QUOTATION MARK ( “ )

Then:

width=“100%” (or whatever number you want to put, here I will just put 100)

that is:

width= QUOTATION ( “ ) 100% QUOTATION MARK ( “ )

height=“50%” (or whatever number you want to put, here I will just put 50%)

that is: 

height= QUOTATION MARK ( “ ) 50% QUOTATION MARK ( “ )

Your code should now look like this:

<img src=“https://i.postimg.cc/kGfmV3hQ/C6-CF33-E3-8-D9-E-4-E92-B63-F-1-EE2-B5-FA00-AF.jpg"alt=“”width=“100%”height=“50%”

Now you’re going to end the code like this:

/> </p>

that is:

/> SPACE </p>

Now your official image link should look like this:

<img src=“https://i.postimg.cc/kGfmV3hQ/C6-CF33-E3-8-D9-E-4-E92-B63-F-1-EE2-B5-FA00-AF.jpg"alt=“width=“100%”height=“50%”/> </p> 

If you select “Preview,” in your HTML editor you can see your image in that window and you can adjust the sizing of the image as much as you like. My image looks something like this when I go to preview:

This sizing is pretty great for fanart sizes. You can use this to also make text dividers but in smaller sizes. Like this:

(I have to fix the spacing but you know what I’m trying to get at lollll)

my text dividers look like that and I use a sizing of 30% for both my width and height. You’d simply use the same steps as the first image. Just change the sizings on width and height and adjust it to a much smaller image so it can appear as a text divider. These images are also set to “center” immediately. I don’t know the the coding to make images not centered(if you want your image on the right/left sides) but if I find them all add them to this guide. 

Now I don’t really have a whole lot of tips and tricks but some tips I can give you if you are someone trying to gain some attention to your story.

1). Within your fandom pay attention to which fanfic gets the most hits and look at their concepts/tags. Now I pride myself on originality and you should too but sometimes just seeing what tags/concepts ppl use can give you an idea of what readers are trying to read. 

I find that in the VLD fandom, the top grossing ship is Klance therefore if I make a fic with them as my main ship, I know I can except some hits. Ships alone can make readers click on your stories. If you write an uncommon ship, it’s likely you won’t really get a lot of hits but honestly you should write for your own enjoyment and not for the hits. This is coming from a person who makes fanfics that I MYSELF want to read and anyone else reading it is reading my own indulgence lmaoooo. 

2). Look at concepts. 

Think of yourself as a reader and not a writer when looking at concepts. What are concepts YOU seek out. This could be anything from smut to explicit content. To enemies to lovers, to murder and violence. Fantasy AUs and Touch of Life AUs. Me personally—I always seek out stories that have explicit content, primarily smut cuz I know if the story has smut sometimes the story is written to my unhealthy standards of mature content/explicit content. I also look for uncommon concepts, violence, and my favorite concept is anything with crime.

Those are my preferences as a reader and if you are a writer and writing content that you yourself would like to see in a fanfic, there’s a chance other people like those same concepts too. If you don’t know what concepts you’d like to write or what concepts are out there—look at your favorite fic writers and what concepts they write as a reference. You can also just sit yourself down, in front of a google doc, and think about a fanfic you would like to scroll by and think, “OOO That’s def something I wanna read/add to my bookmarks.” 

3). Now, I don’t use this tip/trick that often (cuz again, I don’t really care THAT much about hits/kudos etc.) but it is daunting when you put so much time in a fic and it’s not getting as much hits/kudos as you thought it would. If you think it’s a fic worthy of some attention and you’d like to get your name out there more than use this tip/trick:

AO3 functions in a way where if you publish a fanfic to your designated fandom, it’d appear on the front page of that fandom tag. This is where readers will scroll through and find fanfics they want to read. Since there is so many people who publish their fics daily everywhere in the world—your fic won’t stay on the front page for a long time. Unless it’s a fic with A LOT of hits (I only really see this in the BTS fandom tag, all stories with thousands of hits are on that front page lol) So here is a little secret way to keep your fic on the front page for a much longer time:

Go to your latest chapter on any of your stories or any story in general. 

In order to get your story on the front page again, you’d need to copy everything in this chapter. I’m talking about summary, notes, and the entire written chapter. I suggest separating your chapter summary/notes in one google doc and the chapter text in the work section in a different google doc. Mainly cuz it’s easier to use the

SHIFT+CMD+A (MAC)

SHIFT+ALT+A (Windows)

keys. So go ahead and copy everything, paste them to their separate google docs and delete that entire chapter.

Yes. You heard me. Delete the chapter.

It physically hurts me to do this, especially if something goes wrong. Good thing I keep a copy of all my work—AND YOU SHOULD TOO WTH. 

Anyway, go ahead and delete the chapter and then go ahead to your story Edit Work and add a new chapter where you’d be re-publishing that specific chapter.

Step 1: Saving Chap Summary/Notes

Step Two: Saving Chapter 10:

Step 3: Deleting Chapter/Latest Chapter on AO3:

(As you can see above, I only have 9 chapters when originally I had 10)

Step 4: Re-Publication:

Step 5: Publication/Post: 

You can also take your time and preview it to see if everything looks good.

As you can see my chapter is posted and it looks good! Now if you click on your fandom tag underneath your fic title—it’d take you to the front page of the list of fics posted. You should be able to see your fic on the front page.

As you can see, my fic is the very first one on the list of fics and on the front page of my fandom fic tag. 

Some things to keep in mind: 

1). While this is extremely helpful in getting people to click on your fic since your fic is on the front page, the downside of using this tip/trick is the fact that the original date you published this chapter will change. So let’s say you published your fic in the summer of 2020 and have long since finished the story and decide to use this trick and republish your work again in order to get on the front page—the date will instead be 2021 on whatever season or month you decide to republish. It feels kind of weird to republish a chapter and/or story when you’ve finished it a long time ago and it will give an impression to readers that you have only JUST finished the book. Now, if the readers decide to follow your social media and know that you had actually finished the series a long ass time ago—then it’d be written off as you editing/revamping the chapter.

In a lot of cases, it’s just you editing/revamping a chapter in the case that the chapter didn’t upload right etc.

2). Depending on your fandom: this tip/trick might not entirely work. While I’m in the VLD fandom and it’s fairly easy to appear on the front page again—I’m also in the BTS fandom and I find that the process is extremely different. While re-publishing my story in the VLD fandom tag I can easily get my story back on the front page—I cannot say the same for my BTS fandom tag primarily because BTS fics are not sought after by how recent fics have been published but by the amount of hits your fic has. The larger amount of hits you have on your BTS fics—the greater your chances are staying on the front page of the BTS fandom tag list. Since my BTS fic has a good amount of hits (499-500) I appeared on the front page but for a very short period of time. Sometimes that’s enough to garner the attention of 1 or 2 readers. And that’s enough for me.

3). Again, I don’t use this tip/trick often (mostly a trick honestly lol it kinda feels like cheating the system a bit) and you should use this sparingly. Not so much to NOT give your fics the attention you want them to have but on your mental health. Numbers are numbers at the end of the day and it matters more to actually like the stories you write and reach out to a few people instead of thousands upon thousands who probably don’t even interact with you as an author. Start small and build your way up. It’s more genuine that way and you can learn how to maneuver things smoothly when you start off small. That and you have more room to make mistakes and get the chance to learn from them instead of receiving hate for them early on.

Welp! That is all for my AO3 guide. I’m sure I’ll come across another tip or trick or SOMETHING and add it here lolll. I’m still fairly new on ao3 (in terms of publishing my own work) and I’m bound to run into errors etc. But I hope this was helpful for you. I really wish there was a guide like this one (updated to at least 2019 or something cuz LORD all the articles/blogs I came across were old as shit and I didn’t even know if their tips/information were still relevant to the new ao3 format etc) So at least I did a service to younger Seph a year or two ago trying to navigate ao3. 

If you found this helpful, I also have a tumblr guide on how to customize/navigate tumblr and all things tumblr (in terms of adding links to your bio, how to make a masterlist etc) so if you’d like to see/read that, head on over here. I’ll also be making youtube videos on both these guides in the near future, just for the peeps that need that extra visual and who don’t want to read through this VERY long guide. 

If you like this or me, check out some of my work! I am a fanfic writer—I write both anime and BTS content ( primarily VLD(Voltron) fics but I do plan on writing something for Death Note & Inuyasha (cuz there isn’t enough SangoXMiroku content and that’s a crime in of itself) I also plan to write for the MHA fandom soon too! If that’s something you’re interested in head on over to my Masterlist.

Until my next guide!

[deityoftherain]

How to Embed Images and Links on AO3

Note: I have a site skin so the colors might look different. Just follow along with the red arrows! Also, this is a tutorial used on the computer, and I assume mobile posting would be different.

First, open archiveofourown.org and log in if you haven't already. If you don't have an AO3 account, sign up for one as soon as possible because it takes about a week for them to verify you and give you access to your new account.

Next, select "Post" in the top right hand corner like you would typically. Set up everything you desire as you normally would until you reach "Work Text*".

Note: If you need further help, I have an AO3 Tag Guide, a Story Title Guide, and a List of Random AO3 Shortcuts for your convenience! I also have a Foundations Writing Lesson post for any beginners or for people who would appreciate a review <333

Once there, click on "Rich Text" in the top right of that section, and then select the image icon or the link icon, depending on which you are intending to make.

Note: Check under the cut for more in-depth instructions slash a continuation of this guide! There is an Image Icon Route and a Link Icon Route.

Image Icon Route

Once you click on the Image Icon, the screen similar to below should pop-up:

*Link Icon Route detour start here

The source is the link to the image you're wanting to add to your work. AO3 doesn't host images itself, but you can use an image hosting site such as postimages.org or even Tumblr itself. If you want to use Tumblr, post a draft with the desired image or locate a post with the desired image. Once you've done that, right click the desired image and Open Image in New Tab (or whatever your computer's equivalent is).

You should have a tab open that starts with "https://64.media.tumblr.com" followed by a bunch of numbers and letters. I want you to copy that link and post it in the source box.

*Link Icon Route detour ends here

Now that the image link is in place, adjust your Width/Height boxes if desired. Feel free to add an image description as well. For best result, I suggest doing 100% in the Width box with nothing in Height, but this is ultimately a personal decision. Feel free to mess around with the proportions using the work drafts and find what's best for you!

If you prefer, you can also use < img src="LINK" alt="IMAGE DESCRIPTION" width="100%" align="center" /> aka < + img src="https://64.media.tumblr.com/0e3d1827f755eae4c79e605a8e73a44b/f65ab99ee3c9bf64-a8/s1280x1920/8608529567963545a061989b32a1d4541272ef51.jpg" alt="" width="100%" align="center" /> for this example (*excluding the plus sign at the start) to insert an image using HTML instead of Rich Text. It'll look like this:

It is always a good idea to double-check and confirm that everything is how you want it. Previewing your work also allows you to create a draft.

If you're unhappy with something, edit the work to fix it! If you're happy with how everything looks, go ahead and post it! You're finished here! You've successfully posted a work with an image embedded! Well done; good job :D

Link Icon Route

Once you click on the Link Icon, the screen similar to below should pop-up:

Go copy (Control+C or Command+C) the link to whatever it is you want to insert into the body of the work.

Note: If you're wanting to link specifically to an image and not a post containing that image, scroll up to the link icon route detour colored purple.

Once you got that, paste (Control+V or Command+V) the link into the URL box. If you want something other than the link to display, change the text in the "Text to display" box.

Save your work, check the formatting and everything else like we did in the Image Icon Route section. If everything is how you want it, then congratulations! You have successfully added a link embedded to your work!

If you have any questions or comments, feel free to comment and I'll respond! If this guide was helpful to you, please like and reblog! I appreciate it <333

[starlightthemes]

THEME PACK: THE ARCHIVE

Styled after AO3, this pack includes a theme and matching pages, and was designed for writers and readers alike.

🖋️ Theme 11: Archive Of Your Own

Live preview | Static previews: index page, permalink | Code

Full-width posts in an AO3 work index page format

Sidebars with optional sections such as featured tags, updates, rules, progress bars, and more

Unlimited custom links (display on sidebar or in top navbar), plus several social links in the footer

Add a custom logo beside/replacing your avatar

Inbuilt tag filtering plugin by glenthemes

All fields editable directly in the Customize menu, no HTML required. See below the cut for a full guide

🖋️ Page 3: Archive Records

Preview | Code

A WIP page designed to resemble an AO3 work page

Add tags for ratings, warnings, fandoms, characters, and more, as well as statistics like start dates, word counts etc.

Spaces for summary, start and end notes, and the 'work' itself

🖋️ Page 4: Archivist

Preview | Code

A combined about/navigation page based on the AO3 profile page

Include user statistics or any data you'd like, plus a longer bio

Sidebar navigation with link sections - unlimited links and link groups

The theme and pages all include options for multiple color palettes (initially set to Default and Reversi), text styling (choice of Tumblr/Google fonts and casing options), and more. -

Each page includes instructions on how to edit it, and color/image variables have been gathered together to make customization easier. While not necessary, basic knowledge of HTML is helpful.

For help, check my codes guide, or feel free to send me an ask. Theme 11 customization guide and credits are under the cut.

Theme 11 customization

Regarding the simpler fields:

"Secondary title" refers to the title just above the posts, under the header and navigation. This defaults to "[Total posts] Works in [Username]" when the field is left empty.

"Filtered tags" takes a comma-separated list of tags, entered exactly as they'd be written in the Tumblr post editor but without the hashtag. E.g. the tags #politics, #red and blue, and #green would be entered as "politics, red and blue, green" (make sure there's spaces, and no comma after the last item!). The filtering plugin will then put a warning message over any posts with those tags, along with a button letting you show the post.

"[Section] title" act as the headers for the corresponding section, if provided. "Custom links title" defaults to "Pages" if nothing is entered, and is used when the custom links are displayed on the navbar.

"Featured tags" takes a comma-separated list of tags, in the same format as Filtered tags. This field will display links to those tags, along with the number of posts in that tag on your blog, in the left sidebar.

The Recent posts section displays the 5 most recently posted/reblogged posts on your entire blog, displaying in the left sidebar. If you enter a tag under "Recent posts tag", it'll instead display the 5 most recent posts in that tag on your blog. Only 1 tag is allowed.

Rules and FAQ

Both these sections work the same way. Each new item, a rule or a question, consists either of one statement, or a statement and some more text, usually as an answer or additional note. E.g. the screenshot below shows three rules, where the last one has more text in the dropdown.

To create an item, prefix it with <li> . To add more text, create a <li> item and add a [more] label underneath, then write your extra text after that. To illustrate, here's the Customize page code for the above:

Updates

This section is similar to Rules/FAQ, though it flips the order around. After each <li>, first list the date, then add the [label] marker, then add your actual update. Again, here's an example:

And here's the Customize page code that created that:

Toggles

This section displays checked/crossed-out items, and uses a simpler version of the formatting for the above sections. Use <li> for each new item, then add [on] or [off] at the end, depending on whether you want it checked or crossed off. Here's an example:

And here's the corresponding Customize code:

Progress bars

This section also uses <li> items, where each item has two parts: the text label, and the number(s) for the progress percentages, put inside square brackets like with the other sections. Here's an example (note how the top two use fraction values while the bottom one uses a percentage):

And here's the code that made these. In short, the format is <li> Text here [##/##], or <li> Text here [##%], where ## refers to any number.

Social links in footer

The footer links, aside from the email and personal website fields, take usernames or user IDs for various websites. Be sure to check you're not entering a username in a user ID field!

The Email address field takes a standard email in the format youremail@mailprovider.com and adds a link to let people mail that address.

The Personal website fields will generate a link in the footer's Follow section. Personal website name is the human-readable text label for the generated link, and Personal website URL is the URL that will open when the generated link is clicked. Make sure to add https:// to the start of the personal website URL so the generated link doesn't just redirect you to a different part of your blog.

Credits

Layout and design by Archive of Our Own

Style My Tooltips by malihu

Phosphor Icons

Expanded Tumblr localization and NPF photosets plugin by codematurgy

Custom audio posts by annasthms

Tag filtering by glenthemes

Palette toggle by eggdesign

Scroll to top by Fabian Lins

[ri-afan]

Honestly it was a post like this that made me realise that those ✨ artistic ✨ line breaks were breaking the flow more than visually for some and made things inaccessible, so I took three seconds to find out how to insert a line break in ao3.

So to make things easier for people to add it in themselves when they see this and care about accessibility to their works, here is a picture of the rich text thing on ao3.

That button under the “B” for bold in this image that just looks like a large dash? That’s the line break button. Just click it and it will appear where your cursor is in the text box below.

I’d say ‘like magic’ but that’s just like normal code for formatting that you could probably see if you toggled over to the html side of this section, same for any of the other changing buttons.

Your artistic line breaks deter a large group of people from giving your story a shot. Is a fancy squiggle pattern worth turning people away? Because I’ve read some fantastic stories that have had weird line breaks, and since I was made aware of this issue it pops into my head every time.

Just… think on it. Should you be in need of it one day for whatever the reason, would you want your beloved works to become exasperating?

Man, it always sucks when I’m listening to a fic and the screen reader goes “doubleyou ach ay tee eye ess why oh you are eff ay vee oh are eye tee ee see oh ell oh are doubleyou ach ee are ee dee-”

And I pause it like what the fuck, then find my phone to look at the screen and I see “whatisyourfavoritecolorwhered-”

Like, bro, please, why would you do this?

Or when it starts going “EXEXEXEXEXEXEEEXEXEXEXEXEXEXEEXEXEXEXEXEXEXEXEXEXEXEXEXEXEXEXEX!!” Because somebody didn’t use the code for a line break. At least just make it one dash, please.

Like, it’s your fic and your writing it for free and that’s cool, so if you see this and you’re like, “mmmm, nah, still gonna do it my way” then that’s chill.

Just know that it’s really difficult for people with screen readers to read some of these fics. Me personally, when I find a fic that does this, I don’t give it a chance no matter how good it is.

[amphibianauthor]

⭐ I'd love to know more about the process behind the HTML for the phasmo fic! How did you come up with the idea to do 'invisible text'? (And anything else you want to share)

I'd love to share more about the coding undertaking that is Case File 8008135 co-written by the amazing @that-fall-guy, (Sidenote: It did an amazing directors commentary of the whole writing from it's perspective, I really appreciate how he broke down the fic (even if I am exposed a bit lol). We are both really really proud of the magic we were able to make in a very short 3 week timespan.

This got Very long, so see more commentary under the cut <3

Alright so a bit of background, before this fic, I had only dabbled a tiny bit with HTML in fic--Mainly through coding my choose your own adventure fic. However, I enjoyed writing that HTML elements so much that I had gone out of my way trying my best to collect literally every single HTML Ao3 reference guide I could.

Now when Fallguy suggested we do an Epistolary fic because we both shared a love of unconventional formats, it's like all of the puzzle pieces fell into place. I had the perfect skillset to add all of the HTML so long as I was determined, and it had the perfect skillset for audio editing, image editing and remarkable phasmophobia gamer skills to get the evidence photos. (Fun fact: I have never played phasmo at all. All of my knowledge comes from streams. I barely have touched minecraft myself even)

One of the first things we did was plan out an ambitious bulleted list of different types of evidence we could include in the case file. We came up with several classics almost instantly--Newspaper clippings about Sunny Meadows, Police Reports, Group Chat texts, Medical files, Photos with descriptions, Witness statements-- but also knowing exactly what I had guides to already was a big help in adding more of the unconventional formatting--email chains, Yelp reviews, Case closed stamp, Ghost hunter Certificate, Google search history. Some of the ideas that were suggested but we felt didn't fit correctly were using a Minecraft respawn button pop-up, an apocalypse game-mode trophy and an unfolding trifold letter for the HR complaint. I also at this point preemptively said I could maybe do both a youtube video layout and the Ghost text, but I was very uncertain if I would be able to pull off those elements (I'm so so glad I did though).

After making a game plan, we wasted no time writing all of our artifacts. One of the first things I wrote was the Dr's Biography's-- I wanted to establish a set of evil doctors that were both terrible but wholly at odds with one another. I gave Dr. Hels Knight an 'mad-scientist experiment' vibe and Dr. E.V. Ilxisuma a 'sterile-clean-keep-status-quo' vibe which Fallguy took and ran in terms of journals and Medical logs later on.

I decided we needed a receipt from Kwik Trip and Ghost hunting equipment next. (Ironically these were some of the hardest things for me to code and make authentic despite how small they are. I spent a good few hours googling kwik trip receipts to find the formatting, and then I had to eventually format them myself. )

I made the Police Report descriptions of artifacts, HR complaints and photo descriptions next. I had fun including different folks Impulse has played phasmo with, and Fallguy was so amazingly kind to grab phasmo screenshots for photo descriptions I had written.

I did a majority of the Group Chat texts and Radio Transcripts. I am so so lucky Skizz has established nicknames for all of the GIGGS crew that make it both really easy to tell who's speaking and also makes the group chats feel like a personal group chat. The reason made the phone that was found be Skizz's is also for this reason--so I could use 'Me' instead of making up a nickname. Close observers will notice that he does have a nickname in chat of 'Sir Skizz' in the top text that says who's in the group chat.

Our detectives were a very last minute addition in terms of plot surprisingly. We both planned to have a group of police investigators on the case from the beginning, but we were kind of under the idea that we were going to use either Hermits or other mcyts to fill those roles. (You can kind of still see the remnants of this in the fact that Sparklez is the head Police Chief or that Cub is the evidence collector for specific items.) However as the transcripts started being written, I quickly realized I needed two OC characters that were stupid(/pos) in order to make the plot work. I literally wrote them as A: and B: for most of their lines in the radio transcripts. I am very thankful for Fallguy for giving them actual names referencing proper detective themed media.

The whole thing took me over 12 hours to code (there was a day where I coded it for 8 hours straight), and fallguy graciously helped me with coding a bunch of the repetitive radio transcripts so I could work on other parts of the fic. By itself the workskin is over 3k words, and I had 2 different docs for coding the fic (one for just the workskin and comments on how to use (aka the HTML formatting) and the other as a pastebin for formatting the fic. The pastebin page is very hard to actually read with how much formatting is there.

I am very lucky that Fallguy did the hard work of organizing where each artifact would fit into each other to make the best possible viewing experience. I was also very lucky to have so many tutorials to follow so I wasn't coding this from scratch. (This fic would not be coded if I had to create my own code, I am still very much a HTML novice in my eyes.)

Okay instead of commenting on code specifically in chronological order, I'm going to section them based on how easy they were to code or not.

First, the easiest: Glowing Text-- Are you surprised? Cause I certainly was. Glowing text was one of the Last things I added into the fic, (We had small amounts of lines we 100% wanted to include but a majority of it was me winging what I wanted them to say specifically. I was extra nervous when I was tackling these because the guide I was using from InfinitysWraith is an absolute complex masterclass in HTML and I very much was not confident in getting it to work. I should make a mini-tutorial on how to do it, because it's very very easy to use. The Ghost glowing text actually has extra effects of changing fonts when hovered so that's why it shifts a bit when you look at it. My favorite line I think I included was the ghost text of Skizz saying "Eat 'em up G!" when Grian was sniffing out the officers lies or "If police were called every time I screamed like that I'd be answering the door in my birthday suit" found in Scott's witness statement. "What was that about sitting on the bone, Dop?" is also a pretty good one.

Second: Therapy Journal and Newspaper Articles Surprisingly easy copy from the source code, only real difficulty was finding extra font families to use for back up cursive text.

Third: Appearing Images: TBH Fallguy's job of editing these images was harder than putting them in, since InfinitysWraith's tutorial was fairly interesting to use, even if the spinning page was hard to look at to grab the CSS from.

Fourth: Group Text. The tutorial I used is an amazing tutorial and already was coded in a way that was good for both light and dark backgrounds. I highly highly recommend using irrationalpie's Group chat workskin.

Fifth: Youtube Tutorial: Another surprise, 1984's tutorial is so easy to follow, that even though it was the LAST thing I added code wise, It was actually fairly easy.

Sixth: Yelp Skin and Google Searches: Okay these were relatively easy to code with their respective tutorials, however the <li> code that they use is a PAIN cause if you update the fic draft it will break randomly. I literally had to go fix the Yelp skin today and every single time I edit the work I have to double check they don't break on me. I did have to strip the backgrounds from both of these tutorials in order to make them site-skin independent.

Seventh: Box coding: Aka Receipts, Case Closed Stamp, and Ghost Hunting Certificate. So These are some of the only things I coded from mostly scratch. I did have tutorial help instructing me what specific things did, but I made these. I am quite proud of them.

Eighth: Radio Transcripts. Now we are getting into my truly made me frustrated territory. These are coded very well, and the tutorial walkthrough was very thorough. I did strip the background color of them from the CSS to make them compatible with most site skins. Honestly my main gripe with these is just How Much code lines you need for every line. Here I'll include a screenshot to show what I mean:

^^ THIS IS A SINGLE MESSAGE. The HTML it takes to make 1 response for a transcript. Luckily Fallguy was able to help me finish these since it's very easy to copy and paste the code with slight changes, it's just very chunky.

Ninth: Police Report. Tables my beloathed <3. Also could not get the dates and signatures to not overlap strangely to save my life. I did add my own custom code for signature fonts on these, and stripped the background of the report to make it site-skin independent.

Tenth: Emails. I could not get the CSS on emails to work easily and it genuinely frustrated me so much. I originally wanted to combine 2 different tutorials to make a hybrid with the specific features I wanted, but I ended up ditching that idea quickly in favor of using DemigodofAgni's workskin and stripping the background from it, as well as the "reply all" button. The formatting with replies also gave me a bunch of trouble when putting them in. When in doubt, I just pasted more and more </div> and </span> until it stopped breaking other things in the document after it.

Coding this as a whole was an experience, and I'm so so glad I was able to include the ghost text and appearing images because they truly make this fic. I think the only thing I would want to change is making the fact that Grian is guessing the ghost to respawn Imp & Skizz a tiny bit more clear, but honestly that's a very small nitpick. When we finished the coding of it, I felt so accomplished, like I had truly conquered a beast and won. Again I could not have done any of this without Fallguy working with me--tyr is such an incredible writer and has brilliant ideas. Its ideas of how to organize the fic, of where to place our world, of the history and background of Sunny Meadows allowed this piece to truly be a work of art. To pull back the curtain a bit, tyr wrote the entire 1.6k of Pix III's Asylum closing article in a SINGLE night!

And thank you all so much for the amazing comments and feedback on this fic. Every time I see a comment for the ghost text or HTML or excitement of GIGGS crew supremacy, I feel warm. And if you'd like to here Fallguy's thoughts on this piece, please check out his commentary here!

[house-of-laminations]

A not-so-quick how-to for Ao3 work skins

Ao3 has some pretty powerful customization tools at your disposal - if you know how to use them. Did you know this entire time you could change your text colors, size, background colors, outlines, underlines, overlines, and even fonts of your works? It's fairly easy to do - you only need a little knowledge about markup languages to get started. The way this is done is through classes and the clever application of some simple CSS. Though I've written this guide around using my Obey Me coloring and work skin, the principles are applicable across anything you may want to do with your Ao3 styling.

I've done all the heavy lifting this time around, and have actually created a very, very simple skin that you may want for the purposes of your Obey Me fic including:

Unique colors for each character (sticking to WCAG 1:3 minimum contrast ratio for accessibility)

Heading font and size styling (separate from character colors)

Styled 'pullquotes' for written letters/passages/quotes (at 75% size)

Make sure to keep checking back for updates - I'll put word out here on my tumblr whenever I update, but I've also created a codepen (work skin CSS found in the CSS tab) with the latest version of the skin that you can use to play around in.

Just a heads up before you start: there is a bit of a learning curve, but I have tried to make the explanation as simple as possible, and hopefully provide enough tools and knowledge that you can run with what I've given you and start creating your own styles.

1. Markup: The Basics

I'm sorry - no matter how simple I try to make this work skin, you're going to need at least a little understanding of what markup languages are and how they work. But don't fret: I've had a few years experience now teaching this to absolute beginners so hopefully by the end of this tutorial you'll be feeling like a real Hackerman.

So what is Markup? A tl;dr

Markup is a set of instructions used to tell a program (in this case your internet browser) how something should behave. HTML stands for Hypertext Markup Language and is likely the markup language you'll encounter most often. Ordinary text like you would type in a word document is meaningless to a computer browser - it doesn't know how to read. You need to talk to it in a language it understands so that it can translate your wonderful words into something that appears in your browser. This is done through the use of 'elements'.

Like how you know "words captured in these quotation marks" are quotes (or text written in parentheses is related to but non-essential to the main body), elements are essentially markers that indicate how a thing should be read. In HTML, these elements are denoted through angular brackets <> containing the necessary info that your browser understands. These often consist of an opening tag <[element type]>with content within, followed by a closing tag</[element type> denoted through the use of the "/" slash. Every element that has been opened must always be closed. Common tags include:

<p></p> for paragraphs

<em></em> for emphasis (typically displayed as italic)

<strong></strong> for strong (typically displayed as bold)

<h1></h1> for your highest headline (and subsequent-level headings use 2-6)

<div></div> for generic sections or blocks

<span></span> for specific selections of text.

<a></a> for anchors (links)

<img> containing images <- this one doesn't have closing tags because it's special

and more!

Everything you see on the internet rests within tags like these. You don't see them because they're only for your browser's eyes. Even your fics are formatted with this - though Ao3 does it automatically. You can freely switch between Markup (HTML) and Rich Text Formatting up in the top right corner.

Attributes

Attributes are additional information you can add to an element. Some attributes are essential, like a href (hyperlink reference) for anchor elements. Some are additional information used to differentiate between different identical elements like a class or id. It's this latter, non-essential attribute we're going to be utilizing for our work skins.

Once you have your fic in Ao3, make sure to switch over to the html editor. From there, you are going to find the element that you want to change the look of, and we're going to add a class.

We do this by finding the open tag of an element. That will probably be a <p>. Inside those angular brackets, after the name of the element, we are going to type class=""

What we've done there is create a field for the class, but we haven't actually given the element a class yet.

It's always a good idea to name classes that describe the content, not what you want it to look like. You could change your mind down the line, but then you're stuck with a class called red that's really changing the color to blue. So rather than calling a class "gold", you might instead give it the name "Mammon" as it indicates when Mammon is speaking. This is known as Semantic markup.

Here's a few things you need to know about classes:

Class names cannot contain spaces. We use spaces to delineate new classes in the same element (like commas to separate tags on tumblr).

You can use as many classes as you want, as many times as you want.

They are case-sensitive.

You can add classes to all most html elements. That means that you don't have to just make entire paragraphs a particular style.

I have already specified several classes in my existing work skin. These are [Luci Mammon Levi Satan Asmo Beel Belphie Dia Barb Luke Sol Sim Heading pullQuote] - remember that these are case-sensitive. Feel free to use any one of these, or use your own! Put your chosen class name between those quotation marks I had you make earlier like so!

These don't actually do anything just yet. For that, we need to now head on over into our work skin.

2. Introducing the work skin: CSS

Now that we hopefully have our heads wrapped around the basics of elements and classes, we can start using that to make things look interesting. CSS stands for Cascading Style Sheet. HTML gives the browser structure, CSS gives the browser style.

But first, we have to create a new work skin.

Go to your Ao3 Dashboard and up in the top left underneath "Profile" and "Preferences" you should see an option for Skins. It'll land land you in "site skins" by default, so make sure to click on My Work Skins. From here you can click on Create Work Skin in the top right corner.

In the "About" section, make sure Work Skin is selected, and give your new skin a title!

Feel free to also include a description for your own sake. Now. Onto the fun part!

Below the "About" section, you should see a box labelled CSS. In that box, feel free to copy+paste the styles below into that box:

#workskin .Luci { color: #0071ed;}

#workskin .Mammon { color: #e5a71c;}

#workskin .Levi { color: #e26600;}

#workskin .Satan { color: #00c117;}

#workskin .Asmo { color: #ff00bd;}

#workskin .Beel { color: #e80b00;}

#workskin .Belphie { color: #4f08b5;}

#workskin .Luke { color: #00c0ed;}

#workskin .Dia { color: #9b0000;}

#workskin .Barb { color: #007215;}

#workskin .Sim { color: #c1ac44;}

#workskin .Sol { color: #757575;}

#workskin .Heading { font-size: 1.25em;}

#workskin .pullQuote { text-align: center; font-size: 0.75em; display: block;}

This can also be found in the CSS section in this codepen. (disclaimer: tumblr may or may not mess with the line spacing when you copy things over. After you've copied, save your work skin and then reopen it in "edit" - Ao3 will automatically format your work so that it's nice and clean).

So what's actually happening here?

Let's read from left-to-right, top-to-bottom - because that's precisely what CSS does. Feel free to skip this part if you're not interested in creating your own styles and you're happy to just copy and paste existing work skins :)

#workskin .Luci { color: #0071ed; }

This first part here is what is called a "selector". Here, we're specifying what exactly we want to target in order to change its looks. Every character, including the spaces, symbols, and capitals matter.

#workskin .Luci { color: #0071ed; }

#workskin is specifying a unique ID within the HTML - one that encapsulates everything that you want to apply the work skin to - so basically your entire work. This is absolutely necessary in order for the work skin to actually function. We didn't create this ID in our HTML because Ao3 (will) create it for us automatically down the line.

#workskin .Luci { color: #0071ed; }

Following the work skin id, we have a space, a period, and then - hey! That's a class name! The space between the ID selector and the next part indicates we're looking for things inside this particular ID. Periods are used to indicate classes. When targeting a class, you use the period, followed by the class name. So if you're targeting your Levi class, you would write #workskin .Levi . If you were targeting a class that you created in your html, you would write #workskin .[classname] (removing the square brackets, of course).

#workskin .Luci { color: #0071ed; }

Now it's time for the fun stuff - the rules. Once we've targeted what we want to style with our selector, we use curly brackets to contain all the "rules" that we're using to make the browser appear a certain way.

#workskin .Luci { color: #0071ed; }

We start with our property - or what we want to change. In this case it's the text colour, denoted through 'color'. Yes. It's American spelling. I have no control over this. Find a simple list of css properties here! There's loads, but the ones that are probably of most use to you at this point are color, font-size, font-weight, text-align, text-decoration, and display. Make sure to put a colon after the property - that links us into the next step.

#workskin .Luci { color: #0071ed; }

Finally, we have our value - or what we're asking the property to do. In this case, we're changing the color, so the value is a hex color value. Color can also be denoted through rgb [written as rgb(0,0,0)]. Different properties will have different values. For example, text-align can have a value of left, right, or center (note the Americanized spelling again). If you click on the property in this list, it will tell you what values you can use!

You can have as many rules as you want in your selectors, as long as you end each of them with a semicolon. I cannot stress the semicolon enough. If your CSS isn't working - it's probably a missing semicolon. An example of multiple rules being used within one selector is in the pullquote styling:

#workskin .pullQuote { text-align: center; font-size: 0.75em; display: block; }

You can even write rules that override each other, though we try and avoid doing that. When this happens, your CSS will read from top-to-bottom, prioritizing the latest thing it has read (typically your bottom-most). There are exceptions to this, but that's not necessary for this guide.

So by this point you should have copied over the CSS I've written into your work skin, or perhaps tried your hand at making your own. This would be a good point to save.

3. With our Powers Combined

Right! So we have our work skin. We have our work formatted properly, resplendent with classes. Here's how we get these things talking to each other:

Once you've saved and closed your new work skin, open up or post the work you would like to apply the styling to. Down the bottom of the Associations section, there is an option to Select Work Skin. Ao3 already provides some work skins by default - Homestuck and Undertale - but you should be able to select your new work skin from this dropdown.

Now here's the magic. Time to check if this worked. Go through and make sure you've applied your classes to each of the elements you want to change the look of. These can be <p> elements, <em> elements, <strong> elements, or you can even make new, unique sections using <span>. Save your work as a draft and preview it - if you've done everything right, you should see the sections of text you've added classes to have changed in appearance!

A reminder that you can add multiple classes to one element: say for example you want to create section headings unique to each 'character', you can name both classes in the class field, separated by a space. See the example below:

And that's about it! You can use the same work skin for multiple works - just remember that you should be using the same class names if that's the case. If you create a new class in your html, make sure to go back to your work skin and make some rules for that class!

I've created this codepen that you can play in that is using all the same classes - it also has the work skin in the CSS which you're also very welcome to mess around with.

Ao3 itself has a great guide to using work skins, explaining things just like I did here. The Modzilla Developer Network is a great resource for learning more in-depth about html and css if you want to do weirder and wonderful-er things!

I hope this has been informative and useful! Best of luck using skins in your own fics! 💛

[lcb-oil]

Limbus Company Wiki Style for AO3

Note: This post contains spoilers (... can I call it that?) for Glimpsing a Certain Mirror World.

While I was writing this story, I wrote some in-game dialogue for an identity based on the text just to get into the spirit of what I was trying to capture.

Then I thought - what if I shared that in a bonus chapter, just for fun?

Then I thought even more that it kind of looked like an imaginary wiki page.

Then I had Carmen help me present a wiki page from another reality.

Seems like readers got as much of a kick out of it as I did writing it!

Now I'll show you how to style an AO3 page to look a little bit like the wonderful Limbus Company Wiki, too!

If a CSS and HTML snippet demonstration is all you need, grab them here:

🔗HTML (Inside your story)

🔗CSS (Inside a Work Skin, made on your dashboard)

Next, I'll go over everything step by step from the beginning.

Jump into the cut for the tutorial!

(Then show me your fan identity stories when you make some, okay?)

Step 1: Create a Work Skin

After logging in, go to your Dashboard.

Then click Skins

Then go to My Work Skins

Click Create Work Skin

Give it any name and description you like

Paste the following into the CSS text area:

🔗Pastebin Link for easy copy / paste

#workskin td, #workskin th { padding: 5px; border: 1px solid #810000; } #workskin td { color: white; background-color: #1e1e1e; vertical-align: middle; } #workskin td.title-column { width: 20%; text-align: center; } #workskin div.affiliation { font-size: small; } #workskin .userstuff p.carmen { color: red; }

I will explain what this means when we get to the next step so that you can tweak it if you wish. Think of this as your starter style.

Click Submit to save your skin

Step 2: Apply the Skin to Your Work

When creating or editing a work, you can set the work skin in the Associations section.

Click the dropdown, and you'll see whatever name you gave your work skin in the first step mixed in with the default ones provided by AO3.

Step 3: Format Your Story

You'll need to add HTML to your story to see any of the new styles applied.

I'll show you a few examples of how this is done.

Change the color of text

I used red text to indicate Carmen speaking through the author's note.

Here is the HTML I used in the Chapter Notes section to do this:

<p class="carmen">Could it be that you, too, wish to glimpse the mirror world these two envisioned?</p>

This creates a paragraph (p) with the carmen class applied.

If we look at the CSS from up above:

#workskin .userstuff p.carmen { color: red; }

The p.carmen section is called the selector. This tells the CSS that if there's a paragraph with the class of carmen, make it red!

You can copy this line to create classes with any name you wish for paragraphs so that you can have as many colors and effects at your disposal as you want.

Of course you can change the color from red to any other color you need, too.

Wiki Tables

This next part is a little bit more involved. I'm not sure if there's a better way to make a table on AO3 or not, but here's a snippet to get you started:

🔗Pastebin Link for easy copy / paste

<table> <tbody> <tr> <td class="title-column"> </td> <td> The child looked immensely frustrated, standing in the lobby of a most unique Fixer Office. </td> </tr> <tr> <td class="title-column"> <img src="your image URL here" alt="Sancho Story Portrait"> <div class="affiliation">Manchegan Office</div> <b>Sancho</b> </td> <td> We went over this just <em>yesterday</em> -- </td> </tr> </tbody> </table>

This creates a table (<table>) with two table rows (<tr>).

Each table row has two table cells (<td>).

The first cell in each row has the character image, affiliation, and name.

The class "affiliation" is defined in the style sheet to make that section of text just a bit smaller, like on the wiki:

#workskin div.affiliation { font-size: small; }

In the first example table row (<tr>) above, you can see that you can even leave it blank to allow for the narration portions of the story.

You'll need to copy the section between the <tr> and </tr> tags to create new rows for your table. Copy it once per line in your identity story and change the text and images inside as needed.

I highly suggest that you do this in a text editor on your own computer rather than on AO3, because it can quickly get overwhelming.

Just looking at this in AO3 is making me nervous 💦

(Fun side note, I originally spelled "Manchegan" incorrectly in my first draft all over that huge table... thank goodness for find and replace...)

Hosting Images

You'll see I left a section on the table template for "your image URL here".

You'll have to find a place to host your images on your own, because AO3 doesn't provide any image hosting...

I saw someone suggested https://imgbb.com/, so that's what I used. It seems to have held up so far.

Keep in mind if you link an image from Discord or Imgur, they could remove your image sometime in the future and then it will no longer appear properly in your story.

(Be sure to include an alt text in the image as shown - if the image can't be loaded some day in the future users will see that text instead so that they can understand what they're missing!)

Step 4: Adjust Away!

Once your work skin is applied and you have the right HTML classes in place, you can edit your Work Skin and see your story change, even if it is in your drafts.

You can use this to adjust other things in my CSS example, like colors and the padding in the table.

---

Have fun, and let me know if you have any questions!

“Would you care for some tea?” Yi Sang offered. The evening’s chill was somehow present, even inside his closed room. “Nay,” Don Quixote took in a sharp breath, “I was hoping that you might… assist me, with a look into thy mirror. For there is something that I have need to see.” Yi Sang creased his eyebrows. Unfortunately, this was exactly what he worried would occur. ——— In the aftermath of La Manchaland, Don Quixote asks Yi Sang for a favor. Yi Sang guides her through the process of glimpsing a certain mirror world.

Limbus Company leaves so much unsaid by not showing us what happens immediately after the end of a canto. But, that's a lot of opportunity space to play with in a story.

I've been working on this one for quite some time as I've always wanted to explore the dynamic between Don Quixote and Yi Sang, even though I find Yi Sang really tough to write for.

If you like mirror worlds and AUs, you might especially enjoy this one. I hope you like it! 🎠🪶

---

... Also, hmm, something strange seems to have happened with my upload?

This is a one shot story, but for some reason there's a second chapter? That's odd.

Well, if you check it out, I should note that it might look better on a PC or tablet than on a mobile phone -- though it will probably look ok either way.

[the--descension]

i would die for a "how to use html and css to format ao3" lesson from you 👀 no pressure but i'm genuinely in awe :)

Hello! So sorry it’s taken me ages to get to this. 

It's no pressure at all! I have tried to cover the basics of HTML/CSS on AO3 here, and instead of writing very extensively about the syntax which is very Google-able, I have tried to include little tips and tricks that have come in handy for me. 

This, by no means, is a complete guide but I hope it can get you started with HTML and CSS on AO3!

It got pretty long, so the answer’s below the cut.

Okay, so let’s start at the very beginning, shall we?

What is HTML and CSS?

Well, HTML is Hyper Text Markup Language and CSS is Cascading Style Sheets. 

But that is something that probably doesn’t help a lot, so to put it very simply, HTML provides the structure of a webpage while CSS does the styling, that is, fixing how and where the elements should exist, how to shape them, how to space them, all so that the webpage looks great.

Something to keep in mind is that all web pages can run only on HTML but the end result is not going to be something that’s nice to look at. In fact, without CSS, the page might not even make a lot of sense. Here, take a look at Tumblr itself with all CSS disabled (there’s a very useful extension called Web Developer that allows you to do this):

Not very nice to look at, but all the elements of the page are here only with the help of HTML.

And look, this is what the above section looks like with CSS enabled:

This was just a brief visual walkthrough to show what HTML and CSS really do, but let’s move on to HTML and CSS in the world of AO3.

Where does the HTML and CSS go on AO3?

The HTML part of the code is put into the text box when you post a new story/new chapter. You must have noticed the two options — Rich Text and HTML — and it’s important to have HTML selected for AO3 to identify the HTML tags that you’ll be using.

All your content goes into this textbox. Whatever text you may be writing, whatever images you may be hosting, whatever links you might want to add— everything goes here.

Now, for styling all the content that you’ve put into the textbox, you need CSS, and that happens through work skins. It’s super simple, and all you have to do is go to Skins on your AO3 panel and then to My Work Skins, and then create a new work skin where you can dump all of your CSS code.

Okay, so onward we go.

How to HTML and CSS?

I’m no expert in web design and my knowledge mostly comes from Coursera, one summer internship, one class in college, and extensive online searching. And, I’ll tell you this, the most I have learnt is from extensive online searching.

Because at the very heart of it, web design is not so much about understanding and applying concepts (as with other coding languages) but more about visualizing elements and testing them out. I must add that this is completely my opinion as a person who rather enjoys data structures and algorithms as compared to web dev, and I’m certain that seasoned web developers will disagree with my views here. 

Right, so the online searching. The best in the business when it comes to explaining HTML/CSS is www.w3schools.com. They have sample code, short and sweet explanations, and an online IDE to test your code. Really, it’s a win-win situation.

Alrighty, so now you know where to look for your HTML tags and CSS properties but how do you figure out which ones to use?

HTML Tags

I’ll talk about the HTML that’s required for coding on AO3 exclusively.

But before that— every HTML document has two main parts: the <head> and the <body>. But here on AO3, we only code the <body> which, as its name suggests, holds the content that’s going to appear on the browser. The <head> part is not required for AO3 work skins at all.

Okay, so how to code HTML on AO3? Well, your best friends are going to be the container tags such as <div> and <span>, and the paragraph tag <p>. What these tags do is they create areas on your browser — you can imagine them as small rectangles and squares — where you can put in your content via HTML, and then later style using CSS.

See this? The entire shaded area belongs to a <div> which is styled by a CSS class called “tumblr” (to keep things simple, we’ll only focus on CSS classes, and not id’s. It won’t really hamper developing a workskin in any way.)

This above belongs to a <p> that is styled by a CSS class “tumblrbody”. And, this <p> exists within the <div> mentioned above.

Here’s a <span> styled using the CSS class “tumblrtags”, which comes within the <div> and <p> we just discussed.

Basically, the idea is that the entire page will have to be divided into all these subsections, nested within each other if required, so that they can then be styled using CSS.

Other HTML tags that come in handy are the <a> and <img> tags.

The <a> or anchor tag is used to embed links. Want your reader to be led to a separate page while they’re reading your story? This is it. (This one’s quite common, and authors use them quite frequently in their notes to link to their Twitter/Tumblr etc.)

The <img> tag is used to embed images as the name suggests.

See how the picture is within an <img> tag styled by a CSS class “tumblrimg”?

Again, I’m not talking about the syntax of these tags or how they have to be written because that’s something which can very easily be found on w3schools or any other web dev tutorial website.

So, that’s pretty much about HTML. Now, CSS.

CSS Properties

So, when I talk about how most of my web dev happens through thorough internet searching, I’m mostly talking about CSS. Because HTML tags aren’t difficult to remember, they stay in memory when you keep designing web pages, but CSS properties... ugh.

But before we begin, a short note on CSS classes. To simplify matters you can look at them as labels given to your HTML container tags (<div> for example). Once you assign the label to your HTML element, you can then style that label in your CSS, and introduce properties to it which you want to see in your HTML. It basically forms the link between your HTML and CSS. 

Say, I have a <div> that I want to style, then I’ll give it a label like this: <div class=”mongoosesurprise”>Your code</div>. The class name is mongoosesurprise, and when I have to style that particular <div>, I’ll have CSS code that looks like this:

Now, about CSS properties. 

You see all the words in white followed by a colon? max-width? border? background-image? That’s it— CSS properties. I can never remember if it is maxwidth or max-width, whether it’s margin-right or right-margin, whether it’s padding-right or right-padding, and that’s where the Googling comes in.

Again, like with HTML, I’ll only talk about CSS on AO3. Unlike regular CSS, CSS here always has to start with #workskin. And then, #workskin can be followed by our class name. (The class name must be preceded by a fullstop though, like in the picture above.)

My CSS design procedure is all over the place. I entirely work on the basis of trial and error. I keep adjusting properties like max-width and padding and margin to see how the elements fit best. (It doesn’t take me as long as it did four-five years ago to estimate these values and I’d attribute that to practice and inspecting a lot of web pages. On a related note, it’s great to learn web design by inspecting other pages.)

I realize this isn’t great advice but like I said, it’s always been about trial and error when it comes to CSS. What I can say conclusively is that with properties width, height, display, position, padding, and margin most of your HTML tags will be placed properly. But when it comes to styling, the list is really quite endless. From a number of font-related properties to border, there’s a lot— and, thus, Google.

And, finally, what you must know for HTML/CSS on AO3 is how to host images.

Hosting Images

If you want your work to contain images, it’s best to host them somewhere online. Imgur is a great option; it’s free and really simple to use. Once the image is uploaded, you can get the share links and put it in your HTML <img> tag (under the src attribute— again, very syntactical so I’m not getting into that), or if you want you can put it in your CSS as an attribute for the property “background-image” (like in the code above).

You’ll have to make minor changes to the share link though, that is, add the image extension (.png or .jpg) to the end of the link. Also, sometimes the image doesn’t render if there’s no ‘i’ preceding ‘imgur.com’. Here’s a sample link that works perfectly: http://i.imgur.com/aSMSztl.png.

And, I think that’s pretty much it.

This covers the absolute basics of how to code HTML/CSS on AO3. But I’d like to repeat that by no means is this everything. If there’s a particular area you’d want me to explain, please feel to drop in an ask!

Happy coding!