Navy Gold Theme

Dashboard → Skins → My Site Skins → Create Site Skin
Give your skin a name — for example: Navy Gold Theme
Expand the CSS block below, copy CSS, and paste the code into the CSS box.
Click Submit, then click Use to activate the skin.

Copy and paste the code exactly as written. Do not add or remove any characters.

Preview:

Click to expand the CSS

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

#main,
.listbox .index,
.thread .even,
#inner.wrapper {
background: #1e2d40;
}

.work.own,
li.blurb.work.own {
background: #1e2d40 !important;
color: #e8e4dc !important;
}

#outer.wrapper {
padding-top: 45px;
background: #0f1a2e;
}

#inner.wrapper {
margin-top: -15px;
}

#header .heading {
height: 220px;
}

#header {
background-color: #0f1a2e;
background-image: url("https://64.media.tumblr.com/3e39d534dd1b1a60d8eebf4f0f21d1d3/98402b84dc521427-19/s1280x1920/b969d987aa54b2769e613fc2ac55fa677ec4667d.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

#header .primary {
box-shadow: none;
background: rgba(15, 26, 46, 0.88);
border-top: 4px solid #c9a96e;
border-bottom: 4px solid #c9a96e;
}

#header .heading a {
font-size: 2.4em;
line-height: 1em;
text-transform: titlecase;
letter-spacing: .05em;
color: #e8e4dc;
}

#header .primary li:not(.search) {
background-color: #243550;
margin: 2px;
border-radius: 8px;
}

#header .primary li:not(.search) a,
#header .primary li:not(.search) a:visited {
color: #e8e4dc !important;
}

#header #search .text {
margin-top: 5px;
background: rgba(232, 228, 220, 0.1) !important;
border: 1px solid #c9a96e;
}

#greeting li,
#greeting li a {
color: #e8e4dc !important;
}

#greeting {
background: #8b5a42;
margin-top: 5px;
position: absolute;
top: -50px;
right: 0px;
}

#greeting .icon img {
margin-top: 0.2em !important;
border: 2px solid #c9a96e;
}

#greeting .menu {
width: 16em;
}

.system .latest h3,
.splash .module h3,
.system .tweets h3,
#workskin h2,
.preface h3 a {
color: #c9a96e;
}

.blurb h4 a:link {
color: #c9a96e !important;
}

#footer {
background: #1e2d40;
border: none;
color: #e8e4dc;
}

#footer a,
#footer li,
#footer ul li,
#footer .group li,
#footer .navigational li {
border: none !important;
box-shadow: none !important;
background: transparent !important;
outline: none !important;
}

.flash.notice,
.flash,
p.notice,
#main .notice,
.required-information,
[class*="required"] {
background: #1e2d40 !important;
color: #c9a96e !important;
border: 1px solid #c9a96e !important;
border-radius: 6px !important;
}

#footer a,
#footer a:visited,
#footer .heading {
color: #c9a96e !important;
}

.blurb .relationships a,
.blurb .relationships a:visited,
.work .relationships a,
.work .relationships a:visited,
dl.meta dd.relationship li a,
dl.meta dd.relationship li a:visited {
background: #8b5a42 !important;
color: #e8e4dc !important;
border-bottom: none !important;
padding: 0 4px;
}

.splash .favorite li:nth-of-type(odd) a:hover,
a.tag:hover,
#dashboard a:hover,
#header .dropdown .menu a:hover,
.blurb .relationships a:hover,
.work .relationships a:hover {
background: #c9a96e !important;
color: #0f1a2e !important;
}

#header .actions a:hover,
#header .dropdown:hover a,
#header .dropdown .menu a,
#greeting .dropdown .menu a {
background: #243550 !important;
color: #e8e4dc !important;
}

#header .dropdown .menu,
#greeting .dropdown .menu {
border: 1px solid #c9a96e;
}

#dashboard.own,
#dashboard {
background: #1e2d40;
box-shadow: 0 0 2px rgba(0,0,0,0.3);
color: #e8e4dc;
border: 2px solid #c9a96e;
}

#dashboard a,
#dashboard a:visited,
#dashboard li,
#dashboard li a,
#dashboard li a:visited {
color: #e8e4dc !important;
}

#dashboard .secondary {
background-color: rgba(36, 53, 80, 0.7);
}

#dashboard .current {
background: #8b5a42 !important;
color: #e8e4dc !important;
border-bottom: none;
}

li.blurb ul.tags li:before,
.blurb .fandoms:before {
content: "🐇";
font-weight: 600;
color: #c9a96e;
}

