branchandroot

Expand Cut Tags

No cut tags

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