Chapter Text
Someone asked if I could share the code I used to make the Discord-style skin for my Enterprise Chat Room fic, so here it is! Plus some instructions (more for my own benefit as I’ll probably forget how to do this when i’ve moved on to my next hyperfixation 😂)
Disclaimer: I’m not a coder by any stretch, I’m barely even an amateur. But I saw some really cool examples of AO3 work skins on this Reddit thread, and I read some tutorials, and then I used genAI to write the code that I wanted, which I then modified.
(I also started making avatars to go next to the name of each character so it would be more authentic and Discord-y, but AO3 doesn’t host images (it’s possible to ‘host’ an image on a Tumblr draft post and then use that url in the fic) so it was do-able but a bit of a faff so I didn’t do that in the end).
Terminology
This is a work skin. It applies to individual fics so everyone can see it, even guests. (This is opposed to a site site which changes the appearance of the site just for you, like using Reversi for example which inverts the colours - great if you have a headache).
So with the work skin, there are two pieces of code involved:
CSS = this is the skin, i.e how it looks.
This is what gives the fic its Discord-y appearance like the dark background, colours, spacing, usernames, timestamps etc.
HTML = what’s in it.
This contains the actual chat or story - the channel name, usernames, timestamps, messages, people entering and leaving the chat, and so on.
You need both for the whole thing to work. Also, the HTML and CSS work together as a matched pair and are interconnected. When you customise the code, keep an eye on both halves - changes to one may require a matching change to the other (see below for more).
Step 1: Create your Work Skin
First you need somewhere to put the CSS.
On AO3 go to:
Skins → My Work Skins → Create Work Skin
Make sure you’re creating a Work Skin rather than a Site Skin.
Give your skin whatever title you like.
Now go to Chapter 2 of this work and copy all of the CSS. Paste it into the CSS box and save the skin.
You now have your own copy of the skin.
Step 2: Copy the HTML
Now you need the actual chat.
Create a new AO3 work (or edit an existing one). Above the box where you enter your story, you’ll see Rich Text and HTML. Choose HTML.
Go to Chapter 3 of this work and copy the HTML. This is the code from Enterprise Chat Room, so you can use it as a template rather than having to build a chat from scratch.
Paste it into the HTML editor of your own work.
Step 3: Turn it into your own story
This is the bit where you replace my Enterprise story with whatever you want to make (so you’re editing the HTML now).
The main rule is:
Change the words the reader can see. Leave the code around them alone.
For example, you might see:
<span class="username trip">Trip</span>
The Trip in the middle is what your reader actually sees, so you can change that to your own character’s name.
The class="username trip" bit is code that tells the skin how that username should look. Leave that bit alone for now.
The same goes for dialogue. If you have a line containing your character’s message, change the actual words they say, but leave all the <p>, <span>, class="..." and other code surrounding them in place.
A note about usernames and colours
If you see:
<span class="username trip">Trip</span>
The Trip between the tags is the name your reader actually sees.
The trip inside class="username trip" is an invisible label. The CSS uses it to decide what colour/style that character’s username should have.
#workskin .trip {
color: #f0b86e;
}
So you could decide to change Trip to Porthos:
<span class="username trip">Porthos</span>
Your reader would see Porthos, but Porthos would still have Trip’s username colour. Which is fine, you can just reuse the existing character colours for your characters. (Or change the hex code in the CSS if you want a different colour).
I also made Hoshi’s name into a different font for the fic, because I figured that she would be the only one savvy enough to know how to change the font settings on the chat, so you can do stuff like that too.
Step 4: Select your Work Skin
On the page where you’re posting/editing your fic, find Select ‘Work Skin’ and choose the Work Skin you created in Step 1. Then click Preview.
Hopefully, instead of a load of HTML, you should now have a shiny Discord-style chat room!
(I asked someone to road-test the skin for me before I published the fic as I was a bit nervous, so I did this by adding them to the draft fic as a temporary co-creator, which meant that they could kindly preview and test how it would look when published, and check against any existing site skins like Reversi etc to see if it cancelled them out).
Step 5: Have a play
Feel free to play around with, experiment and adapt the code for your own fics. Have fun!