How to apply an Archive of Our Own site skin | サクサクやりたい

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を適用させる方法

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;
}
Detailed explanation of this CSS code
I created an Archive of Our Own site skin with more readability. Feel free to copy, paste and modify it for your own use.

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.

If you check the box on the left of "Remember Me", you will be logged in automatically from next time.

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.

This is originally a password generator, but a generated letter string can be used as a title.
Strong Password Generator | Bitwarden
Generate secure, strong, and random passwords to maintain security and privacy online with Bitwarden 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.

この記事は役に立ちましたか?
はいいいえ
サクサクやりたい
タイトルとURLをコピーしました