Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Character:
Additional Tags:
Language:
English
Series:
Part 7 of Ao3 Site Skins
Stats:
Published:
2026-07-30
Words:
1,419
Chapters:
1/1
Kudos:
6
Bookmarks:
1
Hits:
313

Naruto Ao3 site skins

Summary:

Site skins to use and modify! I take suggestions!! :p

Done"
Sasuke- dark mode

How to make a skin:

1. Go to Skin

2. create (site) skin

3. Title the skin something unique

4. Paste the CSS (below)

Work Text:

 

 

#header {

  background-image: url("https://64.media.tumblr.com/31cfb1d8916373037e48ab1a07590fff/f8aa66d20b76d1b4-17/s1280x1920/badf54069d045f480e41f15b36b62b57440fc29d.jpg");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: bottom;

  background-color: #0b0d1c;

}

 

#header .heading {

  height: 13em;

}

 

#header .primary {

  background: #0a0a1c;

  box-shadow: 0px 0px 15px #d2cef9;

}

 

#header .logo,

#header .heading sup {

  visibility: hidden;

}

 

#header .heading a {

  color: #0b0d1c;

  text-shadow: 0px 0px 15px #d2cef9;

}

 

.event .userstuff {

  background: #44415e;

  border: 1px solid #d2cef9;

}

 

#outer.wrapper {

  background: #0a0a1c;

  color: #d2cef9;

}

 

#main a {

  color: #664d9e;

}

 

#greeting a.dropdown-toggle,

#header .actions a {

  color: #d2cef9 !important;

  text-shadow: 0px 0px 3px #0b0d1c;

}

 

#greeting .menu,

#header .dropdown .menu,

#header .dropdown:hover a {

  background: #0a0a1c;

  box-shadow: 0px 0px 15px #d2cef9;

}

 

span.submit.actions input.button {

  display: none;

}

 

#greeting img.icon {

  display: none;

}

 

#header #search .text,

.search [role="tooltip"] {

  background: #0a0a1c;

  box-shadow: 0px 0px 15px #d2cef9;

  color: #d2cef9 !important;

  border: 1px solid #0a0a1c;

}

 

form.search input[type=text],

form.search input[type=submit],

.autocomplete div.dropdown ul {

  background: #0a0a1c !important;

  border: none;

  box-shadow: 0px 0px 15px #d2cef9;

  color: #d2cef9;

  display: block;

}

 

#header #search .text {

  width: 7em;

}

 

.notice,

.comment_notice,

.kudos_notice,

ul.notes,

.caution,

.error,

.comment_error,

.kudos_error,

.alert.flash {

  background: #d2cef9;

  box-shadow: 0px 0px 15px #d2cef9 !important;

  color: #0a0a1c;

  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: #b29ad9;

  font-weight: bold;

}

 

.splash .module h3 {

  color: #d2cef9;

  border-bottom: 2px solid #d2cef9;

}

 

.splash .favorite li:nth-of-type(2n+1) a {

  background: #d2cef9;

  box-shadow: 0px 0px 15px #d2cef9;

  color: #0a0a1c;

  font-weight: bold;

  font-variant: small-caps;

}

 

.splash .favorite li:nth-of-type(2n+2) a {

  color: #d2cef9;

  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: #d2cef9;

  font-weight: bold;

  font-variant: small-caps;

  background: #b29ad9;

}

 

#footer {

  background: #b29ad9;

  color: #d2cef9;

  border-top: 3px solid #d2cef9;

  box-shadow: 0px 0px 15px #d2cef9;

}

 

#footer a,

#footer .heading {

  color: #d2cef9;

}

 

button,

.action,

.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: #B29AD8;

  border: 1px solid #d2cef9;

  color: #674E9F;

  box-shadow: 0px 0px 15px #d2cef9;

  border-radius: 5px;

}

 

.action:link:hover,

.action a:link:hover,

.action a:hover,

.navigation a:hover,

.submit a:hover,

.actions button:hover,

input[type=“submit”]:hover,

button:hover {

  color: #674E9F;

}

 

.current,

#dashboard .current {

  background: #d2cef9 !important;

  color: #0a0a1c !important;

  box-shadow: 0px 0px 15px #d2cef9 !important;

  border-radius: 5px;

}

 

#dashboard.own {

  border-top: 5px solid #d2cef9;

  border-bottom: 5px solid #d2cef9;

  box-shadow: 0px 0px 15px #d2cef9;

}

 

#dashboard a:hover {

  background: #0a0a1c;

  box-shadow: 0px 0px 15px #d2cef9;

}

 

#dashboard a {

  color: #d2cef9;

}

 

dl.meta {

  border: 1px solid #d2cef9;

  box-shadow: 0px 0px 15px #d2cef9;

}

 

.listbox .index {

  background: #0a0a1c;

}

 

.listbox,

fieldset fieldset.listbox {

  background: #d2cef9;

  box-shadow: 0px 0px 15px #d2cef9;

}

 

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: #0a0a1c !important;

  color: #d2cef9 !important;

  border: 1px solid #d2cef9;

  box-shadow: 0px 0px 15px #d2cef9;

}

 

.autocomplete li.added,

.post .meta dd ul li.added,

label,

label.required {

  color: #d2cef9;

}

 

span.delete {

  background: #d2cef9;

  box-shadow: 0px 0px 15px #d2cef9;

}

 

span.delete a {

  color: #0a0a1c !important;

  font-weight: bold;

}

 

.ui-sortable li,

.dynamic form,

div.dynamic {

  background: #0a0a1c;

  border: 1px solid #d2cef9;

}

 

.dropdown {

  background: #0a0a1c;

}

 

form.verbose legend,

.verbose form legend {

  background: #d2cef9;

  color: #0a0a1c;

  box-shadow: 0px 0px 15px #d2cef9;

}

 

li.blurb {

  border: 1px solid #d2cef9;

  box-shadow: 0px 0px 15px #d2cef9;

}

 

.draft {

  background: #0a0a1c;

  color: #d2cef9;

  border: 2px dashed #d2cef9;

  box-shadow: 0px 0px 15px #d2cef9;

}

 

.draft .wrapper {

  background: #0a0a1c;

  border: 1px solid #d2cef9;

}

 

#header h2 {

  background: #d2cef9 !important;

  color: #0a0a1c;

  box-shadow: 0px 0px 15px #d2cef9;

}

 

#stat_chart svg rect:first-of-type {

  opacity: 60%;

}

 

#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect,

#stat_chart svg g:nth-of-type(2) > g rect:last-of-type,

#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect:first-of-type {

  filter: hue-rotate(140deg);

  opacity: 80% !important;

}

 

.statistics .index li:nth-of-type(2n) {

  background: #0a0a1c;

  border: 1px solid #d2cef9;

}

 

.reading h4.viewed,

dl.index dd,

table,

th,

dt.child {

  background: #0a0a1c;

}

 

#modal,

span.replied {

  background: #0a0a1c;

  color: #d2cef9;

  border: 2px solid #d2cef9;

  box-shadow: 0px 0px 15px #d2cef9;

}

 

h4.heading.byline {

  background: #d2cef9;

  color: #0a0a1c;

}

 

li.comment {

  border: 1px solid #d2cef9;

}

 

.comment div.icon {

  border-bottom: 5px solid #d2cef9;

  box-shadow: 0px 0px 15px #d2cef9;

}

 

.thread .even {

  background: #b29ad9;

}

 

.unread {

  background: #0a0a1c;

  border: 5px dashed #d2cef9 !important;

}

 

span.unread {

  background: #d2cef9;

  color: #0a0a1c;

}

 

span.indicator::before {

  box-shadow: 0px 0px 15px #d2cef9;

}

 

.warnings .tag,

.work .warning a.tag,

dd.warning.tags a {

  border: 1px solid #d2cef9;

  border-radius: 5px;

  background: #d2cef9;

  padding-left: 2px;

  padding-right: 2px;

  box-shadow: 0px 0px 10px #d2cef9;

}

 

.relationships .tag,

.work .relationships a.tag,

dd.relationship.tags a {

  color: #d2cef9 !important;

}

 

.filters .expander {

  background: url("https://64.media.tumblr.com/3c89981f933f9f57157d6dcec6fd85a7/94c6737c6db9ad60-e5/s1280x1920/f7557e617a5439c506721bd326580a0cb4c1f8d8.png") left center no-repeat;

  color: #d2cef9 !important;

  font-weight: bold;

}

 

.filters .expanded .expander {

  background: url("https://64.media.tumblr.com/dab095a2fd9387bc1e0c57747ba6b13f/94c6737c6db9ad60-ad/s1280x1920/c1a4e14e0565cdcac5d3e20bebac3ab440f2d607.png") left center no-repeat;

}

 

ol.pagination {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

}

 

ol.pagination::before {

  content: '';

  width: 100%;

  order: 1;

}

 

ol.pagination li:nth-child(1) {

  order: 2;

}

 

ol.pagination li:last-child {

  order: 3;

}

 

ol.pagination li {

  align-content: center;

  margin-bottom: 0px;

  margin-top: 0px;

}

 

.blurb h4.heading a:link:visited,

.blurb h4.heading a:visited {

  color: #b2b0d8 !important;

}

 

.blurb .header ul.required-tags {

  display: flex;

  flex-wrap: nowrap;

  column-gap: 1em;

  position: unset;

  width: auto;

  margin-block: 0.375em;

}

 

.blurb:not(.picture.blurb,

.mystery.blurb) .header .heading {

  margin-left: 0;

}

 

span.rating,

span.category,

span.warning-yes,

span.warning-no,

span.warning-choosenotto,

span.complete-yes,

span.complete-no {

  background-image: none !important;

  width: 100%;

}

 

.blurb span.text {

  line-height: 1.75em;

  font-size: 100%;

}

 

