Archive of Our Own

Chapter Text

Notes:

1. A lot of customisation tricks can be found on “Public Site Skins”

2. Use your favourite skin as base and add a few tweaks - For example, you can hide kudos. Thats one trick on the Public Site Skin, so you can just copy paste it and add it to your base skin

3. My skins are mostly for phone BECAUSE the image quality decreases if the screen is wider

How to use my skins on computer/ How to change the picture of the header:

DISCLAIMER!!! You have to change the picture for that & a tumblr account is needed - Ao3 doesnt host images, which is why they ask for URLS if you try to upload a picture

Tumblr works best for me which is why i use it as my host! But i heard u can also use ficklr? 

1. Use a horizontal image (for computers for better quality) or use any image you like (phone)

-> can be searched on Pinterest

2. Upload that picture on Tumblr

3. (Open in safari/chrome) and copy the link of the picture 

In the css, this is the original:

#header {
  background-image: url("https://64.media.tumblr.com/5e7bd8f60700f89df0364fc3a8a405e3/9d19378051e5d739-e3/s1280x1920/a9d0e77579a1ea47dc4e8e1e536ba4e5df667e14.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #0b0d1c;
}

#header .heading {
  height: 12em;
}

But replace the bold text in the example above with your new link!
Thats it! Basically, you can use my skins on your computer as well but the quality is gonna be shit

ADDITIONALLY IF CHANGING THE PICTURE: HOW TO RESIZE: 

original css:

#header {
  background-image: url("https://64.media.tumblr.com/5e7bd8f60700f89df0364fc3a8a405e3/9d19378051e5d739-e3/s1280x1920/a9d0e77579a1ea47dc4e8e1e536ba4e5df667e14.jpg");
  (3)background-repeat: no-repeat;
  background-size: cover;
  (1) background-position: center;
  background-color: #0b0d1c;
}

#header .heading {
 (2) height: 12em;
}

(1) determines what part of the image is shown- either TOP, CENTER OR BOTTOM.

- if you cant get the placement right, then try to tweak it with the (2) height.

(2) The height determines how much of the picture is shown

(Numeric Values:

You can specify numeric values either as percentages or in various units, including cm, em, ex, in, mm, pc, pt, and px.

We highly encourage learning about and using "em", which lets you set dimensions relative to the user's current font size! This will make your layouts much more flexible and responsive to different browser and font settings, and improve their accessibility to users with differing needs.)

———————

- if that also doesnt work, then tweak the photo manually and then reupload on tumblr; repeat the process as if changing the picture

(3) unless you want your picture to look like a tapestry, add this or remove it if you want a pattern

WORKSKIN: (not to confuse with site skin!)

- In the large box labeled “CSS”, enter:     

#workskin img.banner {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 10px;
  max-width: 100%;
}

Note: The above CSS will center your image and resize it to the screen your reader is using.

(Source: https://www.joanielspeak.com/2019/02/04/center-resize-images-to-screen-on-ao3-tutorial/#:~:text=Optional:%20If%20you%20like%2C%20in,the%20bottom%20of%20the%20form.)

COLOUR HEX codes:

You can search up colour hex codes and add it to colour or backgrounds

Any # in the CSS is a colour code and changing the numbers behind the # changes the colour

HOW TO CHANGE COLOUR: 

1. Yall are going to hate me for this but its trial and error…

The best tip I can give you is to read through the CSS and figure out what colour belongs to what function

-

You can specify colors using hex values (e.g. #000000 is black), RGB values (e.g. rgb(0,0,0) is black), or RGBA values (e.g. rgba(0,0,0,0.5) is black at 50% opacity). We recommend using any of these methods rather than color names, since not all browsers support all color names.

However, color names are more understandable and easier to remember, so we also allow the use of commonly supported HTML color names.

Buttons, text style etc: 

There’s a lot about this on the Public Site Skin.

examples:

1. Aqua buttons

2. Rounded corners

3. How to hide kudos, authors, summary etc

4. How to make the tags shorter and add a slide tool

etc etc they have a lot!!!