ao3_skins | Making buttons flat and tweaking headers

After AO3 updated their code, the most of the action buttons on my layout (which used to be flat, basically just the text inside a box) reverted back to their default site skin appearance. The headers ("Find your favorites," "News," etc.) on the homepage are wonky too—they're either the default site color (maroon) or the wrong font (Lucida Grande when they should be Calisto MT).

I can't figure out the part of my CSS I need to tweak and was hoping someone could point me in the right direction x__x

Here's the CSS I'm using:

body,
.toggled form,
.dynamic form,
.secondary,
.dropdown {
  background: #fffff1;
  color: #1a1c26;
  font-size: 0.85em;
}

code {
  font-size: 1em;
}

a,
a:link {
  color: #ae9581;
}

#login-block,
li.blurb,
fieldset,
form dl {
  border: 1px solid #bcdada;
}

a,
a:link,
a:visited:hover {
  color: #ae9581;
}

a:visited {
  color: #038b97;
}

a:hover {
  color: #81aeab;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
  font-family: 'Calisto MT', 'Chaparral Pro', 'Berylium', 'Minion Pro Med', serif;
  text-shadow: none;
  font-style: italic;
}

table {
  background: #fffff1;
}

#header {
  background: #81aeab;
  color: #fff;
}

#header a,
#header a:visited,
#header .current,
#header .actions .open a,
#header .actions .dropdown:hover a,
#header .actions .dropdown a:focus,
#header .actions .current,
#header .user a:hover,
#header .user a:focus,
#header .user .current,
#header .actions .menu .current {
  color: #fff;
}

#header .heading {
  font-weight: 900;
  margin-top: 1.5em;
}

#header .heading img,
#greeting .icon {
  display: none;
}

#header .heading a {
  line-height: 1;
}

#header .actions .menu .current {
  font-weight: normal;
}

#greeting {
  margin-bottom: 1.5em;
}

#header .user .menu,
#header .user a:hover,
#header .user a:focus,
#header .user .open a,
#header .user .dropdown:hover a {
  background: #025d65;
}

#header .user .menu li {
  border-color: #81aeab;
}

#header .primary {
  background: #c0d7ce none;
  border-top: 3px solid #025d65;
  box-shadow: none;
}

#header .primary a,
#header .primary input {
  font-weight: bold;
  background: transparent;
  border-color: #c0d7ce;
  color: #fff;
}

#header .primary .menu,
#header .primary a:hover,
#header .primary a:focus,
#header .primary .open a,
#header .primary .dropdown:hover a {
  background: #038b97;
}

#header .primary .menu li {
  border-color: #c0d7ce;
}

#header .actions .menu a:hover,
#header .actions .menu a:focus {
  text-decoration: underline;
}

#header #search input[type="text"],
#header #search input[type="text"]:focus {
  color: #fff;
  font-weight: 400;
  background-color: #025d65;
  box-shadow: inset 0 0 0 1px #038b97;
  text-decoration: none;
}

#header #search input[type="submit"]:focus {
  box-shadow: none;
  color: #fff;
  text-decoration: underline;
}

#header h2 {
  padding: 0 6.5625em;
  border-top: 1px solid;
  text-shadow: none;
}

#dashboard li {
  text-align: left;
}

#dashboard a,
#dashboard span {
  color: #1a1c26;
  font-size: 90%;
}

#dashboard a:hover {
  background: transparent;
  color: #1a1c26;
  text-decoration: underline;
}

#dashboard ul {
  border-top: 0;
  padding-top: 0.5em;
}

#dashboard .current {
  background: #ddddff;
}

#dashboard .secondary {
  background: transparent;
  border: 0;
}

#dashboard.own {
  background: transparent;
  border: 0;
}

#footer {
  background: transparent none;
  border-top: 1px solid #b6b7bf;
  color: #999;
}

#footer .heading {
  color: #999;
}

#footer a {
  border: 0;
  color: #ae9581;
}

#footer a:hover {
  color: #038b97;
}

fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff {
  background: #ddeeff;
  border: 1px solid #ddeeff;
  box-shadow: none;
}

fieldset fieldset,
fieldset dl dl,
form blockquote.userstuff,
fieldset .index fieldset.listb ox .index {
  background: #fffff1;
}

input,
textarea {
  border: 1px solid #ddddff;
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
  background: #FAFAFA;
}

form dt {
  border-bottom: 1px solid #b6b7bf;
}

.autocomplete .dropdown ul li:hover,
li.selected {
  background: #ddeeff none;
  color: #8a6f59;
}

.ui-sortable li:hover {
  background: #aad5ff;
  border: 2px solid #999;
}

#ibox_wrapper {
  background: #fffff1;
  border: 10px solid #fffff1;
}

#ibox_content {
  background: #fffff1;
  border-bottom: 1px solid #bcdada;
}

.actions a,
.action,
.actions input,
input[type="submit"],
button,
.current,
.actions label {
  background: #fffff1;
  border-color: #bcdada;
  border-radius: 0;
  color: #ae9581;
}

.actions a:hover,
.actions input:hover,
.actions a:focus,
.actions input:focus {
  border-color: #bcdada;
  box-shadow: none;
  color: #81aeab;
  text-decoration: underline;
}

.actions a:visited {
  color: #038b97;
}

.actions a:active,
.current,
a.current,
.current a:visited {
  background: #ddddff;
  border-color: #bcdada;
  box-shadow: none;
  color: #1a1c26;
}

.delete a,
span.delete {
  border-radius: 0;
  box-shadow: none;
}

.secondary {
  background: #fff;
  border: 2px solid #ddddff;
  border-radius: 0;
  box-shadow: none;
}

dl.stats + .landmark + .actions {
  float: right;
}

dl.stats + .landmark + .actions {
  margin: 0 auto;
}

.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed {
  background: #ddeeff;
  opacity: 1.0;
}

.draft {
  border: 2px dashed #b6b7bf;
  border-radius: 0;
}

span.unread,
.replied,
span.claimed {
  background: #fffff1;
  border-color: #bcdada;
  border-radius: 0;
}

.own a.tag:hover,
.own li.relationships a.tag:hover {
  background: #ddddff;
}

.own li.relationships a {
  background: #fffff1;
}

a.tag,
.tags a {
  color: #8a6f59;
}

a.tag:hover,
.listbox .heading a.tag:visited:hover {
  background: #ddeeff;
  color: #8a6f59;
}

a.tag:visited {
  color: #9b9ca7;
}

.filters .tags li,
.review .tags {
  border-bottom: 1px dotted #ddddff;
}

.wrapper {
  box-shadow: none;
}

dl.index dd {
  background: #aad5ff;
  border: 1px solid #ddddff;
}

a.work {
  color: #81aeab;
}

li.relationships a,
.dashboard .own li.relationships a {
  background: #ddeeff;
}

li.relationships a.tag:hover {
  background: #bcdada;
}

.mods li,
dl.stats dt,
dl.stats dd {
  font-size: 1em;
}

.listbox,
fieldset fieldset.listbox {
  background: transparent;
  border: 1px solid #ddddff;
  border-color: transparent;
  box-shadow: 0 0 0 1px #fffff1;
  outline: none;
}

.listbox .many ul {
  background: #fff;
  border: 1px solid #ddddff;
}

.listbox .many li {
  background: #fffff1;
}

.listbox .many label.action {
  border: 0;
}

.listbox .heading,
.listbox .heading > a,
.listbox .heading > a:visited {
  color: #1a1c26;
}

.listbox h3.heading {
  background: #ddddff;
  display: block;
  letter-spacing: 1px;
}

.listbox .index,
.dashboard .listbox .index {
  background: transparent;
  box-shadow: none;
}

.media .listbox {
  background: #aad5ff;
  border: 0;
  box-shadow: 1px 2px 2px #9b9ca7;
  -moz-box-shadow: 1px 2px 2px #9b9ca7;
  -webkit-box-shadow: 1px 2px 2px #9b9ca7;
}

dl.meta {
  border: 1px solid #ddddff;
}

li.blurb,
.blurb .blurb {
  border: 0;
  border-bottom: 1px solid #bcdada;
  border-radius: 0;
  box-shadow: none;
}

.work li.blurb,
.collection li.blurb,
.history li.blurb,
.series li.blurb,
.tagset li.blurb {
  border-bottom: 0;
}

