Actions

Work Header

Rating:
Archive Warning:
Fandom:
Characters:
Additional Tags:
Language:
English
Series:
Part 4 of Site skins!
Stats:
Published:
2026-08-18
Completed:
2026-08-20
Words:
1,844
Chapters:
2/2
Comments:
2
Kudos:
9
Hits:
967

TWSB site skin

Summary:

A When the Third Wheel Strikes Back themed site skin. Just copy then paste it into the new skin area at the dashboard.

If there is any problems please tell me. Feel free to ask questions.

✨enjoy✨

❗️Update ❗️ Chapter two is a dark mode version.

Notes:

The art is by atousttoreadingandwrighting on tumblr at
https://64.media.tumblr.com/f985720a193fa06c79c91e50a9437474/d1309ef3001af8ae-3c/s1280x1920/03c9df380916202dbf15b12c56043475f356a7ba.png

If you have any other fandoms you want me to make a site skin for. Feel free to leave it’s name and the two colors that best represents it in the comments.

(See the end of the work for more notes.)

Chapter 1

Chapter Text



 

 

This is how it should look⬇️

 

 

 

 

 

#header {
  background-image: url("https://64.media.tumblr.com/f985720a193fa06c79c91e50a9437474/d1309ef3001af8ae-3c/s1280x1920/03c9df380916202dbf15b12c56043475f356a7ba.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-color: #9B6ABD;
}

#header .heading {
  height: 15em;
}

#header .primary {
  background: #AF915E;
  box-shadow: 0px 0px 10px #C5AC80;
}

#header .logo,
#header .heading sup {
  visibility: visible !important;
  color: #C5AC80 !important;
}

#header .heading a {
  color: #C5AC80 !important;
  text-shadow: 0px 0px 10px #C5AC80;
}

.event .userstuff {
  background: #513764;
  border: 1px solid #C5AC80;
}

#outer.wrapper {
  background: #513764;
  color: #C5AC80;
}

#main a {
  color: #F1BC60;
}

#greeting a.dropdown-toggle,
#header .actions a {
  color: #C5AC80 !important;
  text-shadow: 0px 0px 3px #9B6ABD;
}

#greeting .menu,
#header .dropdown .menu,
#header .dropdown:hover a {
  background: #513764;
  box-shadow: 0px 0px 15px #C5AC80;
}

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

#greeting img.icon {
  display: none;
}

#header #search .text,
.search [role="tooltip"] {
  background: #7B50A4;
  box-shadow: 0px 0px 15px #C5AC80;
  color: #C5AC80 !important;
  border: 1px solid #513764;
}

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

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

.notice,
.comment_notice,
.kudos_notice,
ul.notes,
.caution,
.error,
.comment_error,
.kudos_error,
.alert.flash {
  background: #C5AC80;
  box-shadow: 0px 0px 15px #C5AC80 !important;
  color: #513764;
  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: #F20095;
  font-weight: bold;
}

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

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

.splash .favorite li:nth-of-type(2n+2) a {
  color: #C5AC80;
  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: #C5AC80;
  font-weight: bold;
  font-variant: small-caps;
  background: #AF915E;
}

#footer {
  background: #6550A4;
  color: #C5AC80;
  border-top: 3px solid #C5AC80;
  box-shadow: 0px 0px 15px #C5AC80;
}

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

.actions a,
.actions a:focus,
.actions input:focus,
.action:focus,
.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: #513764;
  border: 1px solid #C5AC80;
  color: #C5AC80;
  box-shadow: 0px 0px 15px #C5AC80;
  border-radius: 5px;
}

.actions a,
.actions a:link,
.action,
.action:link,
.actions input,
input[type="submit"],
li.mark button,
li.chapter button,
li.download button,
button,
.current,
.actions label,
#header .actions a,
#header input[type="submit"],
#header .search input[type="text"] {
  background: #513764;
  border: 1px solid #C5AC80;
  color: #C5AC80;
  box-shadow: 0px 0px 15px #C5AC80;
  border-radius: 5px;
  text-shadow: none;
}

