ao3_skins | !important

Hi, I have a question regarding the use of !important. I'm working on a skin based off of the Helvetireader theme by Hicksdesign, but it's quite a big overhaul of the AO3 default style. I've managed to get this so far:

The problem is that I've had to use !important after almost every property. I'm not that great with CSS - what I know is all self-taught from online tutorials and such, but I don't think using so many !important is a good thing. However, I haven't found another way to get the results I want.

So, in your experiences with AO3 skinning, do you use !important, and if so, how often?

ETA: Here's what I have so far:

body {
  margin: 0;
  padding: 0;
  background: rgb(244,244,244);
  color: rgb(0,0,0);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1em;
  text-align: left;
}

a,
a:link,
a:visited {
  text-decoration: none !important;
  border: none !important;
}

#header,
#footer {
  background: rgb(244,244,244);
  color: rgb(0,0,0);
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Helvetica, Arial, sans-serif !important;
}

/* ----- HEADER ----- */
#login-block,
#login-block a,
#login-block a:link,
#login-block a:visited,
#login-block p.greeting {
  color: rgb(136,136,136) !important;
  font-weight: bold;
}

#header .clear {
  background-color: transparent;
  background-image: none;
  border-top: 1px solid rgb(238,238,238);
}

#header h1,
#header h1 a {
  color: rgb(230,16,16) !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-weight: bold;
  text-decoration: none !important;
}

#header .navigation li a {
  border: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: rgb(136,136,136) !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-weight: bold;
}

#header .navigation li a:hover {
  background-color: rgb(250,250,250) !important;
}

#header .navigation .current {
  border: none !important;
  background: transparent !important;
  color: rgb(0,0,0) !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-weight: bold !important;
}

/* ----- DASHBOARD ----- */
#dashboard ul {
  border: none;
  background: rgb(244,244,244);
  color: rgb(136,136,136);
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 0.9em;
  font-weight: bold;
}

#dashboard ul li a {
  color: rgb(136,136,136);
  padding: 0.3em 0;
}

#dashboard ul li a:hover {
  color: rgb(136,136,136) !important;
  background: rgb(250,250,250) !important;
}

#dashboard .current {
  padding-left: 0;
  color: rgb(0,0,0) !important;
  background: transparent !important;
}

#dashboard .current:hover {
  color: rgb(0,0,0) !important;
  background: rgb(244,244,244) !important;
}

/* ----- MAIN ----- */
#main {
  border-top: 1px solid rgb(238,238,238);
  border-left: 1px solid rgb(238,238,238);
  background: rgb(248,248,248);
}

#main h3 {
  border-top: 1px solid rgb(238,238,238);
  border-bottom: none;
  padding-top: 0.4em;
  background: transparent;
  color: rgb(230,16,16);
}

Flat | Top-Level Comments Only

Thanks for the reply. I guess it's because everything I'm trying to do is less specific than the default skin. I'm trying to have as few borders/backgrounds/decorative stuff as possible.

The AO3 doesn't have an option to start with a stripped-down layout, does it? Like LJ/DW's option to not use a style's default CSS?

I've added the CSS to the post, if you'd be willing to take a look at it? It's still a WIP so I'm sure there's some redundancy in there that I'll be stripping out later.

Yeah, there's no option like that yet. It'd be worth requesting via Support, as I suspect other people may also want it.

I might just do that, thanks!

!important

no subject

no subject

no subject