如何在joomla模板中覆盖CSS

Question

In my Joomla template I would like to override some styles, so I've created my own css and added styles, also media queries. Most of all works only if I use the !important keyword and something does not work at all. For example:

<div id="content_right" class="span3">

In this div I have class and id. I cannot modify the class, because it affects other divs into the template, so I would like to add some style by id. I've added it but it does not work. I've inspected with Firebug and css is correctly loaded. what could be the problem?

Answer 1

The problem you are facing is called CSS specificity .

Yes, the !important rule will override all other styles, but shouldn't be used for this reason.

First, you'll need to call your stylesheet after the Joomla stylesheet.

Then, you'll need to use the same specificity (or better) in your stylesheet, as is used in the Joomla stylesheet.

To clarify, consider this sample code:

<div id="content">
   <div id="subcontent"> ... </div>
</div>

Combined with this CSS:

#content #subcontent {
    background: yellow;
}
#subcontent {
    background: red;
}

 #content #subcontent { background: yellow; } #subcontent { background: red; } 

 <div id="content"> <div id="subcontent">...</div> </div> 

The first selector is clearly more specific than the second one. Therefor, will the background be yellow, and not red.

You are facing the same problem. The first selector is the Joomla stylesheet. So you need to specify the second selector the same (or better) in order to override it:

#content #subcontent {
  background: yellow;
}
#content #subcontent {
  background: red;
}

 #content #subcontent { background: yellow; } #content #subcontent { background: red; } 

 <div id="content"> <div id="subcontent">...</div> </div>