CODEWITHSUNDEEP
css
Anders Branderud
Anders Branderud

Reputation: 1918

CSS: How to prevent Background colour to be overwritten by colour from less-file

I am working with this page.

The stylesheet-files and most of the design are written by another programmer. In frogn.css the background-color is set that should be used for the outside area of the page (in which there is no information). E.g. like here.

In the page I am working with, the background-color is overwritten by the color from bootstrap.less I prefer not to change the settings of the bootstrap-files, since it can affect other pages.

How do I enforce the background-color of frogn.css to be displayed ? I tried using !important after the colour-attribute, but it didn't help.

*Update: I am noticing that setting !important after background-color actually worked. I did only a ordinary refresh, so I got the cached version of the page.

Upvotes: 0

Views: 353

Answers (2)

Anders Branderud
Anders Branderud

Reputation: 1918

Doing this did solve the problem:

body { background-color: #eaeaea !important; color: #333; }

Upvotes: 0

Giona
Giona

Reputation: 21114

in frogn.css i can see that the body background already has !important

body { background-color: #eaeaea !important; color: #333; }

and there's also a more specific rule applied:

#front { background-color: #EAEAEA !important; }

To overwrite these rules, you've to provide an even more specific selector, for example:

html #front { background-color: #FFF !important; }

this will be "heavier" and should overwrite the default values.

Upvotes: 2

Related Questions