Actions

Work Header

Useful CSS for readers

Chapter Text

I've made a kind of hobby out of making site skins, and a lot of these functions were ones I figured out by answering questions on tiktok and getting CSS help from friends and by using resources like W3Schools  You can use these bits of code separately or together, and you can add them onto any other skin you might be using.  

If there's something you want to do to make your reading experience better, feel free to drop requests in the comments. It might or might not be possible, but we never know until we try!


Change the background colour of the even-numbered comments. AO3 puts a slight shading on every-other comment in a thread. This can sometimes look like reader comments have one background and author comments have a different background, but it's based on position in the list, not on who is leaving the comment. 

In this code, you can change just the border colour or just the background colour or both. If you only want to change one, delete the other one from the code. You can use a tool like a hex colour picker to help you find a shade that you like. 

CODE:

.thread .even {
border-color: #9edcff;
background: #fcd979;
}

 

Change the background colour of a tag based on the text of the tag. Use this code to either "black out" or highlight tags to make them easier to see or avoid. This code doesn't look at the meaning of a tag and it doesn't connect to synonyms. It is based entirely on the text string that you enter. 

Be aware, if you are copy/pasting this code on a mobile device, your device may change the quotation marks. The quotes should look straight up and down. If they have a slight curl to them, the code will not work. If your code isn't working, try deleting the quotes and replacing them. 

Change the text inside of the quotation marks to whatever tag you want to highlight or black out. 

You can set the background to one colour and the text to another colour that's easy to read on that background. You can use a tool like a hex colour picker to help you find shades that you like. 

CODE:

li.blurb a.tag[href*="angst" i] {
background-color: #000;
color: #5e5757;
}

 

Do not display images in works. This will remove all images from inside all works on AO3. This means you will be unable to see fanart posted inside a work. You will also not be able to see image descriptions in their place.

CODE:

#workskin img {
display: none;
}

 

Change the font size for fics. This code will change the size of the font inside a work on AO3 but leave the rest of the site as is. If you want to change the font size for the entire site, you will need different code. 

The number in this code is the percentage of the usual font size for the page. You can adjust that number to whatever font size is comfortable to you. Numbers larger than 100% will be bigger than the standard size. Numbers smaller than 100% will be smaller.

CODE:

#workskin, .blurb, .comment {
font-size: 130%;
}

 

Force a blank line between paragraphs. This will add a blank line in between every paragraph in a fic. Depending on how the author formatted their story originally, this should only affect stories that have no blank lines between paragraphs.

It is possible that it will add 2 blank lines between paragraphs in cases where the author used different HTML than is typical.

CODE:

#workskin p {
white-space: pre-line;
}

 

Remove blank lines between paragraphs and indent paragraphs. The margin and padding code control the line spacing in between paragraphs. The text-indent line controls how large the indent will be.

You can remove the parts of the code that you don't want. You can also adjust all of the numbers to a spacing that is comfortable for you.

CODE:

#workskin p {
margin: 0px;
padding: 0px;
text-indent: 3em;
}

 

Force text in fics to align on the left. This will force all text inside a fic to start on the left hand side of your screen. Nothing will be centered or right-aligned (unless the author uses the space bar or tab key to set their spacing)

You can modify this code to set everything to center or to right if you'd prefer.

CODE:

#workskin p {
text-align: left;
}

 

Format fics in 2 columns instead of 1. This will arrange the content of the fic into two columns. You will need to read to the bottom of the page in the left hand column and then return to the top of the page to read down the right hand column. 

CODE:

#workskin {
column-count: 2;
}

.preface.group {
padding: 0px;
margin: 0px;
}