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

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.

Re: in from Network

[branchandroot]

I love internet cookies! And I'm very glad I could help. *wry* Since I was going to do it for the sake of my own soul anyway. *delicate shudder*

Re: in from Network

[ultranos]

Yeah, the new default design is something I wouldn't wish up on my enemies. How the hell did it go live? What were the designers drinking? (And where can I get some?)