How to apply an Archive of Our Own site skin

Fully revised on July 18, 2021.

There is a Japanese version.

Archive of Our Ownのsite skinを適用させる方法

https://frostygrass.net/how-to-apply-an-archive-of-our-own-site-skin-ja/

2019.12.02

Things to prepare in advance

Archive of Our Own account

CSS code

Used in this tutorial is

#outer {
  background: #deb887;
}

body {
  background: #deb887;
}

div.preface {
  max-width: 600px;
  margin: auto;
}

div#workskin {
  max-width: 800px;
}

body {
  font-size: 150%;
}

#footer {
  overflow-wrap: break-word;
}

p.kudos {
  overflow-wrap: break-word;
}

.blurb h4 a:link,
.blurb h4 img {
  overflow-wrap: break-word;
}

div.preface .associations {
  overflow-wrap: break-word;
}

.comment h4.byline {
  overflow-wrap: break-word;
}

a.tag {
  overflow-wrap: break-word;
}

#outer #dashboard,
#main.dashboard {
  float: none;
  width: auto;
  max-width: 100%;
  margin: 1%;
  padding: 0;
  clear: both;
}

#dashboard ul.navigation {
  float: left;
  margin: 3.5%;
}

#dashboard .landmark {
  clear: none;
  float: left;
}

I created an Archive of Our Own site skin with more readability. Feel free to copy, paste and modify it for your own use.

https://frostygrass.net/i-created-an-archive-of-our-own-site-skin-with-more-readability-feel-free-to-copy-paste-and-modify-it-for-your-own-use-en/

2019.12.01

How to apply a site skin

STEP 1: Tap "Log In" on the upper right of the screen.

STEP 2: Input your User name or Email address in the upper field, your password in the lower field, and tap the Log In button on the lower right of the frame.

STEP 3: Tap the logo on the left of "Hi, [User name]".

STEP 4: Tap the word "Skins".

STEP 5: Tap the "Create Site Skin" button.

STEP 6: In the field below the word "Title*", input a unique letter string that is different from all titles of site skins other Archive of Our Own users have saved.

Free Password Generator | Create Strong Passwords | Bitwarden

Easy and secure password generator that's completely free and safe to use. Generate strong passwords for every online account with the strong Bitwarden password...

https://bitwarden.com/password-generator/

STEP 7: Input the CSS code to apply in the field below the word "CSS".

STEP 8: Tap the "Submit" button.

STEP 9: After the screen switches, scroll down, and tap the "Use" button.

STEP 10: The screen switches, displays "Your preferences were successfully updated." and the process is complete.

End.