When using a free/commercial Joomla template from Template Club X/Y/Z, what is the best way to include my own CSS styles?
Why use CSS overrides?
It's always a good idea to keep your CSS styles separate from the existing template styling, if you're using a pre-built Joomla template.
How does CSS overrides work?
CSS means "Cascading Style Sheets", "Cascading" in this context meaning that because more than one stylesheet rule could apply to a particular piece of HTML, rule used is chosen by cascading down from the more general rules to the specific rule required (the most specific rule is chosen), or based on the order of the rules for any element (the last rule found is chosen).
As long as your customized CSS file is loaded after the default template CSS files, you can add your own styles to override specific elements as needed (there are some exceptions, more on that below).
To load a custom style sheet in the Joomla
(The CSS file can have any name, and does not have to be in the /css/ subfolder, but it's cleaner that way.)
It's also possible to add a normal
Some extensions might load their CSS styles after yours (or even add styles directly in the index.php file), thus overriding your overrides. This can usually be solved by adding
Usage in different frameworks
Now the fun part: Many template frameworks has though of the possibility that users would want to make changes to their templates, thus adding an easy way to include your CSS overrides. Here are some of the methods used:
RocketTheme templates are powered by the Gantry Framework, and a customized CSS file will be loaded automatically if found. The CSS file must be placed in the
Example: If you're using their free
Shape 5 templates ship with an empty
Gavick Pro templates ship with an empty
Templates based on the T3 Framework may/may not include a
Templates based on the Warp Framework automatically loads the
to the file