.blurb h4.heading a:link,
.blurb h4 img {
  color: #81aeab;
}

.blurb h4.heading a:hover {
  color: #038b97;
}

.blurb h4.heading a:visited {
  color: #025d65;
}

.blurb h5.heading a:link {
  color: #8a6f59;
}

.blurb h5.heading a:visited {
  color: #9b9ca7;
}

.blurb dl.stats {
  border-bottom: 1px solid #bcdada;
  float: none;
  padding-bottom: 0.5em;
}

.blurb.own dl.stats {
  padding-left: 0;
}

.picture .header {
  border-bottom: 1px dotted #aad5ff;
}

.bookmark .status span {
  border: 1px solid #ddeeff;
}

.bookmark .user {
  background: #aad5ff;
}

.preface h2.title {
  font-variant: normal;
}

div.comment,
li.comment {
  border: 1px solid #aad5ff;
}

.comment div.icon {
  border-bottom: 5px solid #aad5ff;
}

.comment h4.byline {
  background: #aad5ff;
}

.thread .even {
  background: #ddeeff;
}

.system .intro,
.system .module h2,
.system .intro a,
.system .intro em {
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
}

.system p#signup {
  text-shadow: none;
}

.system .latest h3,
.system div.news h3 {
  border-bottom: 1px solid #ddddff;
  color: #025d65;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
}

.admin .header h3 {
  background: #ddddff;
  line-height: normal;
  text-align: left;
}

.readings-index h3 {
  background: #aad5ff;
  font-size: 0.875em;
}

.search input[type="text"] {
  border-radius: 0;
  border-color: #999;
}

.search span.tip {
  background: #aad5ff;
  border: 1px solid #b6b7bf;
  color: #1a1c26;
}

form.filters fieldset {
  border: 1px solid #b6b7bf;
}

.filters dd {
  font-size: 1em;
}

.nomination dt {
  background: #fff;
}

.userstuff h2 {
  color: #333;
}

.userstuff table,
.userstuff td,
.userstuff col,
.userstuff tr,
.userstuff thead,
.userstuff tfoot,
.userstuff tbody,
.userstuff th,
.userstuff thead td,
.userstuff th a,
.userstuff th a:link {
  color: #222;
}

.flash,
div.error {
  border-radius: 0;
}

.notice,
.comment_notice,
ul.notes,
.caution,
.error,
.comment_error {
  border-radius: 0;
  box-shadow: none;
}

.error,
.comment_error {
  box-shadow: none;
}

span.symbol {
  color: #1a1c26;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
}

.question a:hover {
  background: #ddddff;
  border-color: #9b9ca7;
  color: #81aeab;
}

span.question {
  background: #ddddff;
  border-color: #9b9ca7;
  box-shadow: none;
}

#symbols-key dl {
  border: 1px solid #9b9ca7;
}

#user-fandoms ol.index {
  padding-bottom: 0;
  text-align: center;
}

#user-fandoms ol.index li {
  display: inline-block;
  margin-right: .5em;
}

#user-fandoms ol#fandom_full_list {
  padding-top: 0;
  padding-bottom: 1.5em;
  display: block !important;
}

#user-fandoms p.actions {
  display: none;
}

.verbose legend {
  background: #fffff1 !important;
  border: 1px solid #aad5ff !important;
  box-shadow: none !important;
}

#workskin {
  max-width: 60%;
}

#workskin img {
  max-width: 99%;
  height: auto;
}

Flat | Top-Level Comments Only

From:

sarken

Hi!

You'll need to add .actions a:link here:

.actions a,
.actions a:link,
.action,
.actions input,
input[type="submit"],
button,
.current,
.actions label {
background: #fffff1;
border-color: #bcdada;
border-radius: 0;
color: #ae9581;
}

And change

.system .latest h3,
.system div.news h3 {
border-bottom: 1px solid #ddddff;
color: #025d65;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
}

to

.splash .module h3 {
border-bottom: 1px solid #ddddff;
color: #025d65;
}

Hope this helps!

tropicsbear

It worked! Thank you~! *__*

S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

AO3 Skins

Making buttons flat and tweaking headers

Making buttons flat and tweaking headers

no subject

no subject

Profile

December 2024

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags