all you have to do is paste the css in a text post, we'd love to use this it looks so good!!!!
A lot of people have been asking for my AO3 skin code. Thanks for the tips on how to share this css with others. I hope you guys enjoy it. If there are any issues with the code, please let me know.
💬 9 🔁 8 ❤️ 155 · I created an AO3 site skin inspired by the Marauder’s Map from the Harry Potter. When you click or hover your mouse near
—————————————————
body {
font-family: 'Spectral', Georgia, serif;
background-color: #f4eee2;
color: #2e1d12;
background-image: url("https://64.media.tumblr.com/f445dc52c8918148aa690a28f9385cb4/7cc7a9d5ff8c3854-34/s2048x3072/fc1e0d40b5661a6a7c3ce9a9cd8a7b17cd6d1c87.png");
background-repeat: repeat;
background-size: 300px;
}
#header {
position: relative;
background: url("https://64.media.tumblr.com/f070f6ae4c87380870ccbdc68c943134/7cc7a9d5ff8c3854-a2/s1280x1920/22903e71b0c87d0c3030c14aa2c3d6b3d33f34b3.png") no-repeat center center;
background-size: cover;
height: 250px;
border-bottom: 2px dashed #3b2a1a;
}
#header .logo {
position: relative;
z-index: 2;
margin: 15px auto 0;
display: block;
max-width: 150px;
height: auto;
}
#header h1.heading a::before {
content: "I solemnly swear that I am up to no good.";
display: block;
font-family: 'Cinzel', serif;
font-size: 1.8em;
text-align: center;
color: #3b2a1a;
margin-top: 10px;
text-shadow: 1px 1px 2px #d6c6ae;
position: relative;
z-index: 1;
cursor: default;
}
#header h1.heading a::after {
content: "Mischief Managed.";
font-family: 'Cinzel', serif;
font-size: 1.2em;
text-align: center;
margin-top: 5px;
color: #3b2a1a;
opacity: 0;
transition: opacity 0.6s ease-in-out;
display: block;
}
#header h1.heading a:hover::after {
opacity: 1;
}
#outer.wrapper {
background: none;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-image: url("https://64.media.tumblr.com/5b41b48ccce874ea293e7503e1dce1fd/ad2373978cc6ca4e-52/s640x960/422f4d1e1b61066e11832919423caba615241c68.png") 25% round;
}
#inner.wrapper {
background: rgba(255, 252, 241, 0.9);
padding: 20px;
border: 2px dashed #3b2a1a;
}
#header .primary {
background: rgba(59, 42, 26, 0.85);
border-top: 2px dashed #c4b79c;
border-bottom: 2px dashed #c4b79c;
font-family: 'Cinzel', serif;
}
#header .primary li a {
color: #f4eee2 !important;
font-variant: small-caps;
text-shadow: 1px 1px 2px #000;
}
#workskin {
background: #fcf8ed;
padding: 1.5em;
border: 4px double #3b2a1a;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
font-family: 'Spectral', Georgia, serif;
text-align: justify;
}
#workskin h2 {
font-family: 'Cinzel', serif;
color: #581c0c;
border-bottom: 1px dotted #3b2a1a;
}
#workskin p:first-child::first-letter {
font-size: 3em;
font-family: 'Cinzel', serif;
color: #581c0c;
float: left;
padding-right: 10px;
line-height: 1;
}
a.tag {
background: #dcc8a4;
color: #3b2a1a !important;
border: 1px dashed #a67b5b;
font-weight: bold;
border-radius: 4px;
padding: 2px 6px;
margin: 1px 3px;
display: inline-block;
}
p.kudos {
background: #f7efe0;
border-left: 5px solid #5c3b1e;
padding: 0.5em 1em;
margin-top: 1em;
font-style: italic;
}
.notice,
.comment_notice,
.kudos_notice {
background: #e8d9b7;
border: 2px dashed #5c3b1e;
}
#footer {
background: #3b2a1a;
color: #f7f0e2;
text-align: center;
padding: 10px;
font-variant: small-caps;
border-top: 2px dashed #a67b5b;
}
#footer a {
color: #f7f0e2;
}
a,
a:visited {
color: #6b4c2a;
text-decoration: none;
border-bottom: 1px dotted #6b4c2a;
transition: color 0.3s ease;
}
a:hover,
a:focus {
color: #8b5e2c;
border-bottom: 1px solid #8b5e2c;
}
h2,
h3 {
font-family: 'Cinzel', serif;
color: #4a331c;
margin-bottom: 0.3em;
}
blockquote {
border-left: 3px solid #b08b57;
padding-left: 1em;
font-style: italic;
color: #5c4625;
background-color: #f9f5e9;
margin: 1em 0;
}
