- Category: Extensions Directory Team
Overrides makes possible change the design of a frontend extension by adding customizations inside the template files. Thanks to Joomla 3 this process is easier.
In this tutorial you will learn how to create overrides for core and third party extensions.
What are template overrides?
Basically are custom layouts for Joomla extensions that replace the default ones without modifying the core files. You can change the design of components, modules and sometimes plugins by editing php and html code.
Are template overrides necessary?
Template overrides are not mandatory if you are satisfied with the design of your website. In the other hand, if you want to achieve a different look for your articles, contact form or other third party extension I highly recommend continue reading this post.
How to customize a module?
Let’s explain the process in details by using one of the addons from Zoo extension. In this example we use the Zoo category module to display a list of categories. Using the core Protostar template this is how looks by default:
Go to Extensions > Template manager > Templates > Your Template Details and Files
In this screen you have access to the files of the template. The two main features we are interested in are:
- Create overrides
Go to Create overrides tab to see the available extensions. Click on the one you need to override, in this case we choose mod_zoocategory.
If everything is fine, a success message will notify the override is created providing the path to a folder, as example: /templates/yourtemplate/html/mod_zoocategory/
If you receive an error is probably the override already exist.
Go to the new folder from Extensions > Template manager > Templates > Your Template Details and Files.
Be sure you are in the Editor tab with access to the template files, find the folder that include the override. In our example the path is: html > mod_zoocategory
This override folder contain a few php files that represent different module themes, we will edit uikit_list.php.
In the right side of the screen the editor loads the code of this file. For this example, we are interested in one particular line of code:
echo $zoo->categorymodule->render($category, $params, 0, false, 'class="uk-list uk-list-line"', true);
This syntax renders the Zoo category module. We can noticed one of the arguments define CSS classes: uk-list uk-list-line. Let’s replace it with: nav nav-tabs nav-stacked.
This is how the code looks after the update:
echo $zoo->categorymodule->render($category, $params, 0, false, 'class="nav nav-tabs nav-stacked"', true);
Click on Save & Close button
Check the result
By going to the public site we confirm how the customization brought a new look:
The classes nav nav-tabs nav-stacked are already included in the CSS files from the template, that's why the design is different and the customization was easy to implement.
You can apply overrides to components and modules mainly, the process would be fairly the same. Be aware not all the extensions support overrides and sometimes would be required customize more than one file for a single layout.
- Category: Extensions Directory Team
Joomla is a powerful CMS that include tons of features. These resources are enough to cover the requirements of a basic website; to add features like galleries, custom forms, slideshows or ecommerce you need to install third party extensions.
Joomla! Extensions Directory is the official repository for Joomla components, modules and plugins. Use the new and improved search form to find what you need.
In this tutorial we will explain 3 different ways to install an extension. All of them have the same purpose, please choose the one that match your situation.
Upload Package File
Go to Extensions > Extension manager > Upload Package File
Once you downloaded the installer compressed in a zip file, browse that file and press Upload & Install button. Wait while the file is being uploaded and installed, if everything is fine you will see a success message.
Install from Directory
I recommend this one when you install extensions with size bigger than 2 MB. You could try to install it using one of the previous methods but is possible won’t work due the time that takes upload the zip file is beyond the server settings.
Follow these steps:
- Download the installer, basically a zip file.
- Decompress the installer and upload the files inside the folder /tmp/your-extension/. Where your-extension means a custom folder. Use an FTP or SSH client for this process.
- Go to Extensions > Extension manager > Install from Directory
- In Install Directory field, type at the end of the path the
name of your new folder.
In this example we are using /your-extension/.
- Click Install button and wait.
If everything is fine you will see a success message.
Install from URL
Go to Extensions > Extension manager > Install from URL
When you know the hosted path of the extension, as example: https://www.website.any/extension.zip, paste that url in Install URL field, finally click Install button.
Joomla will upload the extension directly from the link and install in a single step process.
As you can see, you have more than one way to add new extensions to your Joomla site. Some are easier than others. This provide a great flexibility to do the same job depending of the situation.