ao3_skins | Skin: Describe

I used

mumblemutter's show-all-of-a-user's-fandoms code in this skin. It's been tested in Firefox 4, Safari 5, and Safari Mobile.

/*****************
DESCRIBE
AN AO3 SKIN BY SARKEN

COLORS:
#261E1A - Page Text
#A63E3F - Header
#873233 - Header Border
#7AA4B4 - Navigation
#5C7B87 - Navigation Hover
#3DA6AE - Page Link
#E5DFDF - Lightest Accent
#E0DADA - Light Accent
#C7C3C1 - Medium Accent
#BFBAB6 - Dark Accent
#827F7E - Darkest Accent/Visited Tag Link
#686665 - Tag Link
#F5F1ED - Page Background
#FFFFFF - Header Text
#CFCBC8 - Subtle Dividers
*****************/

/* overrides all font settings */
* {
  font-family: 'Lucida Grande', Helvetica, sans-serif !important;
}

body {
  background: #F5F1ED;
  color: #261E1A;
}

/* link colors */
a, a:link {
  color: #3DA6AE;
}

a:hover {
  color: #A63E3F;
}

a:visited {
  color: #5C7B87;
}

/* alternate link colors*/
a.tag, .tags a {
  color: #686665;
}

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

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

/**** HEADER 
This is the top of the page, which includes the site name, site navigation, 
greeting, and search. This does not include collections or the main page. ****/

#header {
  background: #A63E3F none !important;
  padding-top: 15px;
}

/* site name */
#header h1, #header h1 a, #header h1 a:visited {
  color: #FFFFFF;
}

/* reposition the header navigation */
#header .navigation {
  top: 41px;
}

/* header navigation text and tabs */
#header .navigation a {
  margin: 0 1em 0 0;
  background: transparent none;
  border: 0;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
}

#header .navigation a:hover {
  background: #5C7B87 !important;
  text-decoration: none !important;
}

#header .navigation .current {
  margin: 0 1em 0 0;
  background: #F5F1ED none !important;
  border: 0;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
}

/* background for relocated navigation and remove shadow */
#header .clear {
  background: #7AA4B4 none;
  height: 38px;
  border: 0;
  border-top: 3px solid #873233;
}

/* make header landmarks invisible */
#header .landmark, #header .landmark a, #header .login-block legend {
  color: #7AA4B4 !important;
  color: transparent !important;
}

/* greeting and login */
#header #login-block, #header #login-block a {
  color: #FFFFFF;
}

/* site search */
#header #login-block input.text { 
  background-color: #873233; 
  border: 1px dotted #261E1A; 
  font-size: 1.1em; 
  color: #FFFFFF; 
  padding: .15em .25em; 
  margin: .5em 0;
  width: 53%;
}

#header #login-block input.button { 
  background: transparent; 
  color: #FFFFFF; 
  border: 0; 
  font-size: 1.1em; 
  font-weight: bold; 
  cursor: pointer;
}

/**** MAIN 
Things that appear on many pages or that do not belong in other sections.
****/

/* error page background */
#main .error {
  background: transparent;
}

/* font in notice boxes must be dark */
div.flash.notice {
  color: #000;
}

.wrapper {
  background-image: none;
}

/* big heading at the top of profiles, dashboards, etc */
.profile div.header.module h2 {
}

.profile div.header.module h2 a { 
  border: 0;
}

#main .preface h3 {
  color: #261E1A;
}

/* smaller subheadings that divide dashboard pages etc */
.profile .module h3 {
  color: #261E1A;
  letter-spacing: 1px;
  background-color: #C7C3C1;
  border-bottom: 1px solid;
  border-left: 1px solid;
  border-top: 0px solid;
  border-right: 0px solid;
  border-color: #827F7E !important;
  padding: .25em;
}

/**** NAVIGATION BUTTONS 
This section removes the gradients and inner borders of the buttons for
 sorting, managing, and interacting with works. It also fixes the padding
 issues that were visible on hovered or selected buttons.
****/

/* make page landmarks invisible */
ul#skiplinks, .landmark, .landmark a {
  color: #F5F1ED;
  color: transparent;
}

/* restyle the buttons' borders and background */
#main ul.navigation, p.navigation, li.navigation, span.navigation, p.submit, dd.submit, span.submit {
  background: #F5F1ED none;
  border: 1px solid #CFCBC8;
}

/* visited color */
#main .navigation a:visited {
  color: #5C7B87;
}

/* current item */
.current, .current a:visited {
  background: #C7C3C1 !important;
  color: #261E1A !important;
  border: 0 !important;
}

/* button style on hover */
.navigation a:hover, .submit a:hover, .submit input:hover, .navigation input:hover {
  color: #A63E3F;
  background: transparent !important;
  text-decoration: underline !important;
}

/* remove borders between button items */
#main .navigation a, .submit input, .submit a, #main .navigation input, ul.navigation a {
  border-right: 0;
  border-left: 0;
}

/* font on some navigation button items */
.navigation input, p.submit input {
  color: #3DA6Ae !important;
}

.navigation input:hover, p.submit input:hover {
  background-color: transparent !important;
  color: #3DA6Ae !important;
  text-decoration: underline !important;
}

/* change padding on various buttons */
#main ul.navigation a:hover, p.navigation a:hover, li.navigation a:hover,
span.navigation a:hover {
  padding: 0.25em 0.5em 0.25em;
}

#main ul.navigation, p.navigation, li.navigation, span.navigation, p.submit, dd.submit, span.submit {
  padding-bottom: .15em;
}

#main ul.skins li ul.navigation a:hover {
  padding-top: 0.15em;
  padding-bottom: 0.15em;
}

/* reposition buttons for your bookmarks and own works */
#main li.bookmark .own .navigation, #main li.bookmark .user .navigation, #main .work .own .navigation, #main .series .own .navigation, #main .works .own .navigation, #main .own.work .navigation {
  margin-top: 1em !important;
  margin-bottom: .4em !important;
}

/* fix padding on buttons for your bookmarks and own works */
#main li.bookmark .navigation a:hover,
#main .work .own .navigation,
#main .series .own .navigation a:hover,
#main .works .own .navigation a:hover,
#main .own.work .navigation a:hover {
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

/* no border on inbox item buttons */
#main ol li.read ul.navigation, #main ol li.unread ul.navigation {
  border: 0;
}

/**** PROFILE AND DASHBOARD 
This effects the layout of the pages you see when browsing a user or
 collection's profile and dashboard. It also makes it so all of a user's
 fandoms are visible by default.
****/

#dashboard ul {
  background: transparent;
  border: 0;
  font-size: 90%;
}

/* dashboard sidebar items */
#dashboard ul li a, #dashboard li a:hover {
  margin: .35em 0;
  padding: 0 0 0 .25em;
  color: #261E1A;
  background: transparent none;
}

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

#dashboard li span.current { 
  padding-left: .25em;
}

/* display all fandoms centered on user's dashboard */
#user-fandoms ul {
  margin: .5em auto 1em auto;
  text-align: center;
}

#user-fandoms ul li, #user-fandoms ul li.hidden {
  display: inline;
  padding: .45em;
}

#user-fandoms ul li:first-child {
  padding-left: 0;
}

#user-fandoms ul li a#expandable-link {
  display: none;
}

/* pseud names and works and recs totals */
.pseud .user h4,  .pseud .user h5 {
  padding: .75em 0 0 0;
}

/* dashboard history */
.readings-index .module h3 {
border-top: 0; 
font-size: .8em;
}

.readings-index .reading.module {
  border: 0;
  border-bottom: 1px solid #CFCBC8;
}

/**** MEDIA INDEX
This styles the boxes that list the top five fandoms for each type of media
 on the Media Index -- aka the page that shows up when you click Fandoms in
 the header navigation. 
****/

.media-index li.category {
  border: 0px solid transparent;
  background-color: #E0DADA;
  box-shadow: 1px 2px 2px #827F7E;
  -moz-box-shadow: 1px 2px 2px #827F7E;
  -webkit-box-shadow: 1px 2px 2px #827F7E;
}

/* media box heading */
.media-index li.category h3 {
  color: #261E1A;
  background-color: transparent;
  border-bottom: 0;
  font-style: italic;
  letter-spacing: -2px;
  font-size: 1.5em;
}

.media-index li.category h3 a {
  color: #261E1A;
}

/* media box list of fandoms */
.media-index li.category ol { 
  padding-left: 2em;
}

/* media box link to view all fandoms */
.media-index li p {
  text-align: right;
  margin-right: 1.75em !important;
}

