Will The Wise AO3 Skin

by Anonymous

Summary:

This is the Will the Wise skin i've made for will byers birthday!

Notes:

I posted the image on Twitter just to show off the skin and went to sleep, and when I came back I had over 400 notifications!!! I knew I should have uploaded the skin right away, but I was sleepy, so here it is!

The little Will the Wise is an image I made! I was originally going to use that image to have a small custom pin made on AliExpress, but I don't have any money! teehee

Just so you know, I've never actually made an Ao3 skin before, so this is an amalgamation of different parts from various skins, and it's all held together with tape... so I hope it all works out. Maybe that's why it's so long; I wasn't sure what I could and couldn't cut.

#willbdayweek2026

#header {
background-image: url('https://i.postimg.cc/wvxZX5T9/dibujo-2.png'), url('https://i.postimg.cc/5jWJ1Ybb/tamanp.png');
background-repeat: no-repeat, repeat;
background-position: center 20px, top left;
background-size: auto 200px, auto;
background-color: #2c2c3a;
}

#header h1 sup,
#header .button,
#header .landmark,
#header .logo {
display: none;
}

#header .heading {
height: 16em;
}

#header .primary {
background: #6b4f7f;
box-shadow: 0px 0px 15px #e6c68e;
}

#header .logo,
#header .heading sup {
visibility: hidden;
}

#header .heading a {
color: #e6c68e;
text-shadow: 0px 0px 15px #9b7bb5;
font-size: 2.2em;
left: 20px;
top: 140px;
background: rgba(75, 59, 92, 0.7);
padding: 5px 15px;
border-radius: 30px;
border: 1px solid #e6c68e;
white-space: nowrap;
}

.event .userstuff {
background: #6b4f7f;
border: 1px solid #e6c68e;
}

.userstuff p {
text-align: left !important;
}

#outer.wrapper,
.filtering .filters #leave_filters {
background: #4a366e;
color: #f5f0e6;
}

#main a {
color: #9b7bb5;
}

#greeting a.dropdown-toggle,
#header .actions a {
color: #e6c68e !important;
text-shadow: 0px 0px 3px #4a3b5c;
}

#greeting .menu,
#header .dropdown .menu,
#header .dropdown:hover a {
background: #4a3b5c;
box-shadow: 0px 0px 15px #e6c68e;
border: 1px solid #e6c68e;
}

span.submit.actions input.button {
display: none;
}

#greeting img.icon {
display: none;
}

#header #search .text,
.search [role="tooltip"] {
background: #4a3b5c;
box-shadow: 0px 0px 15px #e6c68e;
color: #e6c68e !important;
border: 1px solid #9b7bb5;
}

form.search input[type=text],
form.search input[type=submit],
.autocomplete div.dropdown ul {
background: #4a3b5c !important;
border: none;
box-shadow: 0px 0px 15px #e6c68e;
color: #e6c68e;
display: block;
}

#header #search .text {
width: 7em;
}

.notice,
.comment_notice,
.kudos_notice,
ul.notes,
.caution,
.error,
.comment_error,
.kudos_error,
.alert.flash {
background: #e6c68e;
box-shadow: 0px 0px 15px #9b7bb5 !important;
color: #4a3b5c;
border: none;
}

.notice a,
.comment_notice a,
.kudos_notice a,
ul.notes a,
.caution a,
.error a,
.comment_error a,
.kudos_error a,
.alert.flash a {
color: #6b4f7f;
font-weight: bold;
}

.splash .module h3 {
color: #e6c68e;
border-bottom: 2px solid #e6c68e;
}

.splash .favorite li:nth-of-type(2n+1) a {
background: #e6c68e;
box-shadow: 0px 0px 15px #9b7bb5;
color: #4a3b5c;
font-weight: bold;
font-variant: small-caps;
}

.splash .favorite li:nth-of-type(2n+2) a {
color: #e6c68e;
font-weight: bold;
font-variant: small-caps;
font-size: 110%;
}

.splash .favorite li:nth-of-type(2n+1) a:hover,
.splash .favorite li:nth-of-type(2n+2) a:hover {
color: #e6c68e;
font-weight: bold;
font-variant: small-caps;
background: #9b7bb5;
}

