AO3: Quick Fix Skin

[branchandroot]

Okay, since the review process is clearly backed up, here is a copy of the skin I made to quickly fix the worst problems with the new Archive default. It's submitted to be public, free to one and all, have at it.

Go to Your Home, click on Skins in the first module of your sidebar. Select the Create Skin button at the top right of the Skins page. On the skin-creation page, paste the CSS below in, and name it something.

Now click on the Advanced button at the bottom. For "What it does", select "Replace an archive skin entirely". Down under Parent Skins, click "Add a parent" and type in Archive. From the dropdown that will give you, select Archive 2.0. (Yes, it's counter-intuitive.)

Save it! Lo, you have a new skin. Down at the bottom of the skin page or skin blurb there is a button for Use. Click on that and you're good to go.



/* QUICK FIX FOR NEW SITE DEFAULT, MOST COMMON COMPLAINTS */
/* fixes for site-wide issues; remove when fixed in live code */
fieldset fieldset,
fieldset dl dl,
form blockquote.userstuff {
background: transparent;
}

.bookmark .notice {
clear: both !important;
}

#workskin .module {
float: none;
}

.index + h4.landmark,
.works-index ol.pagination {
clear: both;
}

.kudos {
background-position: top left;
padding: .5em .5em .5em 60px;
margin: 2em 0;
min-height: 50px;
}

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


/* BASIC LAYOUT */
body {
background-color: #fffef9;
color: #000;
}

#header {
min-height: 90px;
margin: 0;
}

#header .icon {
display: none;
}

#greeting {
width: auto;
}

#main {
margin: 1em 5%;
}

#main .work .navigation,
#main.works-show .navigation {
margin-top: 0;
}

#main .work .navigation {
margin-top: 0;
}

.blurb {
margin-bottom: 2em;
}

.listbox .index,
.dashboard .listbox .index {
background: #fffef9;
}

div.dynamic,
.secondary {
background: #ddd;
}

div.dynamic .blurb {
margin: 1em;
background: #fffef9;
}

.verbose legend {
background: #eee !important;
}

.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed {
background: #eee;
}

#footer {
padding: 1em;
min-height: 0;
}

#footer p.beta {
height: 100px;
}

#footer ul {
margin: 0;
border: none;
}


/* FONTS */
#main {
font-size: 1em;
}

.meta,
.navigation,
.blurb .tags {
font-size: 90%;
}


/* LISTS */
li.relationships {
background: transparent;
}


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

ul.tags li.warnings:first-child:before {
content: "Archive Warnings: ";
font-weight: bold;
}

li.warnings + li.relationships:before {
content: "Relationships: ";
font-weight: bold;
}

li.relationships + li.characters:before {
content: "Characters: ";
font-weight: bold;
}

li.characters + li.freeforms:before {
content: "Freeform: ";
font-weight: bold;
}

li.warnings + li.characters:before {
content: "Characters: ";
font-weight: bold;
}

li.warnings + li.freeforms:before {
content: "Freeform: ";
font-weight: bold;
}

li.relationships + li.freeforms:before {
content: "Freeform: ";
font-weight: bold;
}


/* get rid of the commas*/
ul.tags li {
color: transparent;
}


/*make actual lables visible again */
ul.tags li.warnings:first-child:before,
li.warnings + li.relationships:before,
li.relationships + li.characters:before,
li.characters + li.freeforms:before,
li.warnings + li.characters:before,
li.warnings + li.freeforms:before,
li.relationships + li.freeforms:before {
color: #000;
}


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

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

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

blockquote.summary {
padding-top: .25em !important;
}

.blurb ul.series {
font-weight: bold;
text-align: right;
}


/* clear everything */
blockquote.summary,
dl.stats {
background: none !important;
clear: both;
}

.bookmark .navigation {
clear: both;
}

.bookmark .user {
padding: .5em;
}

.bookmark .module {
width: auto;
}

dl.index dt {
font-weight: bold;
}

dl.index dd {
background: transparent;
}


/* WORKS */
#workskin {
margin: auto 4%;
}


/* BLOG */
.admin .header h3 {
background: #ddd;
padding: .25em;
}



Here is bonus CSS, courtesy of annoted_em: a list of all the red, should you wish to change the accent color out for something different. Just replace all these reds with color-of-your-choice and add this to the bottom of the above CSS.



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

#header ul.primary {
background: #990000;
border-bottom: 2px solid #770000;
}

#header .primary a, #header .primary .current, #header .primary input, #header .search input {
border-color: #AA0000 #AA0000 #440000;
}

#header .search input[type="text"] {
border-color: #330000;
}

#header h1 a, #header fieldset, #header form, #header p {
color: #990000;
}

#greeting .icon {
border-bottom: 5px solid #990000;
}

#dashboard a:hover {
color: #990000;
}

#dashboard.own {
border-bottom: 15px solid #990000;
border-top: 15px solid #990000;
}

#footer {
background: #990000;
}

#footer a:hover {
background: #550000;
}