.actions a:hover,
.actions input:hover,
#dashboard a:hover,
#header .search input[type="text"]:hover,
#header .search input[type="submit"]:hover,
.actions a:focus,
.actions input:focus,
li.mark button:hover,
li.chapter button:hover,
li.download button:hover,
#dashboard a:focus,
#header .search input[type="text"]:focus,
#header .search input[type="submit"]:focus {
  background: #513764;
  border: 1px solid #C5AC80;
  color: #C5AC80;
  box-shadow: 0px 0px 15px #C5AC80;
  border-radius: 5px;
  text-shadow: none;
}

.current,
#dashboard .current {
  background: #C5AC80 !important;
  color: #513764 !important;
  box-shadow: 0px 0px 15px #C5AC80 !important;
  border-radius: 5px;
}

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

#dashboard a:hover {
  background: #513764;
  box-shadow: 0px 0px 15px #C5AC80;
}

#dashboard a {
  color: #C5AC80;
}

dl.meta {
  border: 1px solid #C5AC80;
  box-shadow: 0px 0px 15px #C5AC80;
}

.listbox .index {
  background: #513764;
}

.listbox,
fieldset fieldset.listbox {
  background: #C5AC80;
  box-shadow: 0px 0px 15px #C5AC80;
}

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: #513764 !important;
  color: #C5AC80 !important;
  border: 1px solid #C5AC80;
  box-shadow: 0px 0px 15px #C5AC80;
}

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

span.delete {
  background: #C5AC80;
  box-shadow: 0px 0px 15px #C5AC80;
}

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

.ui-sortable li,
.dynamic form,
div.dynamic {
  background: #513764;
  border: 1px solid #C5AC80;
}

.dropdown {
  background: #513764;
}

form.verbose legend,
.verbose form legend {
  background: #C5AC80;
  color: #513764;
  box-shadow: 0px 0px 15px #C5AC80;
}

li.blurb {
  border: 1px solid #C5AC80;
  box-shadow: 0px 0px 15px #C5AC80;
}

.draft {
  background: #513764;
  color: #C5AC80;
  border: 2px dashed #C5AC80;
  box-shadow: 0px 0px 15px #C5AC80;
}

.draft .wrapper {
  background: #513764;
  border: 1px solid #C5AC80;
}

#header h2 {
  background: #C5AC80 !important;
  color: #513764;
  box-shadow: 0px 0px 15px #C5AC80;
}

#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: #513764;
  border: 1px solid #C5AC80;
}

.reading h4.viewed,
dl.index dd,
table,
th,
dt.child {
  background: #513764;
}

#modal,
span.replied {
  background: #513764;
  color: #C5AC80;
  border: 2px solid #C5AC80;
  box-shadow: 0px 0px 15px #C5AC80;
}

h4.heading.byline {
  background: #C5AC80;
  color: #513764;
}

li.comment {
  border: 1px solid #C5AC80;
}

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

.thread .even {
  background: #6550A4;
}

.unread {
  background: #513764;
  border: 5px dashed #C5AC80 !important;
}

span.unread {
  background: #C5AC80;
  color: #513764;
}

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

.warnings .tag,
.work .warning a.tag,
dd.warning.tags a {
  border: 1px solid #C5AC80;
  border-radius: 5px;
  background: none;
  padding-left: 2px;
  padding-right: 2px;
  box-shadow: 0px 0px 5px #C5AC80;
}

.relationships .tag,
.work .relationships a.tag,
dd.relationship.tags a {
  background: none;
  color: #C5AC80 !important;
  font-weight: bold;
  text-shadow: 0px 0px 15px #C5AC80;
}

.filters .expander {
  background: url("https://64.media.tumblr.com/3c89981f933f9f57157d6dcec6fd85a7/94c6737c6db9ad60-e5/s1280x1920/f7557e617a5439c506721bd326580a0cb4c1f8d8.png") left center no-repeat;
  color: #C5AC80 !important;
  font-weight: bold;
}

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