What Are Work Skins?
Works skins allow you to customize the appearance of your works beyond the basic HTML tags the Archive supports. In order to do this, they use Cascading Style Sheets (CSS), a style language that allows you to define a set of rules for how specific HTML elements in your work should be displayed.
This guide will take you through creating and applying a work skin on the Archive. For a more in-depth tutorial on how work skins and CSS work, we invite you to take a look at our tutorial on styling works, or check out some of the HTML and CSS resources listed at the end of this article.
Creating and Applying a Work Skin
1. Create the Work Skin
From your AO3 Dashboard, choose Skins from the sidebar, then select My Work Skins. Select Create Work Skin at the top left to open the Create New Skin webpage.
2. Enter Work Skin Information
In the shaded area labeled About, ensure that Type is set to "Work Skin". Then, give your work skin a unique title (e.g., "SMS Text"). Optionally, you can also give your work skin a description (e.g., "For SMS text within fic").
Once you have created your work skin, you may want to return to this form to upload a preview image or to apply to make your skin public for the use of other fans. For now, move down into the CSS text box to continue.
3. Write the CSS
CSS allows you to create a blueprint for how you'd like the HTML in your work to be displayed.
For example, using CSS, you can give instructions in one line of code that makes all your paragraphs look like monospaced computer code. As you might already know, you can do the same thing using an HTML code tag on all your paragraphs--but using CSS has a number of advantages over using HTML all by itself.
Firstly, by separating your work's appearance from its content, aesthetic changes are kept consistent. CSS ensures all items with the same labels are automatically displayed with the same settings. As work skins can be applied to multiple works, this feature is helpful in ensuring series are formatted consistently across all works.
CSS also helps you avoid redundancy by allowing you to define rules that will apply to all matching elements within your text, without needing to retype the same HTML over and over. In the previous example, if you wanted to change all your paragraphs to monospace font using HTML, it would involve adding extra HTML code for every paragraph of your work. Using CSS, on the other hand, you could make this change with a handful of CSS lines that would then apply to every single paragraph (p) tag. As such, using CSS in work skins is ideal for customized or complex styling, while still being easily changeable.
Finally, using CSS for styling instead of HTML avoids violating the principle of Semantic HTML--that is, the idea that HTML should be about describing the meaning of content, not its appearance. Semantic HTML is not only easier for humans to read and write, it's also more accessible: people using screen-readers or other assistive technologies to access AO3 will have a much easier time accessing your work if you use CSS instead of HTML for styling.
CSS Example
If this all sounds a little complicated, don't panic! This example will walk you through the basics of CSS styling in relation to work skins.
To begin, imagine you want to make the text messages characters send and receive look different from the rest of your work's text. For instance, you might want all SMS text to use a monospace Courier New font, while the rest of your work continues to use the Archive's default font. Using only HTML, this would be impossible, as the Archive does not allow use of the HTML font tag required to select a different font family. Using a work skin, on the other hand, you could easily create a simple CSS rule--a line of code that declares new settings for a particular HTML element--saying that every instance of a newly-envisioned HTML class textMsg should use a monospace Courier New font.
The entire CSS rule could look something like: #workskin .textMsg { font-family: "Courier New", Courier, monospace; }
Let's deconstruct this example.
To start, write #workskin to declare the rule as part of your work skin. This doesn't change, regardless of the kind of rule you're writing.
After this, you specify which section of your HTML the CSS rule will affect; in other words, a "selector". You can apply a rule to any combination of HTML elements and classes. Possible selectors include:
- Element only: To use an HTML element as your selector, simply write the element name after the
#workskin declaration. For example, selecting all paragraph elements (p) becomes #workskin p.
- Class only: To select all instances of an HTML class, write the name of the desired class preceded by a period. As in our CSS Example,
#workskin .textMsg will modify any element in the work with the class name textMsg.
- Element and Class pair: To select only items with a particular element and class name, combine both methods by writing the element name and the class name separated only by a period:
#workskin p.textMsg selects only paragraph elements with the textMsg class.
Following the HTML selector, you'll need to type a left curly bracket ({). This signals the start of your declaration, which defines what your rule is actually going to do.
In the declaration, you write a series of statements that assign a value or values (in this case, "Courier New", Courier, monospace) to a property (in this case, font-family). Your property describes the aspect you would like to change (the font family), while the value you assign it controls the kind of change that will be affected (in this case, changing it to monospace Courier New font style). The two are connected by a colon (:) and the whole statement is followed by a semicolon (;) to indicate that the font-family declaration is finished and complete. You can now type a right curly bracket (}) to close your rule.
In this example, the CSS rule only contains a single declaration; more commonly, rules will consist of several of these statements before closing off. To apply more settings to a single selector, simply end each declaration with a semicolon before defining the next property, and ensure you close the statement with a final semicolon and right curly bracket.
For some more examples of CSS rules and how they are written, you may want to take a look at our tutorial on styling works or any of the other resources listed at the bottom of this article.
4. Applying the Work Skin
Once you've written your CSS, use the Submit button to create your work skin. Congratulations! It will now show up under the My Work Skins header of the Skins section of your dashboard, where you can edit it to add additional rules, add a preview image, or make your skin public for others to make use of.
Now that your skin has been created, the next step is to link it to the work you'd like it to modify. In order to do this, you'll need to navigate away from the Skins page to the work in question. Select Edit on the desired work, or create a New Work, and scroll down to Select Work Skin under the Associations heading.
By default, this drop-down box should be populated with two public work skins: "Basic Formatting" and "Homestuck Skin". You should also see any personal work skins you just created listed here. Select the desired work skin and save your work.
5. Formatting the Work
Now that your work and your work skin are linked together, the CSS in your work skin will map onto the HTML elements of your text. For this to work properly, the selectors defined by your CSS rules need to be present in your work.
For example, a CSS rule for paragraph elements (#workskin p { }) will only apply to sections of text in your HTML which are wrapped in the p and /p tags. In this instance, they will work immediately, as p and /p tags are added automatically to your text by AO3's parser. However, this won't be the case for the rules in your work skin which make use of classes or other HTML elements.
HTML class tags can easily be added to both individual paragraphs and in-line text:
- Paragraph: To apply the settings of the textMsg class used in our CSS example to an entire paragraph, simply add the class name
textMsg to the p tag preceding the paragraph: p class="textMsg". No modification needs to be made to the closing /p tag.
- Span: To apply the settings of the textMsg class to some text within a paragraph, surround the selected text with
span class="textMsg" and /span tags.
There are a couple things to remember when adding HTML class tags to your text. Firstly, make sure you're editing your work in HTML mode, not rich text mode, otherwise the changes will not take effect. Secondly, you'll need to use the exact same class name in your HTML as the one you defined in your work skin CSS. Keep in mind these are case-sensitive, so be sure to match the names exactly.
Once you've formatted your text so that it references the items modified in your work skin, hit save and inspect the fruits of your labour. Congratulations! You've just customized a work's appearance on the Archive using a work skin!
Useful Links for More Information
Work Skin Resources
Tutorial: Styling Works
Example Work Using Work Skin
Public Work Skins
Homestuck-specific Tutorials
CSS & HTML Resources
AO3 CSS Help
AO3 HTML Help
CSS Tutorial