.media-index li p a {
  color: #A63E3F;
  border-bottom: 0;
}

.media-index li p a:hover {
  color: #A63E3F;
  border-bottom: 1px solid #A63E3F;
}

.media-index li p a:visited {
  color: #873233;
  border-bottom: 0;
}

/**** FANDOMS INDEX 
The alphabetical list of fandoms for each media type.
****/

/* alphabet links */
.fandoms-index .alphabet {
  text-align: center;
  font-size: 1.35em;
}

.fandoms-index .alphabet li {
  padding: 4px;
}

.fandoms-index .alphabet li a {
  border: 0;
  color: #7AA4B4;
}

.fandoms-index .alphabet li:hover {
  background-color: #C7C3C1;
}

/* box containing the headers and fandoms */
.fandoms-index ul.letters {
  border: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* section header */
.fandoms-index li.letter h3 {
  font-size: 1.25em;
  color: #261E1A;
  background-color: #C7C3C1;
}

/* section header link to page top */
.fandoms-index li.letter h3 span.top a {
  font-size: .9em;
  color: #F5F1ED;
}

/**** WORKS LISTS 
Pages that list works, be they author pages, fandom pages, bookmark list
pages, or the main archive works page.
****/

.works-own .own, .work .blurb, .bookmark .blurb {
  border: 0;
  border-bottom: 1px solid #CFCBC8;
}

/* work title link */
.blurb h4 a:link {
  font-weight: bold;
  color: #A63E3F;
}

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

/* work stats background */
.blurb dl.stats, .works-own .own dl.stats {
  background: transparent;
}

/* bookmark note background */
.own {
  background-color: transparent;
}

/* bookmark note border */
.bookmark .user {
  border: 0;
}

/**** STORY PAGES 
The pages containing the actual text of stories and chapters. The work text in this style is wider than normal
****/

/* section containing header information like fandom, tags, etc */
#main dl.work.meta, #main dl.meta {
  background-color: transparent;
  font-size: .9em;
  border: 0;
  margin-left: 2em;
  margin-right: 2em;
  padding: 0;
}

/* section containing title, notes, and summary */
.preface {
  border-bottom: 1px solid #261E1A;
  margin-left: 2em;
  margin-right: 2em;
  padding: 0;
}

/* work title and summary and notes */
.preface h2.title, .preface h3.title, .preface h3.byline { 
  font-size: 1em !important; 
  margin: 0; 
  padding: 0;
}

#workskin .preface .module h3, #workskin .preface .module blockquote { 
  font-size: .9em;
}

/* inspired by and gift notes */
#workskin .preface .module h4 { 
  font-size: .8em; 
  display: inline;
  font-style: italic;
}

/* work text */
#workskin #chapters {
  padding: 0; 
  margin: 0 2em;
}

/* work comments */
.comment .even, .thread .even {
  background: #E0DADA;
}

.comment .odd, .thread .odd {
  background: #E5DFDF;
}

/**** FRONT PAGE (HOME.CSS) 
The front page of the site is laid out and styled differently than the
 other pages.
****/

#home {
  padding: 0;
}

.home .logo {
  margin-top: 1em;
  margin-bottom: 1em;
}

#home-header {
  background-color: #7AA4B4;
  border-bottom: 3px solid #5C7B87;
}

/* site name */
#home-header h1 {
  padding-top: 0.75em;
  color: #FFFFFF;
  font-weight: bold;
}

/* site subtitle */
#home-header h2, #home-header h2 a {
  color: #FFFFFF;
  margin-bottom: .5em;
}

/* greeting and login */
#home-header #login-block {
  padding-top: 15px;
  color: #FFFFFF;
  font-size: 0.75em;
  text-align: right;
}

#home-header #login-block a {
  color: #FFFFFF;
  border: 0;
  font-weight: bold;
}

/* header search */
#home-header #login-block input.text { 
  background-color: #5C7B87; 
  border: 1px dotted #261E1A; 
  font-size: 1.1em; 
  color: #FFFFFF; 
  padding: .15em .25em; 
  margin: .5em 0;
  width: 53%;
}

#home-header #login-block input.button { 
  background: transparent; 
  color: #FFFFFF; 
  border: 0; 
  font-size: 1.1em; 
  font-weight: bold; 
  cursor: pointer;
}

.home input.text:hover {
  background: #FFFFFF;
}

/* header navigation */
#home-header ul.navigation {
  margin-left: 3em;
  border-left: 0;
}

/* header navigation items */
#home-header .navigation a, #home-header .navigation .current {
  margin: 0 1em 0 0;
  background: #7AA4B4 none;
  color: #FFFFFF;
  border: 0;
}

#home-header .navigation a:hover {
  background: #5C7B87 none !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* large box */
.open-beta-box {
  color: #FFFFFF;
  background-color: #BFBAB6;
  box-shadow: 1px 2px 2px #827F7E;
  -moz-box-shadow: 1px 2px 2px #827F7E;
  -webkit-box-shadow: 1px 2px 2px #827F7E;
}

.open-beta-box a {
  color: #873233;
}

.open-beta-box a:hover {
  color: #A63E3F;
}

/* sidebar boxes */
.sidebar-box {
  background-color: #E0DADA;
  padding: .1em 1em 1em 1em;
  color: #261E1A;
  box-shadow: 1px 2px 2px #C7C3C1;
  -moz-box-shadow: 1px 2px 2px #C7C3C1;
  -webkit-box-shadow: 1px 2px 2px #C7C3C1;
}

.sidebar-box h3 {
  padding: 0 0 0.25em 0;
  border-bottom: 1px solid #C7C3C1;
  color: #873233;
}

.sidebar-box a, .sidebar-box a:link {
  color: #3DA6Ae;
}

/**** FORMS 
The forms for managing and adding works as well as the filter form.
****/

/* fieldset or form backdrop */
#work-form fieldset, #upload-work-form fieldset, #work-form fieldset.meta, #upload-work-form fieldset.meta, #bookmark-form fieldset {
  background: #E5DFDF;
  border-color: #E0DADA;
}

#work-form legend {
  background: transparent;
}

p.character_counter {
  color: #261E1A;
}

/* filter form */
form.filters {
  background: #E5DFDF;
  border-color: #E0DADA;
  color: #261E1A;
}

.filters legend {
  color: #261E1A;
}

form.filters dt, .filters dt:hover {
  background: #E5DFDF;
  color: #261E1A;
}

/* dynamic bookmark */
#dynamic-bookmark {
  background: transparent;
}

#dynamic-bookmark #bookmark-form {
  background: #E5DFDF;
  border: 1px solid #C7C3C1;
}

/* reply popup */
#reply-to-comment {
  background: #E5DFDF;
  border: 1px solid #C7C3C1;
}

/* mass edit tables */
#main table {
  background-color: #F5F1ED;
  border: 0 solid #F5F1ED;
}

#main table thead {
  border: 0;
}

tbody, tfoot {
  border: 0;
}

#main table tfoot tr, #main table tfoot tr:hover {
  background: #F5F1ED;
  border: 0;
}

/* topmost table header cells */
#main table thead td {
  background-color: #F5F1ED;
  border: 0 solid #F5F1ED;
}

/* table header */
#main table th {
  background-color: #BFBAB6;
  color: #261E1A;
  font-weight: normal;
  border: 0;
}

#main table th a {
  color: #261E1A;
  font-weight: normal;
}

#main table th a:hover {
  text-decoration: underline;
}

/* table rows */
#main table tr {
  border: 0;
  border-bottom: 1px dotted #C7C3C1;
}

#main table tr:hover {
  background-color: #E5DFDF;
  border-bottom: 1px dotted #E0DADA;
}

/* table cells containing actions */
#main table td.navigation, td.submit {
  background-image: none;
  background-color: #C7C3C1;
  border: 0;
  border-bottom: 1px dotted #BFBAB6;
}

/* table header within the body (titles on collection management) */
#main table tbody th {
  background-color: #F5F1ED;
  border: 0;
  border-bottom: 1px dotted #C7C3C1;
}

#main table tbody th a {
  font-weight: normal;
  text-decoration: none;
  color: #261E1A;
}

/**** COLLECTION PAGES
This removes collection-specific header styling and formats various parts
 of the collection pages. 
****/

/* site name in collection header */
#header h1.collection {
  display: none;
}

/* collection meta */
#main dl.meta {
  background-color: transparent;
  border: 0;
}

/* border on collection descriptions */
ul li.collection {
  border: 0;
  border-bottom: 1px solid #CFCBC8;
}