.blurb .header ul.required-tags li {

  position: unset;

  text-wrap: nowrap;

  padding-right: 2em;

}

 

.blurb .header ul.required-tags li span.text::before {

  content: "Rating: ";

  color: #d2cef9;

  font-weight: bold;

}

 

.blurb .header ul.required-tags li span.text {

  color: #6600ba;

  font-weight: normal;

}

 

.blurb .header ul.required-tags li + li {

  position: relative;

  top: 1.4em;

  left: -5em;

}

 

.blurb .header ul.required-tags li + li span.text::before {

  content: "Warnings: ";

  color: #d2cef9;

  font-weight: bold;

}

 

.blurb .header ul.required-tags li + li span.text {

  font-weight: normal;

}

 

.blurb .header ul.required-tags li + li + li {

  position: relative;

  top: 2.8em;

  left: -10em;

}

 

.blurb .header ul.required-tags li + li + li span.text::before {

  content: "Category: ";

  color: #d2cef9;

  font-weight: bold;

}

 

.blurb .header ul.required-tags li + li + li span.text {

  color: #0025ba;

  font-weight: normal;

}

 

.blurb .header ul.required-tags li + li + li +li {

  position: relative;

  top: 4.2em;

  left: -15em;

}

 

.blurb .header ul.required-tags li + li + li +li span.text::before {

  content: "Status: ";

  color: #d2cef9;

  font-weight: bold;

}

 

.blurb .header ul.required-tags li + li + li +li span.text {

  color: #0051ba;

  font-weight: normal;

}

 

li.warnings {

  display: none !important;

}

 

ul.tags.commas {

  margin-top: 3.4em;

}

 

li.blurb blockquote.userstuff.summary {

  padding-top: 1em;

}

 

ul.tags li.warnings,

ul.tags li.relationships,

ul.tags li.characters,

ul.tags li.freeforms {

  float: left !important;

  color: #d2cef9;

}

 

li.warnings + li.relationships,

li.relationships + li.characters,

li.characters + li.freeforms,

li.warnings + li.characters,

li.warnings + li.freeforms,

li.relationships + li.freeforms {

  clear: left;

  color: #d2cef9;

}

 

ul.tags li {

  margin: 0;

}

 

ul.tags li a.tag {

  line-height: 1.5;

}

 

.commas li:after {

  content: " • ";

}

 

ul.tags li.warnings:first-child:before {

  content: "Archive Warnings: ";

  font-weight: bold;

}

 

li.warnings + li.relationships:before {

  content: "Relationships: ";

  font-weight: bold;

  background: rgba(178, 154, 216,0.5);

}

 

li.relationships + li.characters:before {

  content: "Characters: ";

  font-weight: bold;

  background: rgba(178, 154, 216,0.5);

}

 

li.characters + li.freeforms:before {

  content: "Additional Tags: ";

  font-weight: bold;

  background: rgba(178, 154, 216,0.5);

}

 

li.warnings + li.characters:before {

  content: "Characters: ";

  font-weight: bold;

  color: rgba(178, 154, 216,0.5);

}

 

li.warnings + li.freeforms:before {

  content: "Additional Tags: ";

  font-weight: bold;

}

 

li.relationships + li.freeforms:before {

  content: "Additional Tags: ";

  font-weight: bold;

}

 

li.blurb ul.tags a {

  border-bottom: none;

}

 

li.blurb ul.tags li.relationships a {

  background: none;

}

 

li.blurb ul.tags li.warnings a {

  font-weight: normal;

}

 

.index .skins .icon {

  display: none;

}

 

li.blurb .tags {

  max-height: 7.5em;

  overflow-y: auto;

}

 

li.mark button {

  background: #b29ad9 !important;

  border: 1px solid #d2cef9;

  color: #664d9e !important;

  box-shadow: 0px 0px 15px #d2cef9;

  border-radius: 5px;

}

 

li.mark button:hover {

  background-color: #b29ad9 !important;

  box-shadow: 0px 0px 15px #d2cef9;

  border-radius: 5px;

}

 

#header #greeting img,

#header .heading a,

#header fieldset,

#header form,

#header p,

#header .user a:hover,

#header .user a:focus,

#header .user .current,

#dashboard a:hover {

  color: #DDD6FF;

}

 

#header h1 img {

  display: none;

}

 

#header h1 {

  position: static;

}

 

#header h1 .landmark {

  opacity: 1;

  font-size: 100%;

  color: #000;

  line-height: 1;

  height: auto;

  width: auto;

  display: inline;

}

 

#header h1 a span:hover {

  color: #999;

}

 

li.download button {

  background: #b29ad9 !important;

  border: 1px solid #d2cef9;

  color: #664d9e !important;

  box-shadow: 0px 0px 15px #d2cef9;

  border-radius: 5px;

}

 

.autocomplete .dropdown ul li:hover,

li.selected,

a.tag:hover {

  background: #C4B4FF;

}

Series this work belongs to: