Creating the workskin
Open up this link in another tab and copy everything on the page by highlighting everything and using the right-click menu or by using the ctrl+C hotkey.
Start creating a new workskin
Open Ao3 and open your "Dashboard".
Click the button on the left labeled "Skins".
Click the button on the right labeled "My Work Skins".
Click the button on the right labeled "Create Work Skin".
Finish creating workskin
Put "My Workskin" or something actually memorable in the "Title" box.
Put a description in the "Description" box, or don't, I'm not your mom :P (The description is entirely optional)
In the big box labeled "CSS" paste your clipboard by clicking in the box and using the right click menu or the ctrl+V hotkey.
Press "Submit"
Applying the workskin
Open a work you've made on Ao3 and click the "Edit" button (NOT "Edit Chapter")
Scroll down until you see the words "Select work skin" on the left-hand side.
(If you're having trouble finding it, it's directly below "Choose a language", and directly above the "Privacy" settings)
Select your workskin name from the dropdown list
Press the "Update" button at the bottom of the page. Your workskin is now ready for use! Simply follow the "how to use classes in html example tutorial below."
Alright, you chose the "do this correctly"-approach. You need to do these steps because of that ;P
As an Ao3 author, you may have heard the rule: "Don't write in the Ao3 editor." This is good advice for normal authors, because the Ao3 editor saves nothing until you hit submit and thus you constantly run the risk of losing all your edits at any point as a result :P
This advice is extra important for you though, when editing a work which has CSS fuckery going on, you run the risk of accidentally deleting that formating by modifying the text. To prevent this, when editing a work with CSS, you should always keep a copy of the plain HTML and edit that INSTEAD of just editing the fic like normal.
This part of the tutorial is going to teach you how to make an HTML file for you to store a backup/editable copy of your work in.
Obtain html editor, notepad ain't gonna cut it if you don't want to lose your mind to the web-dev demons :P
Don't worry, not as scarry as it sounds, just go to vscode.dev. You don't need to install anything and can edit from your browser just fine.
Set up vscode to read HTML
On the left-hand side of the screen, click the button which looks like four boxes with one box tilted 45 degrees.
Click the search bar under the text "EXTENSIONS: MARKETPLACE"
Type: "html"
Click "Install" on the the extension labeled "HTML Boilerplate" AND the extension labeled "HTML Snippets"
It will ask you if you trust the publisher, you trust me so you should twust them :p
(If you receive any other popups, just proceed with the installation.)
Make an empty HTML file
On the left-hand side of the screen, just below the vscode logo click the "≡"-button
AKA: The "handburger menu"(<-actual term for the menu buttons which are three horizontal lines stacked on top of eachother lol)Hover over the following option: "File" then click "New Text File"
Save your new text file, either use the handburger menu or ctrl+S
File explorer should now be open, navigate to where you want to store your html file.
In the "File name:" box you should type A-FILE-NAME-OF-YOUR-CHOICE.html
Close the "Untitled" file in vscode, and then use the handburger menu to select: File > Open File
Navigate to and select your brand new html file and open it.
Alright! That was the most convoluted part!
CSS TemplatesUsing the workskin
For the sake of this example I'm going to show you how to use a class to make part of a paragraph glow.
Open your work which you have applied a workskin to and then click the "Edit Chapter" button
Scroll down to the big block of scary text, make sure the "HTML" button is selected
You should see alot of text which looks like this:
<p>Here is a paragraph which we are using for an example!</p>And here's what the output on Ao3(with the dark theme turned on) would look like!
Here is a paragraph which we are using for an example!
Copy everything inside the block of scary text and paste it into your brand-new HTML file in vscode, when you're done editing this code, simply copy it out of vscode and paste it into Ao3 and hit "Submit"
Insert an underline tag
For the sake of this example, we're going to imagine that you want to make the word "paragraph" glow blue
Edit your line of html by wrapping it in an underline tag "<u>TEXT</u>"
HTML:
<p>Here is a <u>paragraph</u> which we are using for an example!</p>Ao3:
Here is a paragraph which we are using for an example!
"Now wait just one minute, I thought we were making text glow! Why are we using an underline tag?? I don't want an underline! This is false advertising!" <-You, probably
Patience. We're using the underline tag so it can have enrichment in its enclosure, don't worry about it ;p
(Click for the actual reason)
Okay so, for accessability reasons, it's important that the workskin can be disabled, in the event someone needs to view your work without a workskin, there's no way to have your glowy words show up, and the reader will be left with no way to know that text was intended to be accented! By using an underline tag, or other tags like italic and bold, we can help make sure these readers still know there was supposed to be something going on there!
Give the underline a trench-coat and a mustache so it can pretend to be glowy text
Modify the first(AND ONLY THE FIRST) underline tag to look like this: "<u class="BR3 BRblue">TEXT</u>"
HTML:
<p>Here is a <u class="BR3 BRblue">paragraph</u> which we are using for an example!</p>Ao3:
Here is a paragraph which we are using for an example!
"Wow! I made blue glowy text! What else can I do with this power?!" <-You, probably
Yippee! Good job you! To see how you can use your powers for
evilmore cool effects, check out the "CSS Templates" page, it includes text you can copy paste into your fic and modify to create the effects you want!
