ao3_skins | Skin: Describe v. 2.0

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.

Threaded | Top-Level Comments Only

From:

turlough

Yay!!!

Thank you so much!!

vangirl

Oh this is lovely. Thank you for sharing! :)

I've got a question if you don't mind?

In the old version of this skin the date and time a comment was posted appeared at top-right (like this) but in the new version it's at bottom-left (like this). Is there any way of getting it back the way it was?

I've tried fiddling around with CSS without success and I've a horrible feeling moving it will have to involve making a Greasemonkey script. Tell me it isn't so?! :-)

sarken

This should do it:
.comment .datetime {
margin-right: 0;
position: absolute;
top: 0;
right: 0;
}

THANK YOU!!!! It was driving me dotty not to have the date at the top. (What I did wrong was I never thought about "position". It's one of those things I always forget about actually. If it's there already I know how to use it but if it's not there I forget it exists.)

tree

i have had this open for a month now and finally forced myself to sit down and follow all the steps. so firstly, thank you for making it and also for writing down all the steps. secondly, i have two questions. the first is, is it possible to keep the list of fandoms inline but not have it centred? because i like the way you have them in a sort of cloud like that, but i'd prefer them to be left-aligned.

the second question is, why is this happening?:

it looks as though the boxes for the link text are slightly larger than the bar they're sitting in and they hang over a bit. this only happens in FF (i'm using 8). it looks fine in safari. which leads me to believe it must be something to do with my firefox settings. so, that's odd.

anyway, thank you. :)

First answer: Yes! In #user-fandoms ol.index, just change the value of text-align: to left.

Second answer: Because Safari and Firefox do not play nice. I switch between browsers a lot, so I had to do something kind of hacky to make it work in both Safari and Firefox, and the hacky thing that is making it work right Safari is making it work less right in Firefox, possibly because you and I have different settings. Now if I could just remember what I did...

Try adding border-bottom: 1px solid #7AA4B4; to #header ul.primary. If that doesn't work, maybe try adding border-bottom: none; to #header a, #header .primary a, #header .primary input and

#header ul.primary a:hover,
#header .primary input[type="submit"]:hover

, and changing the border-bottom value in #header .primary .current to none.

For anyone using Opera, you'll probably have to do one of those two things as well.

#1 that's perfect. it forces the number count to remain attached to the fandom, instead of falling over onto a new line, which is exactly what i wanted.

#2 first suggestion worked like a charm.

thank you very much.

sapphoatsunset

Thank you for this :)

I updated the following colors:
#E0AE1A - Navigation
#F5C947 - Navigation Hover/Visited Link/Work Link

and in
#header .primary input[type="text"] {
font-weight: 400;
background-color: #F5DA8B;

so, now it looks like (and please forgive aspect ratio in advance... rough guestimating this):

Thank you!

Oh, nice! I really love the gold. Thanks for sharing!

No, thank you~~ ^^

tropicsbear

Thanks for this! I'm using it as-is right now, but I'll probably fiddle around with the colors and or font sizes at some point.

Edit: Here's a screenshot of what I ended up with. I tweaked the font sizes, added a bit of code to make the content/space taken up by the actual fic a bit narrower.

Still a bit unhappy at the colors that appear when I hover over the navigation and greeting tabs and I when you hover over the fandom name it's going with the AO3 default of maroon background + white text but I can't figure out what parts of the code to change. Oh well.

Edited Date: 2016-02-08 04:15 pm (UTC)

Oh, I love your colors! And thanks for letting me know about the issues -- I've updated the code a bit to fix them, and a few other problems.

Many thanks! ♥ Here's what my skin looks like now, after I used your updated code. Only major difference is that I decided I wanted to change the header font.

AO3 Skins

Skin: Describe v. 2.0

Skin: Describe v. 2.0

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