Take the 2-minute tour ×
Joomla Stack Exchange is a question and answer site for Joomla! administrators, users, developers and designers. It's 100% free, no registration required.

When using a free/commercial Joomla template from Template Club X/Y/Z, what is the best way to include my own CSS styles?

share|improve this question

1 Answer 1

up vote 9 down vote accepted

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.

  • It's easier to maintain
  • Your changes will not be lost if you upgrade the template
  • You can easily copy/move the modifications to another template or another site.

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).

General usage

To load a custom style sheet in the Joomla <head> tag, the following code can be added to the index.php file of your template (YOURDOMAIN.COM/templates/yourtemplate/index.php), right before the ending </head> tag in order to ensure your file is loaded last.

JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css');

(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 <link> tag, but this is less flexible than the above mentioned option:

<link rel="stylesheet" href="/templates/mytemplate/css/custom.css" type="text/css" />

!Important

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 !important to your styles, eg. h1{color:red!important;}

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

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 /templates/yourtemplate/css/ folder, and the name must be YOURTEMPLATEFOLDER-custom.css.

Example: If you're using their free Afterburner 2 template, the default template directory is /templates/rt_afterburner2/. Add a file called rt_afterburner-custom.css (carefull with underscore and hyphen) to the /css/ subfolder, and it will be loaded automatically by the Gantry framework.

Shape 5

Shape 5 templates ship with an empty custom.css file in the /css/ subdirectory of your template. Simply add your styles to this file and they will be included in your layout.

Gavick Pro

Gavick Pro templates ship with an empty overrides.css file in the /css/ subdirectory. But note that this file is not loaded by default, you have to activate Override CSS in the Advanced Settings tab in the template settings.

T3 Framework

Templates based on the T3 Framework may/may not include a custom.css file in the /css/ subfolder of your template (simply create it if it's not there), but when present, the file will be loaded after any other CSS file.

Warp Framework

Templates based on the Warp Framework automatically loads the custom.css file found in the /css/ subfolder. Additional CSS files can be loaded by adding

$this->warp->stylesheets->add('css:yourcssfile.css');

to the file /layouts/template.config.php.

share|improve this answer
    
For general usage, I would suggest using JHtml::_('stylesheet', 'path/to/file') rather than addStyleSheet as already argued about on another answer :) Other than that, bloody good answer. Will definitely come in handy for people –  Lodder Aug 4 at 19:12
    
Thank you, @Lodder. I hope this info can be useful to people. Regarding your suggestion, I did read the debate. How can JHtml::_ be used with $this->template ? –  johanpw Aug 5 at 4:17
2  
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/style.css'); –  Lodder Aug 5 at 7:55
    
+1 very descriptive and well defined, nice work! –  Jordan Ramstad Aug 5 at 18:02
2  
Actually, the newer rocket themes use LESS. All you have to do is make a file in the LESS folder called template-custom.less and put your code in that. Then you can enjoy the tricks that LESS brings. Warp 7 allows you to create your own "style" in the styles folder and you can actually stick a custom.css file in THAT folder (inside its own css folder). That way each style can have its own custom CSS. It also makes it stand up to template upgrades. Using the default custom.css file means it gets overwritten every time you upgrade the theme. –  Brian Peat Aug 6 at 3:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.