dl.meta dd.relationship li a:before,
dl.meta dd.character li a:before,
dl.meta dd.freeform li a:before,
dl.meta dd.warning li a:before,
.work .fandoms a:before {
content: "🐾";
font-weight: 600;
color: #c9a96e;
}

li.blurb,
.listbox li.blurb,
li.comment,
dl.meta,
#ibox_wrapper {
background: #1e2d40 !important;
border: 1px solid #c9a96e !important;
border-radius: 12px !important;
box-shadow: 0px 0px 6px rgba(201, 169, 110, 0.3) !important;
color: #e8e4dc;
}

li.blurb .header,
.listbox li.blurb .header {
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(201, 169, 110, 0.3) !important;
box-shadow: none !important;
}

li.blurb a,
li.blurb a:visited,
.listbox li.blurb a,
.listbox li.blurb a:visited,
li.comment a,
li.comment a:visited,
dl.meta a,
dl.meta a:visited,
dl.meta dd,
dl.meta dt,
.blurb p,
.blurb ul,
.blurb .summary,
.blurb .datetime {
color: #e8e4dc !important;
}

.blurb h4 a,
.blurb h4 a:visited {
color: #c9a96e !important;
}

.blurb .header {
border-bottom: 1px solid #c9a96e;
}

.splash .module h3,
.listbox h3,
.splash h3,
.module h3,
.listbox .heading,
h3.heading {
background: #1e2d40 !important;
color: #c9a96e !important;
border-bottom: 1px solid #c9a96e !important;
}

.listbox,
.splash .module,
.module {
background: #1e2d40 !important;
border: 1px solid #c9a96e !important;
color: #e8e4dc !important;
}

.listbox a,
.listbox a:visited,
.module a,
.module a:visited {
color: #c9a96e !important;
}

fieldset,
fieldset.work,
.work fieldset,
#work-form fieldset,
.post fieldset,
fieldset.options {
background: #1e2d40 !important;
border: 1px solid #c9a96e !important;
color: #e8e4dc !important;
}

fieldset legend,
fieldset .legend,
.post .legend {
background: #0f1a2e !important;
color: #c9a96e !important;
border: 1px solid #c9a96e !important;
}

fieldset label,
fieldset p,
fieldset dt,
fieldset dd,
.post label,
.post p {
color: #e8e4dc !important;
}

textarea,
input,
select {
background-color: #1e2d40 !important;
border: 1px solid #c9a96e !important;
border-radius: 8px !important;
color: #e8e4dc !important;
}

textarea:focus,
input:focus {
outline: 2px solid #8b5a42;
}

.summary .userstuff,
.notes .userstuff,
.preface .summary,
.preface .notes,
blockquote.userstuff,
.module.group {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}

#main .icon,
#main .icon img {
border-radius: 0;
border: 3px solid #c9a96e;
background: transparent;
overflow: hidden;
}

#workskin .userstuff {
font-size: 1.1em;
line-height: 1.4;
max-width: 55em;
margin: 0 auto !important;
color: #e8e4dc;
}

body {
font-size: 110%;
background: #0f1a2e;
color: #e8e4dc;
}

#workskin {
line-height: 1.4;
}

#kudos,
#kudos p,
#kudos a,
#kudos a:visited {
color: #e8e4dc !important;
}

#kudos a:hover {
color: #c9a96e !important;
}

li.comment .header,
li.comment .heading,
li.comment h4,
li.comment h4 a,
li.comment h4 a:visited,
li.comment .datetime,
ol.thread .comment .header,
ol.thread li.comment h4 {
background: #1e2d40 !important;
color: #c9a96e !important;
}

li.comment .header a,
li.comment .header a:visited {
color: #c9a96e !important;
}

#chapters .title,
.chapter .title,
h3.title,
.preface h3.title,
.chapter h3.title,
#chapters h3 {
color: #c9a96e !important;
}

.highlight {
color: #c9a96e;
font-weight: bold;
}

#workskin .userstuff,
#chapters .userstuff,
.chapter .userstuff,
.preface .notes,
.preface .notes .module,
.preface.group,
#chapters .preface,
.chapter.preface {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}

.work.own .actions a,
.work.own .actions button,
li.blurb .actions a,
li.blurb .actions button,
.actions a,
.actions input[type="submit"],
.actions button,
input[type="submit"],
input[type="button"],
input[type="checkbox"],
#main > .button,
#header .button,
#footer .button {
background: #1e2d40 !important;
color: #e8e4dc !important;
border: 1px solid #c9a96e !important;
border-radius: 6px !important;
}

