quick guide on ao3 work skins
basically work skins are how you make this or this or this. you can access them via the skins link in the sidebar menu (top menu on smartphones).
the easiest way to implement them is to use an existing public work skin, which are free for anyone to use. ao3 has a few listed here.
there’s also this guide for making your own work skins but the css section honestly makes the whole thing sound way harder than it actually is. if you don’t already know css or are super basic like me, you could just take code from existing work skins and just modify them to your liking. this is really all you need to know:
bold, italics, underline font-weight: bold; font-style: italic; text-decoration: underline;
text size, color, and type of font font-size: {insert percentage}; color: {insert hex code}; font-family: {insert font name}; *ao3 only recognizes a limited number of fonts so make sure to always test this out
align text to the center/right or create lines of the same length text-align: {insert center/right/justify};
background color and border background: {insert hex code}; border: #px; *optional: for border, you can choose to have a dashed or dotted line and also manipulate the color (e.g. border: 1px dashed #33aaee; )
make a section only fill up part of the screen: width: {enter percentage here}
after creating your work skin, all you need to do within your actual fic is put this code around the text you want stylize: <div class=“{insert name of code here}”>fic text</div>
misc notes:
if you want to make two columns of text side-by-side, copy the following blocks of code from my work skin: div.reports, div.columnleft, and div.columnright
for the text message style, copy these codes: div.textto and div.textfrom
always test out how this stuff looks on your smartphone before posting
you can embed code within other code
e.g.<div class=“h1”><div class=“fancy code”>blah blah blah</div></div>
