Work Text:
hi!
i normally don't post tutorials; fanfiction is more of my field, and until a few weeks ago it was all i was writing. but, since a month or so, i started taking interest in a more niche (i think) interest: ao3 site skins.
i'm aware a lot of people don't know what a site skin is. in that case let me explain very briefly: site skins are a form of customized stylesheet that allows you to change the appearence of the archive. they are creating using the CSS code language
at first i looked for site skins on tumblr, but i got tired rather quickly of em so, i began learning CSS myself.
if you follow me on tw i'm sure you saw a bit of my journey so far, and after a lot of work and stress, i managed to create three different site skins:
- Spider-Man light mode
- Spider-Man dark mode
- Breach themed
one thing i'd like to make clear before giving you the code for which i decided to start doing this in the first place: i'm a merely a beginner. i know next to nothing about CSS and while my site skins can look a bit off, ugly and really basic, i'm working on improving every day :]
now, let's get to what you all actually opened this work for in the first place.
Preview:
CSS Code and Wizard instructions
so, the skin is a mix of both wizard and css code, so let's start with that first one since it'll be easier to explain:
on the top left, open or hover over your username and click on "dashboard". then, click on "skins" and, once in that page, click on the button that says "Create Stie Skin". Click on "Use Wizard".
Before doing anything else, you need to name your skin, and it needs to be a unique name. what i do is just name it by the theme and put my name at the end. for this skin i named it "breach_tøp_skin_nxxtsemester"; instead of nxxsemester, you can just write you own username and you'll good to continue.
After all that, scroll until you find this section:
In the "Background color" field, enter this color code: #0b090a
In the "Text color" field, enter this color code: #8c3a2f
And finally, in both the "Header color" & "Accent color" fields, enter this color code: #161314
Scroll to the bottom on the page and hit the "Update" button, which will automatically create your site skin. After that, scroll to the bottom of the page again and this time hit the "Edit" button, and scroll to this section:
Then, copy & paste this following code on the CSS field (click the arrow to see the code)
CSS Code
#header {
background-image: url("https://i.pinimg.com/736x/3c/99/42/3c9942b3417e6880430130653165a394.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-color: #0b090a;
}
#header .heading {
height: 12.5em;
}
#header .logo,
#greeting p.icon {
display: none;
}
#header .heading sup {
visibility: hidden;
}
#header h1 {
display: flex;
height: 15em;
margin: 0;
}
#header h1.heading a::before {
margin-left: .5em;
content: "again? always";
font-size: 1.2em;
font-family: 'Times New Roman', serif;
font-variant: small-caps;
text-weight: bolder;
color: #fffbe9;
text-shadow: 2.5px 2.5px 2.5px #0b090a;
}
#header h1.heading span {
display: none;
}
.required-tags .rating-notrated,
.required-tags .rating-general-audience,
.required-tags .rating-explicit,
.required-tags .rating-mature,
.required-tags .rating-teen,
.required-tags .category-femslash,
.required-tags .category-gen,
.required-tags .category-slash,
.required-tags .category-none,
.required-tags .category-het,
.required-tags .category-multi,
.required-tags .category-other,
.required-tags .complete-no,
.required-tags .complete-yes,
.required-tags .warning-yes,
.required-tags .warning-no,
.required-tags .warning-choosenotto,
.required-tags .external-work,
.status .private .text,
.status .public,
.status .hidden,
.status .rec,
.status .count,
.index .skins .icon,
.index .mystery .icon,
.index .tag .icon,
.index .tagset .icon,
.comment .icon .anonymous,
.comment .icon .visitor,
.abbreviated .icon .visitor,
.abbreviated .icon .anonymous,
.skins .primary .icon,
.admin .primary .icon,
.tagset .primary .icon,
.tag .primary .icon,
a.rss span,
p.kudos,
#symbols-key dl img,
#bookmark-symbols-key img,
img[src$="/images/skins/iconsets/default/icon_user.png"],
img[src$="/images/skins/iconsets/default/icon_collection.png"] {
background-image: url("https://i.ibb.co/1YHZFqgS/Zerafina-AO3-imageset-bw.png");
background-size: 200px 835px;
}
#footer.region {
background-image: url("https://i.pinimg.com/736x/3c/99/42/3c9942b3417e6880430130653165a394.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
background-color: #0b090a;
}
#footer .heading,
#footer a {
text-shadow: 2px 2px 2px #0b090a;
background: rgba(8, 8, 8, .65);
}
#footer .heading,
#footer ul,
#footer ul.navigation a {
color: #eeeeee !important;
}
#dashboard {
border: 1px solid #161314 !important;
padding: 0.5em 0;
border-radius: 0.em;
margin-left: 10px;
background: #0b090a !important;
}
#dashboard .actions a,
#dashboard .actions a:visited {
color: #8c3a2f !important;
}
#dashboard .actions .current {
color: #8c3a2f !important;
background: #161314 !important;
}
#greeting .menu,
#header .dropdown .menu,
#header .dropdown:hover a {
background: #0b090a;
color: #8c3a2f !important;
border-color: #161314;
}
#greeting {
background-color: rgba(11, 9, 10, 0.75) !important;
padding: 0.3em 0.6em !important;
border-radius: 8px;
box-shadow: 0 0 8px rgba(22, 19, 20, 0.3);
display: inline-block;
font-weight: bold;
font-size: 0.9em;
}
a.tag,
a.tag:visited,
a.tag:link {
display: inline-block;
padding: 2px 5px;
margin: 2px 0px;
border-radius: 5px;
}
.commas li:after {
content: "";
}
h5.fandoms.heading a.tag {
background: #0b090a;
color: #8c3a2f !important;
text-decoration: none;
}
h5.fandoms.heading a.tag:hover {
background: #8c3a2fe;
color: #8c3a2f !important;
text-decoration: none;
}
dd.fandom.tags a {
color: #8c3a2f;
}
.tags li.warnings a.tag {
background: #38201c;
border: 1px solid #38201c;
color: #fffbe9 !important;
font-weight: bold;
}
.tags li.warnings a.tag:hover {
background: #fffbe9;
border: 1px solid #38201c;
color: #38201c !important;
font-weight: bold;
}
.tags li.relationships a.tag {
background: #622d26;
border: 1px solid #622d26;
color: #fffbe9 !important;
}
.tags li.relationships a.tag:hover {
background: #fffbe9;
border: 1px solid #622d26;
color: #622d26 !important;
}
.tags li.characters a.tag {
background: #8c3a2f;
border: 1px solid #8c3a2f;
color: #fffbe9 !important;
}
.tags li.characters a.tag:hover {
background: #fffbe9;
border: 1px solid #8c3a2f;
color: #8c3a2f !important;
}
.tags li.freeforms a.tag {
background: #bd4837;
border: 1px solid #bd4837;
color: #fffbe9 !important;
}
.tags li.freeforms a.tag:hover {
background: #fffbe9;
border: 1px solid #bd4837;
color: #bd4837 !important;
}
p.muted.notice {
display: none;
}
a,
a:link,
a:visited,
a:hover,
#header a,
#header a:visited,
#header .primary .open a,
#header .primary .dropdown:hover a,
#header .primary .dropdown a:focus,
#header .primary .menu a,
#dashboard a,
#dashboard span,
a.tag,
.listbox > .heading,
.listbox .heading a:visited,
.filters dt a:hover {
color: #8c3a2f;
}
#header .heading a,
#header .user a:hover,
#header .user a:focus,
#dashboard a:hover,
.actions a:hover,
.actions button:hover,
.actions input:hover,
.actions a:focus,
.actions button:focus,
.actions input:focus,
label.action:hover,
.action:hover,
.action:focus,
a.cloud1,
a.cloud2,
a.cloud3,
a.cloud4,
a.cloud5,
a.cloud6,
a.cloud7,
a.cloud8,
a.work,
.blurb h4 a:link,
.splash .module h3,
.splash .browse li a:before {
color: #8c3a2f;
}
.notice,
.comment_notice,
.kudos_notice,
ul.notes,
.caution,
.error,
.comment_error,
.kudos_error,
.alert.flash,
.LV_invalid,
.alert .userstuff {
background: #161314;
border: 2px solid #161314;
color: #8c3a2f;
box-shadow: none;
}
#main .actions a,
#main .actions a:visited,
#main .action,
#main input[type="submit"],
#main .actions label,
form.button_to button,
#header #search .button {
background: #0b090a;
border: 1px solid #161314;
color: #8c3a2f;
box-shadow: none;
}
#header input {
background: #0b090a;
border: 2px solid #8c3a2f;
}
#header #search input:focus,
.actions input:hover,
.actions input {
color: #8c3a2f;
}
.search [role="tooltip"] {
background: #c35949;
border: 1px solid #c35949;
border-radius: 5px;
}
form.search [role="tooltip"] {
background: #c35949;
border-radius: 5px;
}
#main .actions a:hover,
#main a.current,
.current,
.actions li .current,
#dashboard .current,
#dashboard a:hover {
background: #161314;
border: 1px solid #161314;
color: #8c3a2f !important;
box-shadow: none;
}
li.blurb,
fieldset,
form dl,
thead,
tfoot,
tfoot td,
th,
tr:hover,
col.name,
#dashboard ul,
.toggled form,
.dynamic form,
form.verbose legend,
.verbose form legend,
.secondary,
.work.navigation .download,
.javascript .work.navigation .download .secondary,
dl.meta,
.bookmark .user,
div.comment,
li.comment,
.comment div.icon,
.splash .news li,
.userstuff blockquote {
border-color: #161314;
}
.listbox,
fieldset fieldset.listbox {
clear: right;
background: #0b090a;
border: 2px solid #161314;
padding: 0;
margin: 0.643em auto;
overflow: hidden;
box-shadow: 0 0 0 1px #0b090a;
}
a.tag:hover,
.listbox .heading a.tag:visited:hover {
color: #8c3a2f;
}
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
border: 1px solid #0b090a;
}
textarea {
min-height: 12em;
}
input,
textarea {
width: 100%;
background: #bdb3b6;
border: 1px solid #161314;
box-shadow: inset 0 1px 2px #0b090a;
}
.required,
.error,
.alert.flash {
color: #8c3a2f;
}
.qtip-content,
.notice:not(.required),
.comment_notice,
.kudos_notice,
ul.notes,
.caution,
.notice a {
color: #8c3a2f;
}
form .notice,
form ul.notes {
box-shadow: 0px 0 3px #2a2a2a;
}
#header .primary a {
color: #8c3a2f;
}
#footer a,
#footer button {
background: rgba(8, 8, 8, .65);
border: 0;
font-weight: 400;
margin: auto;
outline: 0;
padding: 0;
vertical-align: baseline;
box-shadow: none;
border-radius: 0;
}
a,
a:link,
a:visited:hover {
color: #6c2d24;
text-decoration: none;
border-bottom: 1px solid;
}
.actions a,
.actions a:link,
.action,
.action:link,
.actions button,
.actions input,
input[type="submit"],
button,
.current,
.actions label {
background: #161314;
color: #8c3a2f;
text-decoration: none;
border: 1px solid #161314;
border-bottom: 1px solid #0b090a;
background-image: linear-gradient(#0b090a 2%,#0b090a 95%, #0b090a 100%);
border-radius: 0.25em;
box-shadow: none;
}After that, just hit the "update" button again and your skin should be ready to use!! for that just scroll to the bottom of the page (the last time, i promise) and hit the "use" button.
NOTES
as i mentioned before, i'm just starting to learn CSS code language, so i can't assure that the skin won't have any bugs. despite that, i always check if i missed anything; i don't just make them for other people, but because i wanted to have my own customized site skins :]
i hope this tutorial was clear enough; english it's not my first language and i also suck at giving instructions so, sorry if you struggle to understand something just ask in the comments and i'll try to be a bit more clear.
if you have any problems with the skin itself at the moment of using it, lmk and i'll look for a way to solve your problem. i can't promise that i'll reply fast but i'll try my best.