WW Tutorial

The Basics Using the Workshop? Creating your own Workskin Useful links

The Basics

Ao3 Workskins —

You may have come across these before. These are how writers can add messages, emails, coloured text, and other cool things into their fics! You can create a workskin on your account, and then you add it when you create a fic.

Let's take a look at an example with the 'simple messaging' workskin:

Bing! You got a text!

Very cool! It now resembles a text message. But how do we get there? For that, we need HTML and CSS.

HTML, Hyper Text Markup Language —

Code used to create webpages. When you're posting a fic on Ao3, you have the option to type it in Rich Text or HTML. You may have seen people say to use the Rich Text editor instead of the HTML, and this is because HTML needs tags to work properly (though Ao3 tries to compensate by adding some automatically).

Take a look at the example below that uses tags to bolden and italicize text.

I can be bold, or even italics!

I can be bold, or even italics!

There are a lot of different tags, but to use most of them effectively, you need CSS.

CSS, Cascading Style Sheets —

Code that adds style and structure to HTML. This is the code that goes into the Ao3 workskin! Let's look at an example:

.pinkbox{ background-color: pink;
padding: 5px;}

Wow, there's a pink box!

Wow, there's a pink box!

There's a span class around the words 'pink box!'. It doesn't do anything if you just use HTML, but that's what CSS is for.

In the CSS, '.pinkbox' is given a number of things to do (The dot is so the CSS knows pinkbox is a class). It tells it to have pink as a background, and add padding (so the pink isn't touching the letters).

Once the CSS is added, it can reference the HTML so it knows where to add all its instructions.

If you read the CSS and HTML in the different generators, you'll notice there is a lot of stuff that you still want an explanation for. I've linked a few indepth but still beginner-friendly explanations below.

For the purposes of this website, as long as you know where to copy-paste everything, you'll be able to use these generators.

How do I use the Workskin Workshop?

Go to the generator you want to use

I've added examples so you can see what everything looks like. Make sure to read the Notes so you know how it works.

Generate the HTML and add it to your fic

Make what you need and then click 'Copy HTML'. Go to edit your fic, place the HTML where you want it. Remember, it won't look like it does in the generator until you add the workskin.

Create a workskin, and add CSS

There are instructions on how to create a workskin here. Copy the CSS for the generator you're on, and paste it in your workskin. Go to edit your fic, and add the workskin to it.

Check everything works

Check that what you added looks good on both desktop and mobile. All good? If not, see if you copy-pasted the HTML or CSS wrong. If it still doesn't work, or if you notice something off, send me a message.

How do I create my own workskin?

I'm so glad you're interested! Although I try and add a lot of options when making the generators, it will never be as customizable as manipulating it yourself, or of course, creating your own.

Firstly, you need to know the basics of HTML and CSS. Next, you need somewhere to edit your code. I wouldn't write it directly on Ao3, it gets rather annoying, and doesn't update automatically.

I use VSCode for HTML/CSS. I understand that it can be intimidating to download a full program for making workskins, but with VSCode, you can see each change in real time with Microsoft Live Preview. Also, VSCode will give you suggestions when you type and has a lot of shortcuts.

I've also added a link that will take you to an HTML specific guide for using VSCode. It's for making your own website, but the setup is the exact same. Still, if you don't want to download any programs, you can just use notepad or any text editor ( quick tutorial here), or just type directly into the Ao3 workskin editor. No point complicating things.

I'm planning on making a walk-through where I show how to create a simple workskin, so look out for that! But at the moment, if you have any problems (even if you can't stuck at the point where you can't get VSCode to work (I've been there and it sucks)), please message me with your discord and I'll help with what I can.

For now, some general advice:

The CSS Ao3 allows you to use is limited. I've been told this might change in the future, but for now, a lot of more modern HTML won't work.

You can use only the default of flex. If you add Display:flex; It will change the div so its center aligned and the child elements are spaced out, but you can't change it past that.

Ao3 has defaults that will make your HTML look different than it does on VSCode. You can use dev tools to try and figure out the issue. Use Ctrl+Shift+I on Windows, and Command+Option+I on Mac. After that, find your HTML and you can inspect the CSS to see what's affecting your code.