Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Additional Tags:
Language:
English
Series:
Part 2 of aeri's site skins
Stats:
Published:
2025-04-14
Words:
914
Chapters:
1/1
Comments:
5
Kudos:
45
Bookmarks:
8
Hits:
926

[Site Skin] White & Blue Coquette Skin

Summary:

Cutie white and blue site skin for ao3, feel free to modify as you wish!!

Work Text:

Preview of skin:

CSS (copy and paste this below):

 

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

#header,
#inner.wrapper {
  margin: 0em;
}

li.relationships a,
#outer.wrapper,
#main,
.listbox .index,
.work.own {
  background: #f0ece9;
}

#outer.wrapper {
  background: #a1a9bc;
  padding-top: 140px;
  background-image: url("https://i.postimg.cc/Gt3b0XNQ/f73205c91b6500fa1d8f4f115ca82397.jpg");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 200px;
}

#header .heading {
  margin: 20px 0px 10px 5px;
  border: 2px solid #a1a9bc;
  background-color: #f0ece9;
  border-radius: 20px;
}

#header {
  background-color: #f0ece9;
  border-radius: 20px;
  border: 10px solid #a1a9bc;
  box-shadow: 0 0 4px #000;
}

#header .primary {
  box-shadow: none;
  background: none;
  color: #FFFFFF;
}

#header .primary li:first-child {
  margin-left: 0em;
}

#header .primary li,
#header .primary li a,
#greeting li,
#greeting li a {
  color: #54453B !important;
}

#header .heading a {
  color: #54453B;
  padding: 20px;
}

#greeting {
  background: none;
  margin-right: 0em;
  color: #54453B;
}

#greeting li {
  clear: left;
  border-bottom: 1px dashed #a1a9bc;
  margin-top: 0.3em !important;
}

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

#greeting .dropdown .menu li {
  margin: 0 0.125em !important;
}

#greeting .menu {
  width: 16em;
}

.splash .favorite li:nth-of-type(odd) a {
  background: #f0ece9;
}

#footer .menu a,
#footer .menu {
  color: #6D5A4D;
}

#workskin h2,
.system .latest h3,
.splash .module h3,
.system .tweets h3 {
  color: #54453B;
}

#footer {
  border: none;
  background: none;
}

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

#footer h4 {
  color: #54453B !important;
}

.splash .favorite li:nth-of-type(odd) a:hover,
.splash .favorite li:nth-of-type(odd) a:focus,
a.tag:hover,
a.tag:focus,
#dashboard a:hover,
#dashboard a:focus,
#dashboard .current,
#header .dropdown .menu a:hover,
#header .dropdown .menu a:focus {
  background: #a1a9bc !important;
  color: #fff !important;
}

#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a,
#header .dropdown .menu a,
#header .dropdown .menu,
#greeting .dropdown .menu,
#greeting .dropdown .menu a {
  background: #a1a9bc !important;
  color: #000 !important;
}

#dashboard,
#dashboard.own {
  background: #f0ece9;
  color: #000;
  border: 2px solid #a1a9bc;
  box-shadow: 0 0 2px #000;
}

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

#header .dropdown .menu li,
#greeting .current,
#greeting .dropdown:hover li,
#greeting .dropdown:focus li {
  box-shadow: none;
  background: #f0ece9 !important;
  color: #000 !important;
}

#dashboard ul {
  background: transparent;
  border: none;
}

#dashboard .secondary {
  background-color: #fff;
  box-shadow: none;
}

.splash .module h3,
.splash .news li,
.home .header h2 {
  border-color: #a1a9bc;
}

li.comment,
dl.meta,
.bookmark .user,
#header .menu li,
#dashboard ul,
#dashboard .secondary,
ul.notes,
.flash,
.notice,
tbody tr,
thead td,
#header #small_login,
fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
form dt,
.actions a:active,
.current,
a.current,
.current a:visited,
.search span.tip,
.listbox,
fieldset fieldset.listbox {
  border-color: #a1a9bc;
}

.comment h4.byline,
#main .verbose legend,
.unread,
.child,
.unwrangled,
.unreviewed,
.verbose fieldset,
.draft,
form ul.notes,
#modal,
.ui-sortable li,
.comment_notice,
.kudos_notice,
div.dynamic,
#ui-datepicker-div,
.ui-datepicker table {
  background-color: #f0ece9;
  border-color: #a1a9bc;
}

.flash,
.notice {
  background-color: #a1a9bc;
  border-color: #f0ece9;
}

