⚠ WARNING ⚠
Okay, this part of this tutorial assumes that you want to get up and running up as quickly as possible, which means: Fuck "best practices", you want glowy text, and glowy text is what you're gonna get!!
Be warned, this means you will risk things like messing up your formating if you do things this way and then attempt to edit your fic through Ao3 later.
If that is an unacceptable risk to you, click this button to teleport to where I give you the lowest possible effort guide to doing things "correctly":
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."
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!
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!