.work.own .actions a:hover,
.work.own .actions button:hover,
.actions a:hover,
.actions button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
background: #c9a96e !important;
color: #0f1a2e !important;
}

#footer .group li a,
#footer li a[href*="skin"],
#footer .customize li,
#footer .customize li a {
border: none !important;
box-shadow: none !important;
outline: none !important;
background: transparent !important;
}

#inbox .actions a,
#inbox .actions button,
#inbox .actions input,
.inbox .actions a,
.inbox .actions button,
li.message .actions a,
li.message .actions button,
li.message .actions input,
li.comment .actions a,
li.comment .actions button,
li.comment .actions input[type="submit"],
a[href*="mark_as_read"],
a[href*="unread"],
input[value="Unread"],
input[value="Select"],
input[value="Mark Unread"],
input[value="Delete From Inbox"] {
background: #1e2d40 !important;
color: #e8e4dc !important;
border: 1px solid #c9a96e !important;
border-radius: 6px !important;
-webkit-appearance: none !important;
appearance: none !important;
}

#preview,
.userstuff {
background-color: #1e2d40 !important;
color: #e8e4dc !important;
}

#preview *,
.draft *,
#chapters *,
.chapter *,
.userstuff * {
color: #e8e4dc !important;
}

.userstuff a,
#chapters a,
.chapter a {
color: #c9a96e !important;
}

.series.module,
#series-and-collections,
.work .series,
.series.module.group {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}

.draft,
li.draft,
li.blurb.draft,
.work.draft,
li.work,
li.work.own,
li.blurb.own,
#statistics li,
#statistics .blurb,
#statistics li.blurb,
.stats li,
.stats li.blurb {
background: #1e2d40 !important;
color: #e8e4dc !important;
border-color: #c9a96e !important;
}

#statistics .chart,
#statistics canvas,
#statistics figure,
#statistics .module,
.chart-container,
figure.chart {
background: #1e2d40 !important;
color: #e8e4dc !important;
border: 1px solid #c9a96e !important;
}

#filters .expander,
#filters summary,
#filters .legend,
#filters .filter-title,
fieldset.filters summary,
fieldset.filters .expander,
.filter-title,
.expander {
color: #c9a96e !important;
}

#main > h2,
#main h2.heading,
.tag h2,
.tag h2 a,
.tag h2 a:visited,
h2.heading,
h2.heading a,
h2.heading a:visited {
color: #c9a96e !important;
}

#statistics .index li,
#statistics .index li:nth-child(odd),
#statistics .index li:nth-child(even),
#statistics .blurb,
#statistics .blurb:nth-child(odd),
#statistics .blurb:nth-child(even),
.own-stats .index li,
.own-stats li:nth-child(odd),
.own-stats li:nth-child(even),
.stats-table tr,
.stats-table tr:nth-child(odd),
.stats-table tr:nth-child(even),
#main .index li:nth-child(odd),
#main .index li:nth-child(even) {
background: #1e2d40 !important;
color: #e8e4dc !important;
}

#statistics *,
.own-stats * {
background-color: #1e2d40 !important;
color: #e8e4dc !important;
border-color: #c9a96e !important;
}

#statistics a,
#statistics a:visited,
.own-stats a,
.own-stats a:visited {
color: #c9a96e !important;
}

#user-info,
.user.home .primary,
#profile,
.user .primary,
#main .primary.module,
.home.primary,
[id*="user"] .primary {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

.autocomplete .added tag,
.autocomplete ul.added li,
.autocomplete .added li,
ul.tags.autocomplete li,
.fandom .autocomplete li,
li.input.tag,
ul.autocomplete li.added,
.tag_token,
.token-input-token,
.token-input-token p,
span.token-input-token,
#work_fandom_autocomplete_token_input,
.autocomplete-token,
li.token-input-token {
background: #1e2d40 !important;
color: #e8e4dc !important;
border: 1px solid #c9a96e !important;
}

Notes:

Got frustrated making this CSS. It needed a fixing numerous times because I was dumb and some codes just weren't coding 🥲

Series this work belongs to:

← Previous Work Part 3 of AO3 Skin

Actions

↑ Top

Kudos

Whateverdontcare, Grimaussiewitch, C0rvid_ERROR, and Kashpo as well as 2 guests left kudos on this work!

Comments

Sorry, this work doesn't allow non-Archive users to comment. You can however still leave Kudos!

Archive of Our Own

Actions

Work Header

Navy Gold Theme

pottachips

Summary:

Notes:

Work Text:

Notes:

Series this work belongs to:

Actions

Kudos

Comments

Footer

About the Archive

Contact Us

Development