ao3_skins | custom css for collections

Entry tags:

question

custom css for collections

I've finally been creating a custom AO3 skin for myself in time for the vast amount of Yuletide reading I plan to do this year, and I've discovered that going to the actual Yuletide collection breaks my header pretty badly because the custom css for the Yuletide collection header overrides my own style. Does anyone know any way to compensate for or fix this?

ETA: Sorted! Thank you!

Flat | Top-Level Comments Only

Can you post your CSS here, please? That will help us figure it out.

You can also look at the exact custom CSS for collections by viewing the Archive CSS at the open-source hosting.

I've looked at the code and I'm pretty sure that the problem is that the custom css for the Yuletide archive header simply comes after the user-generated custom css because it's coded into the body and not the head. It doesn't just break my skin, it breaks every skin.

My code (though I don't think it matters for this particular problem):

body {
  background: white;
  font-size: 0.8em;
}

h1,
h2,
h3,
h4,
h5,
h6,
#home-header  h1,
#home-header h2,
#home-header .navigation a,
#home-header .navigation .current {
  font-family: verdana, arial, sans-serif;
}

#header {
  background: white;
  font-weight: normal;
}

#header h1 {
  color: #ffffff;
  font-size: 2em;
}

#header h1 a:visited {
  color: #4B5603 !important;
}

#header h1 a {
  color: #4B5603;
  font-family: georgia, garamond, serif;
  line-height: 200%;
}

#header .clear {
  background: none;
  border-top: 1px solid #111;
  height: 10px;
}

#login-block {
  margin-top: 0.5em;
  margin-right: 2em;
  float: right;
  clear: none;
}

#greeting,
#login {
  background: none white;
  color: #181C01;
  font-family: verdana, arial, sans-serif;
  clear: none;
}

#greeting,
#login h1 a {
  color: #586409;
}

a,
a:link {
  color: #586409 !important;
}

a:hover,
a:active {
  color: #B0D959 !important;
  background-color: white !important;
}

a:visited {
  color: #181C01 !important;
}

#dashboard ul {
  font-size: 0.85em;
  width: 12em;
}

#dashboard li:hover,
#dashboard a:hover {
  background: none;
  color: #fffef9;
  border: none;
}

.wrapper {
  background: none;
  padding: 0 12px 13px 0;
}

This is the relevant bit of code from the Yuletide collection:

I just don't know if there's anything I can do about that.

And once I wrote that, I realised that another !important in the header would probably fix that, but it only got rid of the background image and not the colour and I'm not sure why. And the login-block is bumped out of place which must be coming from somewhere else...

Maybe I should have some lunch and come back to it. :)

Edited 2010-10-22 19:07 (UTC)

Ah, I'd forgotten they did the collection images that way. Yeah, you'll need an !important to override it.

Adding

#header {background: blue !important;}
#login-block {float: right; clear: none;}

seems to work for me on http://archiveofourown.org/collections/Yuletide. Are you looking at a different subpage, or is something in my code or setup different from yours?

That didn't work completely for me; after a little more digging it turns out I had to go in and make the following change, too:

#header h1.collection {
  background: none;
  border-bottom: none;
  float: left;
}

But I think all is well now! Until I run into my next snag...

Flat | Top-Level Comments Only

custom css for collections

no subject

no subject

no subject

no subject

no subject