ao3_skins | [Site Skin] Flat Buttons (Reply)

I hope someone reads this and has a solution. oTL

So, I'm using a custom skin I found years ago (I don't even remember where I got it, I'm sorry) when I started using AO3. I *think* I did some edits to this skin already, but I'm not sure where since it's been a really long time.

Anyway, I really want all the buttons to be flat (just text inside a box). I'm not sure if they were all flat before and an update reverted some buttons back to the default "bubble" style. But I'd really appreciate it if someone can help me with it. :)

Also, if it's possible - can all text (other than the site headers) be justified? As in, the tags, summary, author's notes, work/story area, and comment section? I'm pretty sure I *tried* doing it before with this skin but I'm not exactly a coder, so it didn't work.

Anyhoo. Here's the skin code that I'm currently using:

body,
.toggled form,
.dynamic form,
.secondary,
.dropdown {
  background: #F5F1ED;
  color: #261E1A;
}

a,
a:link {
  color: #3DA6AE;
}

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

a,
a:link,
a:visited:hover {
  color: #3DA6AE;
}

a:visited {
  color: #5C7B87;
}

a:hover {
  color: #A63E3F;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
  text-shadow: none;
}

table {
  background: #F5F1ED;
}

#header {
  background: #A63E3F;
  color: #fff;
  min-height: 0;
}

#header #login {
  float: right;
}

#header h1,
#header #greeting {
  position: static;
}

#header h1 {
  font-weight: bold;
  margin-bottom: .05em;
  padding: 0.75em 0.35em 0;
}

#header h1 a,
#header h1 a:visited,
#header h1 .landmark {
  font-size: .875em;
  opacity: 1.0;
  color: #fff;
}

#header h1 img {
  display: none;
}

#header ul.primary {
  background: #7AA4B4 none;
  border: 0;
  border-top: 3px solid #873233;
  box-shadow: none;
  height: 1.929em;
  padding: 0 0 0 3em;
  text-align: left;
}

#header .primary span.actions {
  float: none;
}

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

#header ul.primary a:hover,
#header .primary input[type="submit"]:hover {
  background: #5C7B87;
  border-color: #5C7B87;
  text-decoration: none;
}

#header .primary .current {
  background: #F5F1ED;
  border-bottom: 1px solid #F5F1ED;
  border-color: #F5F1ED;
  vertical-align: bottom;
}

#header .primary input[type="text"] {
  font-weight: 400;
  background-color: #7097A6;
  border: 1px solid #5C7B87;
  border-radius: 1em;
  text-decoration: none;
}

#greeting {
  position: static;
  font-size: 1em;
  padding: 0.5em 0.875em;
  width: auto;
}

#greeting .icon {
  background: transparent none;
  border: 0;
  float: none;
  height: auto;
  margin: 0;
  text-align: right;
  width: auto;
}

#greeting .icon .landmark,
#header #greeting .icon .landmark a {
  color: #fff;
  font-size: 1em;
  opacity: 1.0;
}

#greeting img {
  display: none;
}

#greeting ul.actions {
  float: none;
  padding: 0 0;
  text-align: right;
}

#greeting ul.actions a {
  border: 0;
}

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

#dashboard {
  margin-left: 1em;
  width: 11em;
}

#dashboard li {
  text-align: left;
}

#dashboard a,
#dashboard span {
  color: #261E1A;
  font-size: 90%;
}

#dashboard a:hover {
  background: transparent;
  color: #261E1A;
  text-decoration: underline;
}

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

#dashboard .current {
  background: #C7C3C1;
}

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

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

#footer {
  background: transparent none;
  border-top: 1px solid #BFBAB6;
  color: #BFBAB6;
  min-height: 0;
}

#footer ul {
  color: #999;
  margin: 0 0 1.5em;
  padding: 0;
}

#footer ul.navigation a {
  border: 0;
  color: #3DA6AE;
  padding: 0 0.25em;
}

#footer a:hover,
#footer ul.navigation a:hover {
  background: transparent;
  color: #5C7B87;
}

#footer p.beta {
  display: none;
}

#footer .secondary {
  background: transparent;
  box-shadow: none;
}

#footer .secondary li a {
  color: #3DA6AE;
}

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

fieldset fieldset,
fieldset dl dl,
form blockquote.userstuff,
fieldset .index fieldset.listbox .index {
  background: #F5F1ED;
}

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

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

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

.autocomplete .dropdown ul li:hover,
li.selected {
  background: #E5DFDF none;
  color: #686665;
}

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

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

#ibox_content {
  background: #F5F1ED;
  border-bottom: 1px solid #CFCBC8;
}

.actions a,
.action,
.actions input,
input[type="submit"],
button,
.current,
.actions label {
  background: #F5F1ED;
  border-color: #CFCBC8;
  border-radius: 0;
  color: #3DA6AE;
}

.actions a:hover,
.actions input:hover {
  border-color: #CFCBC8;
  box-shadow: none;
  color: #A63E3F;
  text-decoration: underline;
}

.actions a:visited {
  color: #5C7B87;
}

.actions a:active,
.current,
a.current,
.current a:visited {
  background: #C7C3C1;
  border-color: #CFCBC8;
  box-shadow: none;
  color: #261E1A;
}

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

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

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

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

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

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

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

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

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

a.tag,
.tags a {
  color: #686665;
}

a.tag:hover {
  background: #E5DFDF;
  color: #686665;
}

a.tag:visited {
  color: #827F7E;
}

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

.wrapper {
  box-shadow: none;
}

dl.index dd {
  background: #E0DADA;
  border: 1px solid #C7C3C1;
}

a.work {
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
  color: #A63E3F;
}

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

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

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

.listbox,
fieldset fieldset.listbox {
  background: transparent;
  border: 1px solid #C7C3C1;
  border-color: transparent;
  outline: none;
}

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

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

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

.listbox .heading,
.listbox .heading > a,
.listbox .heading > a:visited {
  color: #261E1A;
}

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

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

.media .listbox {
  background: #E0DADA;
  border: 0;
  box-shadow: 1px 2px 2px #827F7E;
  -moz-box-shadow: 1px 2px 2px #827F7E;
  -webkit-box-shadow: 1px 2px 2px #827F7E;
}

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

li.blurb,
.blurb .blurb {
  border: 0;
  border-bottom: 1px solid #CFCBC8;
  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: #A63E3F;
}

.blurb h4.heading a:hover {
  color: #5C7B87;
}

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

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

.blurb h5.heading a:visited {
  color: #827F7E;
}

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

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

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

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

.bookmark .user {
  background: #E0DADA;
}

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

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

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

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

.thread .even {
  background: #E5DFDF;
}

.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 #C7C3C1;
  color: #873233;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
}

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

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

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

.search span.tip {
  background: #E0DADA;
  border: 1px solid #BFBAB6;
  color: #261E1A;
}

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

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

.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: #261E1A;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
}

.question a:hover {
  background: #C7C3C1;
  border-color: #827F7E;
  color: #A63E3F;
}

span.question {
  background: #C7C3C1;
  border-color: #827F7E;
  box-shadow: none;
}

#symbols-key dl {
  border: 1px solid #827F7E;
}

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

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

#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: #F5F1ED !important;
  border: 1px solid #E0DADA !important;
  box-shadow: none !important;
}

[Site Skin] Flat Buttons

Post a comment in response: