21

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

Improve this question
1
  • 1
    Add a custom.css stylesheet. if your template doesnt' pick it up automatically, you can add it in your head.php usually the path is: templates/templatename/tpls/blocks/head.php <link rel="stylesheet" href="/templates/templatename/css/custom.css" type="text/css" />
    – Tony M
    Mar 4, 2016 at 19:19

5 Answers 5

Reset to default
23

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

Joomla Shine

Create a custom CSS file in the /css/ subfolder of your template e.g. custom.css and specify the file name at Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s).

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.

Improve this answer
5
  • 2
    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, 2014 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, 2014 at 4:17
  • 2
    JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/style.css');
    – Lodder
    Aug 5, 2014 at 7:55
  • 3
    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, 2014 at 3:28
  • 1
    Great answer and very useful! Another option you might like to add for templates/frameworks that don't include provision for custom CSS files is the use of a third party extension such as CSSConfig extensions.joomla.org/extensions/style-a-design/templating/… which is designed for this exact purpose.
    – Neil Robertson
    Dec 10, 2014 at 9:01
9

Joomla 3.5+ (Protostar template)

As of Joomla 3.5, you're able to create file called user.css and place it in:

templates/protostar/css/user.css

Note: the file name must be user.css

The protostar template will check if:

  • The file exists
  • The file size is > 0.

If both conditions are met, it will automatically import this file for you.

See the Pull Request on Github

Improve this answer
5

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.

  1. In the template control panel in backend, there is a Custom CSS field. Here you can type your css, which will be added as a style element in the head section of your pages and as such, it will also take precedence over other external css files. Of course this option is not the ideal, if you are planning to write a bunch of lines of css, therefore there is a second method.

  2. As many other template frameworks, Helix also provides the ability to create your own custom.css file. Simply create it, and place it inside the css folder of the template. The template will parse it and will include it in the head section of your pages.

Improve this answer
3

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.

Improve this answer
3

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:

gantry-theme://custom/thing.css

The gantry-theme:// shortcut, will always refer to the current gantry template folder.

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:

template_directory/custom/scss/custom.scss

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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