how to do colored text on ao3
to anything saying ‘but op, you just need to google it! it’s easy!’: i am not a smart op. this drove me up the wall for half an hour even after googling it, but i finally found out how to! so here is a tutorial.
step 1 is to select a public work skin. this is under associations, at the very bottom. choose basic formatting!
this allows you to use any color listed here in your work if you add the corresponding code.
step 2 is to format your fic. if you format colors in the rich text editor, it will not show up as a color when posted. if you want to format your fic with italics and the like in the rich text editor, do that before formatting colors, then switch over to the html editor to format them. any formatting you do in rich text will immediately format itself nicely in html when you switch over, except for color formatting.
if you format colors in the rich text editor, preview will not accept the formatting, and html viewer will convert the code to <span class=“font-red”> gibberish that ao3 won’t understand. in addition, if you post your work while displaying the rich text editor, even if it is properly formatted for colors, the colors will not show up.
…if that’s confusing, just remember to post your fic and format for colors while using the html editor, not the rich text editor.
to format, you drop the following code into it:
<span class=“font-green”>Insert text you want colored here!</span>
You can switch out any color for one of the colors linked here. For example,
<span class=“font-red”>Anything spoken in red is the truth!</span>
if you’re writing for umineko, i made a custom work skin, specifically for gold/blue/purple truths, since the default basic formatting work skin didn’t have the exact hex colors the VN does. ao3 is weird about sharing skins, so go here to create a work skin and copy/paste the text here into the css box. name it whatever you want and save it, and select that skin instead of the basic formatting work skin when writing.
the umineko skin is copied from the default basic formatting work skin, but with 3 extra colors: blue, gold, and purple. to use, it’s exactly the same as what i just went over above: just use bluetruth, goldtruth, and purpletruth instead of *insert color here*
“The food they were given had small bombs in it, which exploded from inside their stomachs. In other words, the crime is possible through trap X! The details of a bomb that they could swallow without noticing and that could blow open their stomachs is a Devil’s Proof! I refuse to explain!!”
<span class=“font-bluetruth”>”The food they were given had small bombs in it, which exploded from inside their stomachs. In other words, the crime is possible through trap X! The details of a bomb that they could swallow without noticing and that could blow open their stomachs is a Devil’s Proof! I refuse to explain!!”</span>
…..do note that the blue i used is really grating on the eyes. if you want to switch what shade of blue (or any color, really) is used in the custom skin, look for its corresponding part of the skin, like this:
#workskin .font-bluetruth {
to change the shade, change the sequence of numbers after the second hashtag (bolded for emphasis). that’s the hex color. there are sites like this one that display a ton of different hex colors, so you should be able to find a good-looking one that isn’t bright, eye-scorching neon with a little luck! you can also add more colors to a custom work skin by copy/pasting more colors in and switching the names and hex codes.
hope this helps somebody out there!