form .notice,
ul.notes,
.caution {
  background-color: #f0ece9;
  border-color: #900;
  color: #000;
}

.alert.flash,
.error,
.comment_error,
.kudos_error {
  background: #efd1d1;
  color: #000;
  border-color: #900;
}

h2 {
  font-size: 1.286em;
  line-height: 1;
  margin: 0.5375em 0;
}

.listbox,
.bookmark .user,
.bookmark .user .header,
.reading h4.viewed,
li.relationships a,
.dropdown,
fieldset fieldset.listbox,
fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
.dynamic form fieldset,
.toggled form fieldset,
.toggled form dl,
.secondary .toggled form,
.secondary form,
.required .autocomplete {
  background-color: #f0ece9;
}

.bookmark .user {
  border-radius: 5px;
}

.filters .submit input {
  color: #54453B;
  background: #f0ece9;
  border: 1px solid #a1a9bc;
  border-radius: 10px;
  box-shadow: 0 0 4px #000;
}

.filters fieldset {
  border-radius: 20px;
}

li.blurb,
.listbox li.blurb,
li.comment,
.statistics .index li:nth-of-type(even),
dl.meta,
dl.index dd,
#ibox_wrapper,
#ibox_content,
textarea:focus,
input:focus,
select:focus {
  background-color: #f0ece9;
}

.thread .even,
textarea,
input,
select,
option,
.toggled form,
.dynamic form,
.autocomplete .dropdown ul,
.autocomplete .dropdown ul li,
.autocomplete input {
  background-color: #fff;
}

li.blurb,
.listbox li.blurb {
  border: 4px solid #a1a9bc;
  border-radius: 20px;
  box-shadow: 0 0 4px #000;
}

.blurb .header {
  border-bottom: 2px solid #a1a9bc;
}

.bookmark .user .module {
  border: none;
}

.reading h4.viewed,
.bookmark .user {
  box-shadow: none;
}

.reading h4.viewed {
  border: 1px dashed #a1a9bc;
}

.icon {
  border: 2px solid #fff;
}

.comment div.icon {
  border-bottom: none;
}

#workskin .notes,
dl.meta,
.reading h4.viewed,
.bookmark .user,
.comment .posted,
.comment .edited {
  font-size: 100%;
}

#workskin {
  text-align: justify;
}

#workskin h2 {
  font-size: 2.7em;
  color: #6D5A4D;
}

ul.tags li.warnings,
ul.tags li.relationships,
ul.tags li.characters,
ul.tags li.freeforms {
  float: left !important;
  margin: 0;
  padding: 2px;
}

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;
}

ul.tags li.warnings:first-child:before {
  content: "Warnings: ";
  color: #54453B;
  font-family: Georgia,serif;
  font-weight: 600;
}

li.warnings + li.relationships:before {
  content: "Relationships: ";
  color: #54453B;
  font-family: Georgia,serif;
  font-weight: 600;
}

li.relationships + li.characters:before {
  content: "Characters: ";
  color: #54453B;
  font-family: Georgia,serif;
  font-weight: 600;
}

li.characters + li.freeforms:before {
  content: "Other tags: ";
  color: #54453B;
  font-family: Georgia,serif;
  font-weight: 600;
}

li.warnings + li.characters:before {
  content: "Characters: ";
  color: #54453B;
  font-family: Georgia,serif;
  font-weight: 600;
}

li.warnings + li.freeforms:before {
  content: "Other tags: ";
  color: #54453B;
  font-family: Georgia,serif;
  font-weight: 600;
}

li.relationships + li.freeforms:before {
  content: "Other tags: ";
  color: #54453B;
  font-family: Georgia,serif;
  font-weight: 600;
}

li.blurb blockquote p:first-child::before {
  content: "About: ";
  color: #54453B;
  font-size: 100%;
  font-family: Georgia,serif;
  font-weight: 600;
}

.blurb ul.series::before {
  content: "Series: ";
  color: #54453B;
  font-family: Georgia,serif;
  font-weight: 600;
}

.blurb .fandoms::before {
  content: "Fandom: ";
  color: #54453B;
  font-family: Georgia,serif;
  font-weight: 600;
}

#header h2 {
  background-color: #B85C48 !important;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#workskin {
  text-align: justify;
  background: #fff;
  margin-top: 10px;
  padding: 0px 15px 0px 15px;
  max-width: 100%;
  border: 2px solid #a1a9bc;
}

Series this work belongs to: