How can I override blueprint's styles?

Question

Hi I'm using blueprint and for some reason I can't override some of their built-in styling (screen.css). So far I've tried:

 #asset-index-desc .container
       div
         li
           :border dashed !important

...and this does nothing. I'd appreciate any help.

Answer 1

Don't know exactly what you are trying to override, but you may need to get more specific in your selector. Maybe add an additional class to the markup and reference the additional class in your style sheet

Answer 2

hmm I can think of a few things:

1) try adding color and thickness: i.e.

#asset-index-desc .container
      div
        li
          :border 1px dashed red !important

2) I presume that the code you provided is not as it appears in your document as otherwise you would get a Sass error about the div tag being too deeply nested.... :)

3) the following does NOT work in my own app,

#sidebar
  div
    li
      border: 1px dashed red !important

BUT if I remove the div tag, then it's all good:

#sidebar
  li
    border: 1px dashed red !important

Hope this helps.....

I LOVE Sass and blueprint.... Especially with compass gem. It takes all of the pain out of styling....

Answer 3

Does your SASS-created CSS come before or after screen.css? The one that comes after should override the one that comes before.

Look at the styles with Firebug for Firefox -- it has a really good UI to see what styles are active and which have been overridden further down the chain.