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 Gantry 4
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
Johanpw has done a very good job with his answer on his own question... especially regarding the css overrides for many commercial templates.
I would only like to add my two cents here...
As Johanpw underlined, creating CSS overrides is the recommended practice. Keeping your custom CSS in a single file that you know it won't be deleted or overridden after an update is essential.
This is important to remember for all Joomla extensions. Don't try to change a module's or component's core css file. Instead, better try to create your own custom template.css file, load it last and in there create all your custom styles.
In cases where a commercial template does not provide a way to add a css override then you could use an extension like this: Add Custom CSS, which allows exactly this. To create your custom css override file and load it last.
Another option I often do in sites that I manage, is to modify the template and add my own link to my custom.css file, just before the closing head tag of the template. This is a minor, easy to remember and restore modification, that I am okay to deal with, when a template update arrives.
Helix Framework (JoomShaper)
Another Joomla template framework, that facilitates the customization workflow.
Helix Framework templates provide as well an easy way to add your custom styles with 2 convenient methods.
Gantry 5 (RocketTheme)
Gantry 5 is the latest version of the popular template framework and it provides a lot of new features and capabilities.
Regarding CSS overrides, there is a lot of flexibility and options.
Taking the Hydrogen Theme that is released as a standard Gantry 5 template, it provides a folder named custom.
This folder is provided for the user to place his custom files/overrides for the gantry framework/template (to not be confused with the Joomla template overrides, which remains in the template/html folder). You can place in there you custom.css file. Then through Gantry Template Administration Panel, you can customize your template layouts and use a Custom CSS/JS Atom Particle (a new gantry 5 feature), to add your custom.css to the template. Gantry 5 provides also the so-called stream links, (like shortcuts), in order to easily link your custom.css file.
So from inside the Atom particle you would link it using:
Using this approach is an efficient way to add custom.css for specific template outlines of your gantry5 template.
A second approach, that works globally for the whole gantry template, is by adding a custom.scss file, inside:
Doing so, gantry5 will always load and compile this scss file, and any css rules you have applied will override the template's default rules.
Inside the scss file you are perfectly fine either using SCSS or simply css. The compiler is able to compile both.