Triumph is mine!

[branchandroot]

Lo, I have finished (I think) my first skin for AO3!





I'm happy to offer the css to anyone who wants it, but I'm not applying to make it public yet because to make it really work requires an "auxiliary" style sheet in your browser styles for the handful of things the skin-maker spazzed over. Stylish is our friend.

But I'm really pretty pleased with this one. *basks in the happy glow of success*

So, the css. Unfortunately, the title will only look that spiffy if you're on a Mac. Windows users should look down to where it says #header h1 {font-family: Zapfino, cursive; }, and put your favorite large, pretty font in place of "Zapfino".


This goes in the AO3 dialogue:

/* Styling the Page Spacing/Layout ver. More Elbowroom */
#main {
margin: 1em 3%;
}

#main.sidebar {
margin: 1em 3% 1em 15em;
}

#dashboard ul {
margin-left: 3%;
}

.works-index .index {
width: 73%;
}


/* Styling the Banner */
#header {
background: none;
padding: 1em;
margin-bottom: 3em;
}

#header .clear {
background: none;
border: none;
}

#header h1 {
font-family: Zapfino, cursive;
font-style: italic;
font-size: 1.75em;
margin: 1.5em 0;
}

#header div#login-block {
margin-top: -.5em;
}

p#greeting,
ul#login,
#search {
float: none;
display: inline;
margin-right: 1em;
}

#search {
width: 19em;
}

#header input.button {
float: right;
}

#header ul.navigation {
border-left: none;
}

#header .navigation a {
border: 1px solid !important;
background: none;
border-radius: 1em;
}

#header .navigation a,
#header .navigation .current {
padding: .25em .5em;
margin-right: .5em;
}


/* Styling the Headers */
.profile .module h3,
.media-index li.category h3 {
margin: 1em 0;
padding: .25em;
background: transparent;
}


/*currently separated out to remind me this one glitches hard and half its stuff is in Stylish*/
.profile .module h3,
.media-index li.category h3 {
border-radius: 1em;
}

.media-index li.category h3 a {
border-bottom: none !important;
}

.fandoms-index li.letter h3 {
background: transparent;
border-bottom: 1px solid;
font-weight: bold;
}


/* Styling the Sidebars */
form.filters {
border-radius: .5em;
border-top: none;
border-bottom: none;
}

form.filters {
background: transparent;
}

form.filters dt {
background: transparent;
}

.filters dt:hover {
background: transparent;
text-decoration: underline;
}

#dashboard ul {
border-top: none;
border-bottom: none;
border-radius: .5em;
padding: .25em 0;
}

#dashboard li {
padding: .15em 0;
}

#dashboard a:hover {
background: transparent;
text-decoration: underline;
border: none;
}

#dashboard li:hover {
background: transparent;
}

#dashboard span.current {
background: transparent !important;
text-decoration: underline;
}


/* Styling of works lists */
/*the overflow ensure the boxes enclose the floated buttons at the bottom; do not take it out!*/
li.blurb {
padding: 1em !important;
border-top: 1px solid !important;
border-bottom: 1px solid !important;
border-radius: 1em !important;
margin-bottom: 3em !important;
overflow: auto;
}

li.bookmark.blurb {
border-left: none;
border-right: none;
}


/*this will keep a works blurb in a 'show all its bookmarks' list from having sides*/
.bookmarks-index .work.blurb,
.bookmarks-index .series.blurb {
border-style: solid none;
}

.bookmark .user {
border-radius: 1em;
padding: 1em;
overflow: auto;
}


/* to get rid of the redundant bookmark symbol count*/
.bookmark p.count span {
display: none;
}

#main .datetime {
font-family: inherit;
font-size: .75em;
right: 1em;
top: .5em;
}


/* change tags hover behavior to better indicate they're links */
a.tag:hover,
ul.tags a.tag:hover {
background: transparent !important;
border-bottom: none !important;
}

div.header h4 a:hover {
border-bottom: none !important;
}


/* separate tag sets onto different lines */
ul.tags {
padding-top: .5em;
}

ul.tags li.warnings,
ul.tags li.relationships,
ul.tags li.characters,
ul.tags li.freeforms {
float: left !important;
}

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


/* get rid of the commas; note the undo for this is in the Color section at the bottom*/
ul.tags li {
color: transparent;
}


/* make the labels appropriately bold and such */
ul.tags li.relationships a {
font-style: italic !important;
}

ul.tags li {
padding-left: .5em;
line-height: 1 !important;
font-weight: bold !important;
}

a.tags,
.tags a {
line-height: 1;
}


/* to undo the above bolding for the tags themselves, but redo it for Warnings */
ul.tags a.tag {
font-weight: normal !important;
}

ul.tags li.warnings a.tag {
font-weight: bold !important;
}


/* now, clear the floated tags with what's below them */
blockquote.summary {
font-size: 1.10em !important;
clear: both;
padding-top: .25em !important;
}

.bookmark .navigation {
clear: both;
}

dl.stats {
background: none !important;
clear: both;
}


/* adjust a few more fiddly bits */
dl.stats dt {
font-weight: bold !important;
}

#user-fandoms .index {
padding-left: 1em;
}

#user-fandoms a#expandable-link {
border-bottom: none !important;
}


/* Styling of Comments */
.comment .odd,
.thread .odd,
.comment .even,
.thread .even {
background: transparent;
border-style: solid;
border-width: 1px;
border-radius: 1em;
padding: 1em;
}

.comment {
margin-bottom: 1.5em !important;
}

.comment div.icon {
top: 1em;
left: 1em;
}


/* Styling of individual works */
dl.meta {
border-radius: 1em;
border-left: none !important;
border-right: none !important;
}

div.wrapper {
background: none;
}

div.works-show {
margin-left: 6% !important;
margin-right: 6% !important;
}

.works-show ul#subnav {
padding: 1em 0;
}


/* Styling the Fandoms lists */
.media-index li.category {
border: none;
}

.media-index li.even,
media-index li.odd {
width: 45%;
}


/*otherwise they bunch up on the left*/
.media-index li.even {
margin-left: 5% !important;
}

li.category p a {
font-style: italic;
}

.fandoms-index ul.letters {
border: none;
box-shadow: none;
}

.fandoms-index li.letter {
border-left: 1px solid;
border-right: 1px solid;
border-radius: 1em;
padding: 0 1em 1em 1em;
margin-bottom: 2em !important;
}


/* Misc Styling, searchboxes, buttons, tables, etc. */
#main .search {
border-radius: 1em;
}

#main ul.navigation,
p.navigation,
li.navigation,
span.navigation,
p.submit,
dd.submit,
span.submit {
border: none;
background: none;
}

#main .navigation input {
margin: 0 0.125em !important;
padding: 0.25em 0.5em !important;
}


/*to make that one skin button line up vertically*/
#skin-page .navigation form.edit_preference {
float: none;
}

.current {
border-radius: 1em;
}

#main ul.navigation a,
#main .navigation input,
#main .navigation a,
.submit input,
.submit a,
p.navigation a,
li.navigation a,
span.navigation a,
p.submit a,
dd.submit a,
span.submit a {
border: 1px solid;
border-radius: 1em;
}

table {
background: transparent;
border: 1px solid;
border-radius: 1em;
}

tbody tr,
thead td {
background: transparent;
border-bottom: none;
}

th,
td {
border: 1px solid;
padding: .5em;
}

#main table td.navigation,
td.submit {
background: transparent;
}


/* Colors; all in one place to make variations easier, at the bottom so the border-colors take properly */
body {
background: #fffef9;
color: #111;
border: 3px solid #099;
}

#header .navigation .current {
background-color: #111;
color: #fffef9;
}

.blurb h4 a:link,
#user-fandoms a#expandable-link {
color: #099;
}

tbody tr:hover {
background-color: #f9ffff;
}

.required {
color: #900;
}

.own {
background: #f3f3f3;
}

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

a:visited {
color: #777;
}

a:hover {
color: #999;
}


/* note the last of these is the undo for the transparent commas in tags lists */
#header,
#header a,
#header a:visited,
#header a:hover,
#header div#login-block,
.profile .module h3,
.media-index li.category h3,
.media-index li.category h3 a,
.filters dt:hover,
#dashboard a:hover,
ul.tags li a {
color: #111;
}

#dashboard .current {
color: #111 !important;
}

.profile .module h3,
.media-index li.category h3 {
border-color: #111;
}

.comment .odd,
.thread .odd {
border-color: #444;
}

.datetime .time,
.datetime .timezone {
color: #444;
}


/*keep it lighter so it doesn't overwhelm the blurb borders*/
#header .navigation a,
form.filters,
#dashboard ul {
border-color: #666;
}

.media-index li.category h3 a:hover {
color: #999;
}

.fandoms-index li.letter h3,
.comment .even,
.thread .even {
border-color: #999;
}

li.blurb,
.fandoms-index li.letter {
border-color: #000;
}

a.tag:hover,
ul.tags a.tag:hover {
color: #000 !important;
}

#main ul.navigation a,
#main .navigation input,
#main .navigation a,
.submit input,
.submit a,
p.navigation a,
li.navigation a,
span.navigation a,
p.submit a,
dd.submit a,
span.submit a {
border-color: #ccc;
}

table,
th,
td {
border-color: #bbb;
}

a.cloud2 {
color: #022;
}

a.cloud3 {
color: #033;
}

a.cloud4 {
color: 044;
}

a.cloud5 {
color: #055;
}

a.cloud6 {
color: #066;
}

a.cloud7 {
color: #077;
}

a.cloud8 {
color: #088;
}

a.cloud9 {
color: #099;
}




And this goes in Stylish or your browser styles document (suitably altered where the "moz-document" is):

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("archiveofourown.org") {

.blurb ul.recent-bookmarks li { display: block !important; }

ul.tags li.warnings:first-child:before { content: "Archive Warnings: "; color: #111; }
li.warnings + li.relationships:before { content: "Relationships: "; color: #111; }
li.relationships + li.characters:before { content: "Characters: "; color: #111; }
li.characters + li.freeforms:before { content: "Freeform: "; color: #111; }
li.warnings + li.characters:before { content: "Characters: "; color: #111; }
li.warnings + li.freeforms:before { content: "Freeform: "; color: #111; }
li.relationships + li.freeforms:before { content: "Freeform: "; color: #111; }

.profile .module h3,
.media-index li.category h3 { border-left: 4px double !important;
border-bottom-right-radius: 0 !important; }

#main .navigation input { vertical-align: baseline; }

#header .navigation li { text-transform: capitalize; }

table { border-collapse: separate !important; }

}
}

Comments

[ldybastet]

Very nice!!! :) I like! *gives kudos*

I'm still using the default one... I tried the light on dark, but it made it impossible to see the stats on the different stories (hits and kudos, etc).

[branchandroot]

*rueful* Yeah, there's a lot of text color that's coded in hard-to-find places and has to be re-set individually. I sent some feedback grousing about not being allowed to use "inherit" for font and border colors; if that gets changed the whole thing will get a /lot/ easier.

[annotated_em]

Oooh, that does come out nicely!

[branchandroot]

Yeah! I'm still fiddling with bits of it and hoping that there's someone on call who can actually fix the skin generator, so I can offer this publicly.