Joomla4 is just an improved version of Joomla 3 where it has new features like back-end, which is totally changed, like admin navigation moving to the left side from horizontal to vertical. So in this tutorial, we will learn about Joomla4: How to create an override for Joomla layout.
Let See: Joomla 4 vs Joomla 3 – What are the New Features in Joomla 4?
But in this article, we are discussing an important feature of Joomla that existed in Joomla 3 and an override for the module, component, or layout.
When I started learning Joomla and working on that, I made one major mistake: customize the original file of components or modules if I need to change the view or design of that extension. I was not aware that these changes will be removed after the Joomla version operation. And I am sure every beginner makes that mistake. After some time I knew about it and then I started to override the template or view of components and modules. So I am providing screenshots and steps on how you can override module, component, and layout.
Why we’d like to override but not customize the modules, components, layout directly?
The answer to this question is the Upgrade, which means when we upgrade the Joomla version or particular component or module or the layout then our customization work will be removed. So we override the template file of extensions and it doesn’t affect after the upgrade.
Step-by-step points to make an override for modules, components & layout
This feature actually came in Joomla 3 and Joomla 4 also following the same pattern. In this article, we are talking about Joomla 4 front-end template Cassiopeia (default). So we will use a screenshot of the Joomla 4 template override process while these steps will be the same for another template as well.
Go to Templates/Cassiopeia/click on right side title/
On this path, you will reach on template customization interface and then you have to click on Create Overrides and then you will see all override options for all extensions.
There are 3 types of override options as below-
1) Components views
2) Modules template
3) Layouts
And some plugins also have the option to override but these are rarely used, I have not used them yet. That’s why I am not explaining that option.
1. Components views – To create an override for the Joomla component we are using the example of com_content which is an inbuilt component and widely used to override. So please have a look at the below screenshot where you can find 6 views folders so you can override to all. Process just very simple clicks on that view and it will be overridden and the same view will be created in the front-end template’s (in our example Cassiopeia) HTML folder with all files that existed in the component view folder.
2. Modules Template – In the same method we can create an override for a module template file, for example, mod_banner and mod_login by just clicking on that, So module template files (default mostly), are created in the template’s Html folder.
3. Joomla Layout Override – We can create an override for the Joomla layout as well and for this, we have to follow the same method as Joomla components and Joomla modules and files will be created within the template/HTML folder.
File Editing – In the Joomla 3 and Joomla 4 both provide the option to edit template files without any third-party tool like Filezilla or Cpanel. You can edit CSS, js, or PHP files easily.