#footer {
background: #6b4f7f;
color: #e6c68e;
border-top: 3px solid #e6c68e;
box-shadow: 0px 0px 15px #9b7bb5;
}

#footer a,
#footer .heading {
color: #e6c68e;
}

.actions a,
.actions a:focus,
.actions input:focus,
.action:focus,
.actions button,
.actions li input,
.actions li input[type="submit"],
input[type="submit"],
.actions li label,
ul.navigation.actions li a,
.action:link,
.actions a:link {
background: #6b4f7f;
border: 1px solid #e6c68e;
color: #e6c68e;
box-shadow: 0px 0px 15px #9b7bb5;
border-radius: 5px;
}

.current,
#dashboard .current {
background: #e6c68e !important;
color: #4a3b5c !important;
box-shadow: 0px 0px 15px #9b7bb5 !important;
border-radius: 5px;
}

#dashboard.own {
border-top: 5px solid #e6c68e;
border-bottom: 5px solid #e6c68e;
box-shadow: 0px 0px 15px #9b7bb5;
}

#dashboard a:hover {
background: #e6c68e;
color: #2c2c3a !important;
}

#dashboard a {
color: #e6c68e;
}

dl.meta {
border: 1px solid #e6c68e;
box-shadow: 0px 0px 15px #9b7bb5;
background: #4a3b5c;
color: #f5f0e6;
}

.listbox .index {
background: #4a3b5c;
}

.listbox,
fieldset fieldset.listbox {
background: #6b4f7f;
box-shadow: 0px 0px 15px #9b7bb5;
border: 1px solid #e6c68e;
}

form dl,
fieldset,
fieldset fieldset,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
input,
select,
select:focus,
textarea,
span.symbol.question,
.own {
background: #4a3b5c !important;
color: #f5f0e6 !important;
border: 1px solid #e6c68e;
box-shadow: 0px 0px 15px #9b7bb5;
}

.autocomplete li.added,
.post .meta dd ul li.added,
label,
label.required {
color: #e6c68e;
}

span.delete {
background: #e6c68e;
box-shadow: 0px 0px 15px #9b7bb5;
}

span.delete a {
color: #4a3b5c !important;
font-weight: bold;
}

.ui-sortable li,
.dynamic form,
div.dynamic {
background: #4a3b5c;
border: 1px solid #e6c68e;
}

.dropdown {
background: #4a3b5c;
}

form.verbose legend,
.verbose form legend {
background: #e6c68e;
color: #4a3b5c;
box-shadow: 0px 0px 15px #9b7bb5;
}

li.blurb {
border: 1px solid #e6c68e;
box-shadow: 0px 0px 15px #9b7bb5;
background: #5a4b6b !important;
border-radius: 15px !important;
padding: 15px !important;
}

.draft {
background: #4a3b5c;
color: #e6c68e;
border: 2px dashed #e6c68e;
box-shadow: 0px 0px 15px #9b7bb5;
}

.draft .wrapper {
background: #4a3b5c;
border: 1px solid #e6c68e;
}

#header h2 {
background: #e6c68e !important;
color: #4a3b5c;
box-shadow: 0px 0px 15px #9b7bb5;
}

#stat_chart svg {
filter: invert(90%) sepia(150%) brightness(60%) hue-rotate(60deg) saturate(120%);
}

.reading h4.viewed,
dl.index dd,
table,
th,
dt.child {
background: #4a3b5c;
color: #f5f0e6;
}

#modal,
span.replied {
background: #4a3b5c;
color: #e6c68e;
border: 2px solid #e6c68e;
box-shadow: 0px 0px 15px #9b7bb5;
}

h4.heading.byline {
background: #e6c68e;
color: #4a3b5c;
}

li.comment {
border: 1px solid #e6c68e;
background: #4a3b5c;
color: #f5f0e6;
}

.comment div.icon {
border-bottom: 5px solid #e6c68e;
box-shadow: 0px 0px 15px #9b7bb5;
}

.thread .even {
background: #6b4f7f;
}

.unread {
background: #4a3b5c;
border: 5px dashed #e6c68e !important;
color: #e6c68e;
}

span.unread {
background: #e6c68e;
color: #4a3b5c;
}

span.indicator::before {
box-shadow: 0px 0px 15px #9b7bb5;
}

.warnings .tag,
.work .warning a.tag,
dd.warning.tags a {
border: 1px solid #e6c68e;
border-radius: 5px;
background: #e6c68e;
padding-left: 2px;
padding-right: 2px;
box-shadow: 0px 0px 10px #9b7bb5;
color: #4a3b5c !important;
}

.relationships .tag,
.work .relationships a.tag,
dd.relationship.tags a {
background: #6b4f7f !important;
color: #e6c68e !important;
font-weight: bold;
text-shadow: 0px 0px 15px #9b7bb5;
border: 1px solid #e6c68e !important;
border-radius: 20px !important;
padding: 2px 10px !important;
}

.blurb h4 a:visited {
color: #9b7bb5 !important;
}

#main a:hover {
background: #e6c68e;
color: #4a3b5c;
}

.statistics .index li:nth-of-type(2n) {
background: #4a3b5c;
}

dl.stats,
dd.words,
dd.language,
dd.published,
dd.status,
dd.chapters,
.required .stats,
.blurb .stats dl,
dl.index dd {
color: #f5e6c8 !important;
font-weight: bold !important;
}

dl.stats dt,
.required .stats dt,
.blurb .stats dt {
color: #9b7bb5 !important;
}

li.blurb blockquote p:first-child::before,
.blurb .fandoms::before,
.blurb ul.series::before,
ul.tags li.warnings:first-child:before,
li.warnings + li.relationships:before,
li.relationships + li.characters:before,
li.characters + li.freeforms:before {
content: none !important;
}

.filters .facet-group .expander,
.filters .expander {
color: #ffffff !important;
}

.filters .facet-group .expander:hover,
.filters .facet-group .expander:focus,
.filters .expander:hover,
.filters .expander:focus {
color: #ffffff !important;
}

.kudos_error {
font-size: 0 !important;
position: relative !important;
background: #e6c68e !important;
padding: 8px 15px !important;
min-height: auto !important;
border: 1px solid #9b7bb5 !important;
border-radius: 30px !important;
box-shadow: 0px 0px 10px #9b7bb5 !important;
display: inline-block !important;
width: auto !important;
margin: 10px auto !important;
}

.kudos_error::after {
content: " 🪻Your love has already reached the author! " !important;
font-size: 16px !important;
color: #4a3b5c !important;
display: block !important;
position: relative !important;
text-align: center !important;
background: transparent !important;
white-space: nowrap !important;
line-height: 1.2 !important;
}

span.rating-general-audience.rating {
filter: hue-rotate(140deg) saturate(0.6) brightness(1.4);
}

span.rating-teen.rating {
filter: hue-rotate(255deg) saturate(0.5) brightness(1.15);
}

span.rating-mature.rating {
filter: hue-rotate(260deg) saturate(0.5) brightness(1.15);
}

span.rating-explicit.rating {
filter: hue-rotate(300deg) saturate(0.6) brightness(1.25);
}

span.rating-notrated.rating {
filter: brightness(1.6) saturate(0);
}

span.category-gen.category {
filter: hue-rotate(140deg) saturate(0.6) brightness(1.4);
}

span.category-slash.category {
filter: invert(1) hue-rotate(5deg) saturate(0.55) brightness(1.2) contrast(1.05);
}

span.category-het.category {
filter: hue-rotate(260deg) saturate(0.35) brightness(1.1);
}

span.category-femslash.category {
filter: hue-rotate(335deg) saturate(0.4) brightness(2.4) contrast(0.85);
}

span.category-multi.category {
filter: none !important;
}

span.category-none.category {
filter: brightness(1.6) saturate(0);
}

span.warning-choosenotto.warnings {
filter: hue-rotate(260deg) saturate(0.6) brightness(1.15);
}

span.warning-no.warnings {
filter: brightness(1.6) saturate(0);
}

span.warning-yes.warnings {
filter: hue-rotate(300deg) saturate(0.6) brightness(1.25);
}

span.complete-yes.iswip {
filter: hue-rotate(140deg) saturate(0.6) brightness(1.4);
}

span.complete-no.iswip {
filter: hue-rotate(300deg) saturate(0.6) brightness(1.3);
}