Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Series:
Part 11 of How to AO3 , Part 6 of pi learns how to site skin
Collections:
Ao3 Skins
Stats:
Published:
2022-04-05
Completed:
2022-04-05
Words:
1,144
Chapters:
2/2
Comments:
12
Kudos:
122
Bookmarks:
74
Hits:
4,430

Useful CSS for readers

Summary:

This guide is two chapters long. Chapter One is some useful bits and pieces of CSS code that users who read on AO3 may find useful. This code only changes the way AO3 presents works to you, the reader. It does not change the way AO3 looks for anyone else.

Chapter Two provides instructions on how to create a site skin, if you've never made one before. It also contains instructions for how to combine site skins together, for example how to add the CSS code from Chapter One to the Reversi site skin for dark mode versions of the same functions.

Chapter 1: The Code

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;
}

Chapter 2: How to make a site skin

Chapter Text

In order to create a site skin, you need to have an AO3 account and you need to be logged in. 

  1. At the top of the page, tap on your username.
  2. From the dropdown menu that appears, tap on Dashboard.
  3. On your Dashboard, tap on the link called Skins.
  4. On the Skins page, tap on the button labelled Create Site Skin.
  5. Give your site skin a unique title. I usually add my username or nickname to the end of my title in order to make it unique. You need a unique title in order to save your skin.
  6. Copy the code you like from Chapter 1 and paste it into the CSS box. 
  7. After you have pasted all of the bits of code that you want to include, scroll to the bottom of the page and tap on the button labelled Submit. This will save your site skin and take you to a new page where you can see the title of your skin as well as all of the code.
  8. On the site skin page, tap on the button labelled Use. You will now have this skin every time you're logged in on any device. 

 

If you would like to use the code from Chapter One with another site skin that you're already using, you can edit that site skin and copy/paste the bits of code into the CSS box either before or after the other code you already have. 

 

If you want to pair the code from Chapter One with one of the Public Site Skins provided by AO3, such as Reversi (dark mode), follow Steps 1-6 from above. Then:

  1. At the bottom of the CSS box, look for the word Advanced and tap on the button labelled Show
  2. Tap on the button labelled Add Parent Skin.
  3. Start typing the name of the skin you want to combine your new code with. This can be any of the public site skins or any custom skin that you have made yourself. 
  4. Choose the name from the dropdown menu. 
  5. Follow steps 7 and 8 from above.