<< HOME

What the Workskin Workshop does and how to use it in more detail

The Basics Using the Workshop Creating your own Workskin

The Basics:

  • Ao3 Workskins can be hard to get into, because there's coding involved
  • This site makes Ao3 workskin components without coding anything, just copy-pasting
  • I'm hoping this site makes more people use workskins, and gets some people confident to make their own!

Ao3 Workskins:

These are how writers can style their fics, adding things like tweets, messages, and coloured text. You first make a workskin, and then add workskin components to your fic. Workskins are written in CSS, code that tells your fic how to look. Then you add workskin components, written in what's called HTML, so that the workskin knows what part of the fic its styling. For example, I might want a character's dialogue to always be large and purple. Nice! HTML/CSS are the building blocks for this ( HTML/CSS is mainly used to create webpages, meaning if you learn it for Ao3, you can easily create your own website!). Let's dive more into HTML/CSS.

HTML:

HTML is a way to describe text in a way that let's you precisely style it. It's almost always paired with CSS. You can use it without CSS, but then it can only do very basic styling.

HTML:
I can be <b>bold</b>, or even <i>italics!</i>
Output:
I can be bold, or even italics!

The angle bracket things like <i> are called tags. They tell the text how to appear. <b> (opening tag) tells the text to appear bold, and then </b> (the closing tag) tells it to stop appearing bold, for example. As said before, we can get basic styling (italics, bold, underlining) with just HTML, but for anything fancier, we need CSS.

CSS:

CSS adds style and structure to HTML. This is what goes into the workskin. Let's make that large and purple font from before.

HTML:
<span class="large-n-purple">"Hello,"</span> he said.
CSS:
.large-n-purple{
color: purple;
font-size: xx-large;
}
Output:
"Hello," he said.

We've introduced a new tag, <span>. It doesn't have any default settings like <b> or <i>, so it's good tag to use for our purple text. There's also a class inside it, called "large-n-purple", this is used to tell the CSS what text should be large and purple.


These are the very basics to let you know what an Ao3 workskin does when you use it. As you can see by using the generators, it can get a lot more exciting than just changing the text size and colour. Go to the resources page if you want some more in-depth tutorials (most tutorials will be targeted at creating websites, but everything still applies to Ao3 workskins!).


Workskin Workshop Step by Step Instructions:

  1. Go to the generator you want and use it

    2. I've added examples so you can see what everything looks like. Make sure to read the notes so you know how it works. If you're using images, please avoid hosting them on sites like Tumblr or Discord. You'll end up with a broken link in a year or two. Instead use image-hosting sites, I recommend Squidge Images because its fandom-specific.

  2. Create a workskin on your Ao3 account, and add the CSS at the bottom of the generator page.

    3. Go to this site for instructions on how to create a workskin. Copy the CSS for the generator you're on, and paste it in your workskin. Ao3 will strip out all comments and add #workskin at the start of each CSS element, don't worry about it.

  3. Add the workskin to your fic

    4. The previous link akso shows you how to do this.

  4. Copy the generated HTML and paste it into your fic

    5. This goes wherever you want it inside your writing. Make sure you paste it when you're in 'HTML' mode, NOT Rich Text.

  5. Check everything works

    6. If you've added the workskin, you should be able to view the changes on both preview and draft mode. All good? If not, see if you copy-pasted the HTML or CSS wrong. Forgetting a closing tag (the ones with the slash, like </span>) can mean that the CSS doesn't know when to stop applying itself, and that can cause weird formatting.


How do I edit/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.

If you don't want to download any programs, you can just use notepad or any text editor, or just type directly into the Ao3 workskin editor. No point complicating things.

For now, some general advice:
  • The CSS Ao3 allows you to use is limited. This means that certain things won't work like they would on a website. It's also not that well-documented, so some things you will have to test yourself (this doesn't apply to the basics of HTML/CSS, but the more you learn the more you realize how limited it is).
  • Ao3 has defaults that will make your HTML look different than it does on VSCode/other software. 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.
  • Ao3 semi-randomly adds paragraphs to text! This confused me a lot when I first started. If something looks wonky, go back and check if you have random paragraph tags you didn't add yourself
  • 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.