Template Overriding

Template overriding is a standard feature that comes with Joomla! It's sole purpose is to allow you to customize your layouts without modifying the files and contents of the components or modules that you install on your Joomla! site.

NorrCompetiton has a very flexible overrides system which allows you to control almost every part of the output.

All theme files are by default inheriting from the default theme. For instance, if you are using the uikit theme, it will inherit files that are not overridden from the default theme. The same applies to overrides and custom themes.

Creating layout overrides

Preparing a template override

Let’s assume that the name of your template is mytemplate. First of all you need to create a template override.

Create a general override folder called html in the following path:
/templates/mytemplate/html/

The folder above would contain all component and module layout overrides.

Create NorrCompetiton override folder called com_competition in the following path:
/templates/mytemplate/html/com_competition/

This folder will contain theme folders you want to override or use.

Overriding default themes

Let’s assume that you are using the default theme and want to override it.

Create theme override folder in the following path:
/templates/mytemplate/html/com_competition/default/

If you need to create a layout override for
/components/com_competition/themes/default/competitions.php

then you will need to copy that file to the following path:
/templates/mytemplate/html/com_competition/default/competitions.php

The same applies to any PHP file inside the theme you want to override.

Creating CSS overrides

Theme override

Creating CSS file overrides for theme is almost identical to layout overrides.

If you want to create a CSS override for the style.css file of the default theme which is located in
/components/com_competition/themes/default/css/

then you will need to copy it into the following path:
/templates/mytemplate/html/com_competition/default/css/style.css

Media override

Media overrides are slightly different. These are the general assets for the component and are located in the /media/com_competition/ folder.

If you want to override a cropper.css located in the /media/com_competition/css/ then you will need to copy it into the following path:
/templates/mytemplate/css/com_competition/cropper.css

Creating custom theme

Overriding default themes is great, but let’s imagine that you have a Joomla template which use own framework and the default themes does not fit. Then you can create your own theme and use it with NorrCompetiton. Let’s assume that you want to create a theme called custom:

  • Prepare a template override
  • Copy the default theme folder form the /components/com_competition/themes/default/ to the following path: /templates/mytemplate/html/com_competition/
  • Rename the folder from default to custom. The path should look like this: /templates/mytemplate/html/com_competition/custom/
  • Select your custom theme in the component settings: Options > General tab > Theme

That’s it. Now you have the full control of the output.