Archive of Our Own ^beta

Step 1: Use the Wizard
While logged into your account, navigate to Dashboard, then Skins. Press Create Site Skin and enter the following color values. (You can also enter your preferred fonts if you want, but it is not necessary for this skin to work.)
Background color:#000
Text color:#FAFAD2
Header color:#DAA520
Accent color:#2A0D5D

Step 2: Name and Save
Enter a name for this skin. It should be unique - including your username is a good way to do that. You can call it something like "[Your-Username-Here] KIY skin". Before moving onto the next step, save the settings by clicking submit.

Step 3: CSS
Edit your new site skin and navigate to "Custom CSS." In the blank box, copy/paste the code below. I recommend doing this step on a computer instead of your phone.

I'd like to come back and annotate this better later. I'm still learning, and I've learned a lot from the annotations on other AO3 skins. For now, if you want to know what anything does specifically, you can refer to the guide I linked in my beginning notes - I deleted some features of that skin for my own, but you'll recognize a lot of this from that. You can also chat with me on Tumblr at romanticslimecreature.

CSS:
#header .logo,
#header h1.heading span {
display: none;
}

#header h1.heading a::before {
content: "The King in Yellow";
text-shadow: 0 0 20px #12FFC0;
}

#header .heading sup {
visibility: hidden;
}

#header .heading sup::before {
content: url("https://i.imgur.com/4bb8Hv1.png");
text-shadow: 0 0 10px #12FFC0;
visibility: visible;
}

#header #greeting img.icon {
display: none;
}

#header #greeting a {
color: #D0DDFD;
}

#header ul a.dropdown-toggle {
color: #000;
}

#header fieldset input#site_search.text {
background-color: #D0DDFD;
}

#header input[type="submit"],
#main .actions a,
#main .actions a:visited,
#main .action,
#main .actions input,
#main input[type="submit"],
#main .actions label {
background-image: none;
background-color: #D0DDFD;
color: #000;
border-width: 0;
}

#main .current {
background-color: #000;
color: #D0DDFD;
border-color: #D0DDFD;
}

.filters .expander {
color: #D0DDFD;
}

#footer ul a,
#footer ul h4.heading,
#footer ul li {
color: #000;
}

.tags li.warnings a.tag {
color: #FF122B;
}

.tags li.relationships a.tag {
color: #DAA520;
background-color: transparent;
}

.tags li.characters a.tag {
color: #FFFF00;
}

.tags li.freeforms a.tag {
color: #F2F2F2;
}

.thread .even {
border-color: #D0DDFD;
background: #6C6C73;
}

.thread .odd {
border-color: #D0DDFD;
background: #393940;
}