How to use module CSS override?

Dragan Todorovic

January 18th 2007

1904

Many of you have already heard about it but not everyone knows what it is and how to use it. In this short "how to" tutorial we will explain what CSS override is and how to use it on your websites. First rule of CSS is the last defined property in CSS file order is the one that is going to be used in layout. Basically if you have same property defined in your stylesheet twice , the one that is last will be the one that is used.

Example:

p.text{
padding:0;
}
/* this one will be used in your layout */
p.text{
padding:5px;
}

So how do we use this in our Joomla templates?

Your Joomla template CSS files are loaded after the main head Joomla tags. Main head Joomla tags

<jdoc:include type="head" />

load any JS and CSS files before your template CSS. So if we for example use YJ NS 8 module , the module CSS will be loaded before the template css files and this way we will get the advantage of using CSS override for this or any module in our template CSS and adapt it to fit our website.

Here is the default YJ NS 8 module look. And here is the same module (called YouNews Entertainment on our demo ) but with CSS overrides.
You would never say that this is a same module right? What did we do ? Well here is default module css file which is loading before our layout.css . We took few CSS properties from that stylesheet and moved it to our template layout.css file. You can find the lines starting with /*NEWS SLIDER 8.0*/

This technique can be used with any Joomla module and this way you do not have to edit default module CSS file to accomplish desired layout.

css modules tutorial