ao3_skins | Skin: Describe v. 2.0 (Reply)

This is a simple add-on skin that recreates my previous skin for the archive's updated skin system. It was made rather quickly and thus doesn't contain the detailed comments that gave the original its name. It uses the show all of a user's fandoms tweak, inspired by

mumblemutter.

On my Mac, it works equally well in Firefox 8 and Safari 5 (and thus likely works on Chrome as well). A few tweaks will get it looking good in Opera 11. If you follow the directions and use the handheld sheet, it's also ready for the mobile version of Safari, and possibly other mobile browsers.

Preview images of the dashboard and work views are under the cut, and you can click them for the full-sized versions.

Preview of Describe skin in dashboard view

Describe - All

/*****************
DESCRIBE V. 2.0
AN AO3 SKIN BY SARKEN

COLORS:
#261E1A - Page Text
#A63E3F - Header/Hovered Link/Visited Work Link
#873233 - Header Border
#7AA4B4 - Navigation
#5C7B87 - Navigation Hover/Visited Link/Work Link
#3DA6AE - Page Link
#E5DFDF - Lightest Accent
#E0DADA - Light Accent
#C7C3C1 - Medium Accent/Current "Link"
#BFBAB6 - Dark Accent
#827F7E - Darkest Accent/Visited Tag Link
#686665 - Tag Link
#F5F1ED - Page Background
#FFF    - Header Text
#CFCBC8 - Subtle Dividers/Button Border
#999    - Footer Text/Some Form Borders
*****************/

/** = 01-CORE = **/

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

/** = 02-ELEMENTS = **/

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

/** = 03-REGION-HEADER = **/

#header {
background: #A63E3F;
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: #873233;
}

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

#header .primary { 
background: #7AA4B4 none;
border-top: 3px solid #873233;
box-shadow: none;
}

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

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

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

#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: #7097A6;
box-shadow: inset 0 0 0 1px #5C7B87;
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;
}

/** = 04-REGION-DASHBAORD = **/

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

/** = 05-REGION-MAIN = **/

/** = 06-REGION-FOOTER = **/

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

#footer .heading {
color: #999;
}

#footer a {
border: 0;
color: #3DA6AE;
}

#footer a:hover {
color: #5C7B87; 
}

/** = 07-INTERACTIONS = **/

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.listb ox .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;
}

/** = 08-ACTIONS = **/

.actions a, .actions a:link, .action, .action:link, .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, .actions a:focus, .actions input:focus { 
border-color: #CFCBC8;
box-shadow: none;
color: #A63E3F;
text-decoration: underline;
}

.actions a:visited, .action:visited, .action a:link, .action 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 + .landmark + .actions { 
float: right;
}

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

/** = 09-ROLES-STATES = **/

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

/** = 10-TYPES-GROUPS = **/

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

a.tag:hover, .listbox .heading a.tag:visited: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 a, .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;
}

/** = 11-GROUP-LISTBOX = **/

.listbox, fieldset fieldset.listbox { 
background: transparent;
border: 1px solid #C7C3C1;
border-color: transparent;
box-shadow: 0 0 0 1px #F5F1ED;
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;
}

/** = 12-GROUP-META = **/

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

/** = 13-GROUP-BLURB = **/

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;
float: none;
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;
}

/** = 14-GROUP-PREFACE = **/

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

/** = 15-GROUP-COMMENTS = **/

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

/** = 16-ZONE-SYSTEM = **/

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

/** = 17-ZONE-HOME = **/

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

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

/** = 18-ZONE-SEARCHBROWSE = **/

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

/** = 19-ZONE-TAGS = **/

/*change*/
.nomination dt { 
background: #fff;
}

/** = 20-ZONE-TRANSLATION = **/

/** = 21-USERSTUFF = **/

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

/** = 22-SYSTEM-MESSAGES = **/

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

/** = SANDBOX & ADDITIONAL = **/

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

Describe - Handheld

Disclaimer: This might not be the fastest or best way to create a skin like this, but it was the first way that worked after multiple attempts, so I decided to leave it here. You might be able to make it work just by setting the all media skin as the parent of the handheld skin, but with how finicky the latter was about updating, I couldn't be certain.

1. On the My Site Skins page, click Create Skin.

2. On the Create New Archive Skin page, make sure "Type" is set to "Site Skin."

3. Enter a title, like "Describe - All Media." You might also want to include a description such as "All media overrides for Describe skin."

4. Paste the Describe - All Media code from above into the field named CSS.

5. Click the "Show" button next to "Advanced." You shouldn't have to change anything here, but the "What it does" settings should be "add on to archive skin" and the "Media" settings should be "all."

6. Click Submit.

7. If all goes well, you will be taken to a page with a "Skin was successfully created" message above the title, description, and code. You will still be seeing the site in its regular skin.

8. Now click the Create Skin button that's on that page.

9. On the Create New Archive Skin page, again make sure "Type" is "Site Skin."

10. Enter a title for this skin, like "Describe - Handheld." You might also want to include a description such as "Handheld overrides for Describe skin."

11. Paste the Describe - Handheld code from above into the field named CSS.

12. Click the "Show" button next to "Advanced." This time, the "What it does" settings should still be "add on to archive skin," but the "Media" settings should be "only screen and (max-width: 480px)."

13. Click Submit.

14. If all goes well, you will again be taken to a page with a "Skin was successfully created" message above the title, description, and code. You will still be seeing the site in its regular skin.

15. Click on the Create Skin button that's on that page.

16. On the Create New Archive Skin page, make sure "Type" is set to "Site Skin."

17. Enter a title, like "Describe." You might also want to include a description such as "Combines screen and handheld."

18. Don't paste anything into the CSS.

19. Click the "Show" button next to "Advanced." The "What it does" settings should still be "add on to archive skin," and the "Media" settings should be "all."

20. Now click "Add parent skin."

21. For "Parent #1," start typing the title of your first skin -- "Describe - All Media" -- and then select if from the autocomplete menu that shows up.

22. Click "Add parent skin" again.

23. For "Parent #2," start typing the title of your second skin -- "Describe - Handheld" -- and select it from the autocomplete menu.

24. Click Submit.

25. If all goes well, you will again be taken to a page with a "Skin was successfully created" message above the title, description, and list of the two parent skins. You will still be seeing the site in its regular skin.

26. Click Use, which is in the lower navigation menu.

27. The site skin will change and the blue box at the top will now say "Your preferences were successfully updated."

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. I will endeavor to keep this updated as changes are made to the archive. If you notice something broken, just holler. (The child selectors on h3.heading links are broken, but should work fine once the parser is fixed.)

Updated 28 March 2012: Overrode link hover color in footer, made user name link in header visible, added background color to indexes on edit multiple works page.

Updated 8 February 2016: Updated to make the main navigation more closely resemble the image, and to fix some default colors that were showing through.

Updated 26 March 2016: Updated to restore the link styling in some places.

AO3 Skins

Skin: Describe v. 2.0 (Reply)

Skin: Describe v. 2.0

Profile

December 2024

Most Popular Tags

Style Credit

Expand Cut Tags