/* collection story border */
li.blurb {
  border-bottom: 1px solid #CFCBC8;
}

/**** IBOX (STYLESHEETS/IBOX/IBOX.CSS)
This is the box that pops up when a blue circular help button (e.g. the one 
next to Filter results on works pages) is clicked. Mostly here for layouts 
with light text on dark backgrounds.
****/

#ibox_wrapper {
  border: 20px solid #F5F1ED;
  background-color: #F5F1ED;
  color: #261E1A;
}

#ibox_content {
  background-color: #F5F1ED;
}

#ibox_footer_wrapper {
 border-top: 1px solid #CFCBC8;
}

#ibox_close a {
  background: #F5F1ED;
  color: #261E1A;
}

#ibox_close a:hover {
  background: #261E1A;
  color: #F5F1ED;
}

/**** ADMIN POSTS
The AO3 News Page and FAQs. 
****/

#main.admin_posts-index .module {
  border: 0;
  border-bottom: 1px solid #CFCBC8;
}

#main.admin_posts-show .admin-header h3, #main.admin_posts-index .admin-header h3, #main.archive_faqs-show .admin-header h3, #main.archive_faqs-index .admin-header h3 {
  color: #261E1A;
  font-size: 120%;
  background-color: #C7C3C1;
  border-bottom: 0;
}

#main.admin_posts-index .admin-header h3 a, #main.admin_posts-index .admin-header h3 a:link, #main.admin_posts-index .admin-header h3 a:visited, #main.admin_posts-show .admin-header h3 a, #main.admin_posts-show .admin-header h3 a:link, #main.admin_posts-show .admin-header h3 a:visited, #main.archive_faqs-index .admin-header h3 a, #main.archive_faqs-index .admin-header h3 a:link, #main.archive_faqs-index .admin-header h3 a:visited, #main.archive_faqs-show .admin-header h3 a, #main.archive_faqs-show .admin-header h3 a:link, #main.archive_faqs-show .admin-header h3 a:visited {
  color: #261E1A;
}

#main.admin_posts-show .admin-header h4, #main.admin_posts-index .admin-header h4, #main.archive_faqs-show .admin-header h4, #main.archive_faqs-index .admin-header h4 {
  font-variant: normal;
}

#main.admin_posts-show .admin-content h3, #main.admin_posts-index .admin-content h3, #main.archive_faqs-index .admin h3 {
  border-bottom: 1px solid;
}

/* admin dashboard sidebar */
#dashboard.admin-posts a:hover {
  margin: .35em 0;
  padding: 0 0 0 .25em;
  color: #261E1A;
  background: transparent none;
}

Feel free to modify this skin however you like. If you do something cool with it, even just another color scheme, I'd love to see it.

UPDATED MAY 22: Tweaked admin posts and styled the reply window that appears in the inbox.

Threaded | Top-Level Comments Only

From:

cesy

Wow, neat style. I like the colours and what you've done with the navigation.

Edit: Have you applied to make this a public skin on the AO3 as well? I'd love to see it shown on the public skins page - that list needs more interesting options like yours.

Edited Date: 2011-05-10 08:14 pm (UTC)

tree

pretty!

aruna7

Spiffy!

hermitsoul

I love this! *rushes to try out*

mashimero

Wow that looks really nice! I love the colours!

turlough

Very nice! I might do some colour fiddling when I get the time - I'll try to remember to comment here about it if I do.

scatter

Just stumbled across this, and it's great. Definitely using it.

anatsuno

Awesome! I changed the font-family to Verdana and now I'm super happy. You rock! :D

sarken

Thanks!

I might submit it eventually, when I'm sure I've gotten any remaining bugs out.

cyborganize

this is a really well-designed skin! I'm using it with most of the colors changed drastically. still not sure I'm totally happy with my tinkering, but you provided an excellent starting point.

Are you going to update this so it works with the latest code changes? I would love if you did. I'm still using it even though it's slightly broken :-)

Probably, but not until next month, since I'm busy with NaNo.

There's no hurry! Just knowing it will eventually get fixed will make enduring the slight brokenness much easier.

Edited (i can't spell!) Date: 2011-11-11 10:10 pm (UTC)

Here it is!

AO3 Skins

Skin: Describe

Skin: Describe

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Profile

December 2024

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags