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

[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.

[branchandroot]

Hmmm. That looks like the summary somehow got un-cleared. There's a part in my sheet that says:

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

That's what makes sure that the tags and summary don't get weird, because I had to float the tags to separate them into their categories. Did anything get changed for blockquote.summary?

[musyc]

BLOCKQUOTE.summary. *headdesk* Yes. That's what did it. That whole clearing section got dropped out of my code somewhere in my experiments and cut/paste sprees. (I tried .summary, tried every variation on userstuff and summary I could THINK of. Never blockquote.)

Looks fine now, thank you!

[branchandroot]

^_^V Yeah, seriously, I could not do /any/ of this without Firebug to see what's classed how and where. *cuddles her Firebug*

[musyc]

*nod* I've installed Firebug and Web Developer both JUST to deal with this problem. (Though now they're installed, I think they're going to finally help me to poke at Tabula Rasa like I keep meaning to). Learning curve on Firebug is a little difficult for me, but that live edit css on Web Developer is-is-is *SPARKLY HEARTS*.