#footer .secondary li a {
color: #990000;
}

.autocomplete .dropdown ul li:hover, li.selected {
background: #990000;
}

.actions a:hover, .actions input:hover {
color: #990000;
}

.delete a, span.delete {
color: #990000;
}

span.unread, .replied, span.claimed {
color: #990000;
}

.draggable, .droppable, span.requested {
color: #990000;
}

a.tag:hover {
background: #990000;
}

a.cloud2 {
color: #330000;
}

a.cloud3 {
color: #440000;
}

a.cloud4 {
color: #550000;
}

a.cloud5 {
color: #660000;
}

a.cloud6 {
color: #770000;
}

a.cloud7 {
color: #880000;
}

a.cloud8 {
color: #990000;
}

a.work {
color: #990000;
}

.icon {
background: #990000;
}

.blurb h4 a:link, .blurb h4 img {
color: #990000;
}

.system .latest h3, .system div.news h3 {
color: #990000;
}

.required, .error {
color: #990000;
}

.error, .comment_error {
border-color: #990000;
}



Comments

[dancing_serpent]

Oh, that looks so much better! Can you tell me what I'd have to do to get rid of the red, too?

[musyc]

Would you prefer your internet wrapped in some cheery snowmen paper or perhaps something that appears to be silver and green squiggles?

*flails at code some more, snags bits of this*

[theodosia21]

This is wonderful, thank you! If you don't mind me asking, do you know how to get rid of/decrease all the empty space between the top of the works page- the space between the header with the my home/fandoms/works/people, etc. links and the bookmark/mark for later/comments, etc. links? Also, do you know how to stop the comment box from automatically showing? I'd rather have a button I could click to make it appear if I wanted to leave a comment than have it always be there. It feels like there's so much wasted space, vertically. I'd rather have everything a bit more compact. :-(

But thank you for doing this, it's such an improvement! ^_^

[scribblesinink]

That looks nice. Thank you!

[pineapplechild]

So much better! Thanks. I was using their white on dark skin, because it didn't make my eyes unfocus, but this is much better.

in from Network

[ultranos]

I stumbled onto this quick fix, and oh man, can I send you internet cookies? You just saved my soul from recoiling in horror from the new site design.

[hydrangea]

Thanks! With your fixes and what I actually managed to figure out about this new chaining thing yesterday, I seem to have a useable site again. ^^ Muchly appreciated.

[lilmoka]

Thank you, thank you, thank you! *\o/*

[annotated_em]

Fantastic. Now the blasted thing is actually usable/readable. And I have (I think) zapped all the reds. There were only eleven different shades.

[ane]

Thank you for this. At least the site's now usable on my laptop.

[jorockz]

That's awesome the you put all that effort in :)

Do you know if it will become available to people without accounts? (It's a sad day when of the 9 publicly available skins, one with pink pandas is the best. Pandas I like. Pink however...)

[bluemeridian]

Such a fantastic help! Thank you!!

[snacky]

Thanks for this!

[elistaire]

Thank you!

[thursdaynext_27]

Thank you! This was very helpful.

[phlox]

Oh, thank you! I was trying to figure out what on earth "they'd" done to the layout. I wasn't really disliking it (yet) but I think I was likely to like it less and less as I used it. Thanks for saving me the aggravation step!

[margrave]

Thank you for this!

The CSS code for me has helped greatly!

[tahariel]

This is awesome, thank you! Snagging and installing :)

[disprove]

Oh yeah, that's much better. Thanks very much for this!

[edenfalling]

Thank you, that is MUCH more readable than the gray!

[ingridmatthews]

Thank you! You made it easy and fun to change my page. :D

[tieleen]

Thank you so much for sharing this!

[musyc]

Hiiiii. I've been tweaking my skin, using several bits of the code you've provided here, and I'm running into an frustrating thing. On the new works and on my own works page, everything looks fine, but on my reading history, the work blurbs are giving a weird result. Screencap of one blurb from history page.

The summary is running up and onto the side of the tags listing. This is a particularly egregious example because the summary is only one line (multi-line summaries still appear up in the right, but they do eventually run under the summary properly.), but it happens on every work with a summary.

I tried floating the summary left, but that flipped the stats all over. Tried to force the tags to cover the full width of the blurb, but I don't think I'm using the right class or the right property. Paddings and margin experimentation didn't help either. Now I'm lost.

[inkstone]

Thank you so much for this. I visited AO3 yesterday for the first time since the deploy & could not deal.

[facetofcathy]

Hi there, I've been using some of your code in building my skin--mostly the blurb tags.

The way you set it up assumes that all blurb ul.tags start with the warnings tags, which is true for everything except external bookmarks.

If you add:

ul.tags li.relationships:first-child:before {
content: "Relationship: ";
font-weight: bold;
}

ul.tags li.characters:first-child:before {
content: "Characters: ";
font-weight: bold;
}

Then you'll take into account the external bookmarks that start with one of those types of tags.

Thanks so much for posting your code--I've learned lots from it, and it's been fun adapting to my own ends.