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

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

Profile

December 2024

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags