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

From:

cesy

I've had to use it once or twice, but not very often. Basically, your skin code comes after all the default site scheme stuff, so will override it by CSS inheritance rules if they are equally specific, or if yours is more specific. If yours is less specific than the original rule, you'll need to use !important. However, if you're having to use it a lot, it basically means either there's something wrong with our code, or something wrong with yours, so it's worth sending in a support request with the code for your skin, or post it here and someone can have a look.

mashimero

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!

S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

AO3 Skins

!important

!important

no subject

no subject

no subject

no subject

Profile

December 2024

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags