bredchosting.com logo 125x79
Example: mywebsite.com

Template Overrides - See how to make overrides in Joomla

Details
Parent Category: Tutorials
Category: Advanced Tutorials
Create overrides in Joomla

A template is the holy grail of a CMS-system; it lays out the structure of your website. But it's always possible to tweak the content and make it look better. All Modules, Components, or Plugins in Joomla can be changed using overrides.

Though many sites may look good with the Core template or a template as it is, it's always useful to tweak a website's look using template overrides. It is possible to write overrides for Modules, Components, or Plugins in Joomla. 

In this tutorial, I will share with you how we have changed the Core Latest Articles module to show a better view of our website.

left panel

Here you see all the files and folders that are attached to your template.

To go to the template system, click Extensions > Templates > Templates, here you will see all the templates that are pre-installed on your system. Usually, Beez3-template is the default. Click on Beez3 Details and Files, you will then come into the editing area for the template (this is the same for all templates).

 

top left panel

Here is all the magic happens. These three panels contain the complete management of your template. You are usually taken to "Editor" when you click the link to the page. 

  • Editor: Here, you can edit any page on the template, only by clicking on it.
  • CReate Overrides: This will take you the page where the overrides can be activated.
  • Template Description: Here, you can change the name and description of the template.

folders left panel

The default folder construction of all Joomla templates looks like this (some folders may miss). But the structure needs css, html, images, js, and languages. 

 

 

Now we are ready to make the override.

 To go to the override panel, click on "Create Overrides." 

 

Since this tutorial is about creating an override for "mod_articles_latest," we will refer to other tutorials for creating the overrides for components, or Plugins and even Layouts can be overwritten, with ease. You can find more tutorials here!

 

Now let's dive into it!

 

Module panel

To make the override, simply click on the link "mod_articles_latest." You will then come back to the editor table. If successful,  you will be prompt with this message:

Message

Override created in /templates/beez3/html/mod_articles_latest
Successfully created the override.

What this means is that the override-files has become created in the folder "templates/beez3/html/mod_articles_latest". If you now click into the folder "html." Now you should go to the folder called "mod­_articles_latest," there you will find the file "default.php." Click on it, then locate the button called "Rename File" on the top of the page (this m just be done, to prohibit the core-module from being overwritten). You can name this file anything, but make sure to only use dashes (-) between words, underscore (_) will not work, also only use English alphanumeric letters. You are now ready to make an override.

 

An override must be in a particular outlay. 

 

1.

First of all, it's important to start all overrides with the head code. This is to prevent malicious hackers from getting access to your files. 

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_latest_articles
 *
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * 
 * @subpackage mod_latest_arrticles
 * @author      [YOUR NAME}
 */
 
defined('_JEXEC') or die;
 
?>

2.

Below this, you can put any HTML or PHP-codes you like.

 Back to our "mod_latest_article" override

<div class="latest-news-template">
    <div class="row">
        <div class="card-columns">
            
    <?php foreach ($list as $item) : ?>
 
            <div class="card pb-5 news-card">            
                    
               <?php
                    $article_images  = json_decode($item->images);
                    $article_image   = '';
                    $article_image_alt   = '';
                    if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
                        $article_image  = $article_images->image_intro;
                        $article_image_alt  = $article_images->image_intro_alt;
                }?> 
               <a href="/<?php echo $item->link; ?>">
               <img class="card-img-top img-fluid latest-news-image" style="max-width:350px;" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
               </a>
                <div class="card-body">
                    <h5 class="card-title latest-news-title"><a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h5>
                    <p class="card-text latest-news-description"><?php echo JHTML::_('string.truncate', $item->introtext, 500, false, false) ; ?></p>
                    <a  href="/<?php echo $item->link; ?>" class="btn btn-primary">Read more</a>
                </div>
            </div>
            <?php endforeach; ?>
 
        </div>
    </div>
</div>

<?php
/**
* @package     Joomla.Site
* @subpackage  mod_articles_latest
* @Author    bredc.com
* @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license     GNU General Public License version 2 or later; see LICENSE.txt
*/
 
defined('_JEXEC') or die;
 
?>  
 
 
 
<div class="latest-news-template">
    <div class="row">
        <div class="card-columns">
            
    <?php foreach ($list as $item) : ?>
 
            <div class="card pb-5 news-card">            
                    
               <?php
                    $article_images  = json_decode($item->images);
                    $article_image   = '';
                    $article_image_alt   = '';
                    if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
                        $article_image  = $article_images->image_intro;
                        $article_image_alt  = $article_images->image_intro_alt;
                }?> 
               <a href="/<?php echo $item->link; ?>">
               <img class="card-img-top img-fluid latest-news-image" style="max-width:350px;" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
               </a>
                <div class="card-body">
                    <h5 class="card-title latest-news-title"><a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h5>
                    <p class="card-text latest-news-description"><?php echo JHTML::_('string.truncate', $item->introtext, 500, false, false) ; ?></p>
                    <a  href="/<?php echo $item->link; ?>" class="btn btn-primary">Read more</a>
                </div>
            </div>
            <?php endforeach; ?>
 
        </div>
    </div>
</div>
  
 
 
 

THis is how our code looks. We will now try to explain the code in details.

Beside the top code there is a code that disc important for an override to communicate with the Joomla system: 

<?php foreach ($list as $item) : ?>

This will communicate with the category list of your choice, and display the outcome.

 We have decided to display the module as a bootstrap card (documentation on this is inspired by and build with Bootstrap). Bootstrap is supported in Joomla Core (though the support is not mandatory, it's an easy way to change the looks of modules and components in Joomla.)

The code says as followed: Start putting a new Bootstrap card for each element that is displayed as an element. (we have added extra code in the display, to target the CSS code better, but this is not required.)  

Let's go further down the code.

<?php
                    $article_images  = json_decode($item->images);
                    $article_image   = '';
                    $article_image_alt   = '';
                    if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
                        $article_image  = $article_images->image_intro;
                        $article_image_alt  = $article_images->image_intro_alt;
                }?>

 To quickly explain the above code, it refers to the "Intro-Image" of an article (this is optional to the module, but it's the standard way to display article previews.) I'm not going to explain this in detail, because that is beyond the scope of this tutorial.

We go on...

<a href="/<?php echo $item->link; ?>">
               <img class="card-img-top img-fluid latest-news-image" style="max-width:350px;" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
               </a>

This code refers to linking the intro image so it can apply the article when someone clicks on it. As this also refers to the intro image it's also optional to include it.

                <div class="card-body">
                    <h5 class="card-title latest-news-title"><a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h5>
                    <p class="card-text latest-news-description"><?php echo JHTML::_('string.truncate', $item->introtext, 500, false, false) ; ?></p>
                    <a  href="/<?php echo $item->link; ?>" class="btn btn-primary">Read more</a>
                </div>

The next div output the title of the article, the introtext (with max 500 characters), it also displays a button for readmore (this is optional).

            <?php endforeach; ?>

This is the ending of the article intro display. It's important to include this.

 AND THAT'S IT!

Comments wanted

- LET ME KNOW IF YOU KNOW ANY OTHER WAYS TO DO THIS IN THE COMMENTS BELOW -

 

No comments

Leave your comment

In reply to Some User

  • Introduction to Joomla Content Editor (JCE)

    The Joomla Content Editor (JCE) is a powerful extension designed to simplify and enhance content creation within the Joomla content management system. Joomla’s default editor options can be limiting, especially for users who need more control over...

  • Joomla is a widely-used, open-source content management system (CMS) recognized globally for its flexibility, scalability, and ease of use. It powers millions of websites ranging from personal blogs to large-scale corporate portals and government websites. Joomla provides a robust framework that...

  • one name consistently stands out when discussing Joomla website backups: Akeeba Backup. Developed by Akeeba Ltd.. Whether you are managing a personal blog or a commercial enterprise website, safeguarding your data is paramount, and Akeeba Backup rises to this challenge with robust features,...

  • Creating a form using RS Form in Joomla 5 is a straightforward process.

    Follow the steps below to create your form easily:

    Step 1: Install RS Form

    1. Log in to your Joomla 5 administrator panel.
    2. Navigate to Extensions > Manage > Install.
    3. Upload the RS Form package file and click on Install.

    Step 2:...

  • Discover the truth behind Joomla!, the renowned content management system empowering countless websites globally. Unraveling prevalent misconceptions, this article delves into Joomla! 's functionality and user-friendliness to offer valuable insights. By debunking the top ten myths surrounding...

  • The Failed Login Attempts plugin gives you an overview of your failed logins, but you can make it even better by applying a simple override. The override provides a link to more information about who has tried to log in, and you can therefore use other extensions to block the user or take...

  • You’ve probably heard that Joomla is a “free” platform. That’s true, but it doesn’t tell the whole story. You can download the software for free, and you can host Joomla sites for free on specific hosting platforms. However, if you want the best possible performance and security, you’ll need to...

  • Subform fields are mighty, but did you know they look like a list? - Here, I will show you how you can spice up the look of your Subform.

    Although Subforms are not a new feature in Joomla 4 but were available already in Joomla 3, in Joomla 3, they were introduced as "Repeatable-Fields". But...

  •  In Joomla, it is relatively easy to create CSS overrides. If you would like to change the color of the Invalidate Cache button, you can read on.

    How to create a CSS override in Joomla 4 Administrator (Atum - Template)?

    Joomla is built with the intention of user customization of how it looks. CSS...

  • In Joomla 4, we were introduced to “subforms”, which are great for creating more user-friendly fields for your articles or page, containing the fields in the subform.

    The problem is that when you create a subform, the fields in the subform are divided by a comma. This doesn’t look good on your...

  • With the ability to use extensions in Joomla, it is often prevalent to install more extensions than necessary; this will usually result in a slower site. So here are my recommendations for the ten best Joomla extensions every Joomla site should have.in 2023.

  • The backend of Joomla can be very boring to look at. You can customize it as you like, by adding and replacing modules on the page.

    When you install the Joomla 3.x out off the box, you get two backend templates preinstalled, the main and mostly used template is Isis, this will be used in this...

  • JCE Editor is the best and most used Editor in Joomla; only TinyMCE as the core editor can beat it. Every Joomla site should have the JCE Editor installed because it is free and easy to use.

  • Having a good web hosting solution for your sites, either it is static or based on a CMS like Joomla, WordPress, or others, you have a lot of considerations to take into a factor. I will try in this article to guide you in the right direction towards modern hosting in 2022.

  • When you have a new Joomla Installation, the most annoying thing is that it doesn’t work as you would prefer. You may end up spending hours after hours trying to find the fault but end up banging your head in the wall. Here are 3 common reasons why your site Joomla site isn’æt working.

  • Is it possible to do things in Joomla Backend that is considered a hack! This tip from Basic Joomla is the answer, Yes!, there are several hidden possibilities in Joomla if you put your fingers into it.? - Here is how to use a hack for doing better Menu separator in Joomla. Here are two ways to do...

  • The dark mode is the new Black, and it keeps your eyes from getting light exhausting. And it also looks great in the browser. The Dark mode is not native in either Joomla 3 or Joomla 4 (as of my knowledge). But there is a solution if you don’t want to use a plugin for your browser. You can simply...

  • One of the most common mistakes when creating a new Joomla site is not securing the Joomla-site both with Backup and Security Extensions. Having up-to-date security is essential for every site on the Internet, whether it’s a plain HTML site or a complex CMS system like Joomla or WordPress offers. But...

  • There are many Extensions for Joomla, both free and with a paid license. But there are a few that should be mandatory for every installation of Joomla. I will here make a list of those I think is essential when you start a website.

  • In Joomla, it’s possible to use CSS more effectively than most people realize. You can, if wanted personalize each page just by adding a CSS class to the menu link.

    Joomla offers in most modern templates the ability to target either the title or the page’s alias. It makes customized CSS very easy,...

  • Let's state it once and for all, the backend in Joomla is quite boring, but what if you can give it a more interactive and interesting look. This is quite easy to do using the backend modules and CSS. 

    The reason for this article offsprings from a Youtube Video that shows the benefits of haveing an...

  • Is it possible to make content sliders using pure CSS & HTML only? - Read through and find out more. I will show you some smart tricks that make an awesome reusable slider using only HTMl & CSS.

    Have you ever written a long article with mutch specifications inside? - These articles have their way to become...

  • <

    CSS has from the age of the Internet been a part of doing websites. It is an easy but useful way to design an article. There are several ways to write CSS in Joomla, you can use an external file to store all CSS codes in, you can use an extension to include the code, or you can write CSS directly in the content. In this article, I will give some look into how I do it.

    In this article, I will show you three different ways to use CSS in an article. The easiest thing is to use an extension to add CSS to the article. There are several extensions in the JED (Joomla Extensions Directory) that gives this opportunity. One of the popular is Sourcerer from Regular Labs. But its also possible to do in-line CSS coding in every article, but this can be very ineffective in large articles, the third and maybe most used is to put the CSS codes into the template as eighter an external file or in the CSS capabilities of the template itself. In modern template-Framework is this common, the disadvantage of this is that you always need access to the backend to add extra CSS in your site.

    W3C CSS verifiedW3C CSS verified: W3c.org is setting the standards for CSS

    1 Code directly as you go (Hard coding the articles)

    If you prefer to do the CSS coding inline as you write an article, you must bear in mind that you will NOT be able to reuse the CSS on any other articles and you must repeat the same thing for every content with the same code. This could look like this:

    <a href="/home" style="background-color:#ff0000;color:#ffffff;">Home</a>

    This will output: Home

    2. Use an external file

    If you use an external file as a CSS source, it is normally located under the css folder in your template directory. And its usually called custom.css or user.css, the downside with this is that you need access to either FTP or bee logged in to the backend as a Super Administrator.

    3 Use an extension to add CSS code in the article

     If you want to use an extension to insert CSS in an article, you can not reuse the CSS codes without having it in every article that contains the same style.

    What do I recommend?

    A combination of the option 2 and 3, will give the easiest result and you can standardize some of the CSS styles in a file and add styles in that applies to certain articles at one addon at the end of the written article.

    Comments wanted

    - LET ME KNOW IF YOU KNOW ANY OTHER WAYS TO DO THIS IN THE COMMENTS BELOW -

  • Have you ever made a website with Joomla and you are getting the title "Home" with a large h1-header-tag? You can either hide the tag completely on all content, or you must specify it to be hidden on every page/article you make. There is a third and maybe smarter way to do this. 

    Joomla Menu options

    When you add a...

  • Have you ever been frustrated by styling a page for then realize that every image contains a white line underneath, I saw this trick on Youtube and tried it with Joomla. The result was that line disappeared. This issue resides from the early internet when we've to use inline images in the text.

    IN...

  • When you are about to change passwords in other ways that it's intended to do, you should always take in mind that it always is a security risk. You should therefore use extra care when you need to use these steps. These ways work in Joomla 2.5, 3.x, and 4.x. The tutorial is based on Joomla Docs.

  • A template is the holy grail of a CMS-system; it lays out the structure of your website. But it's always possible to tweak the content and make it look better. All Modules, Components, or Plugins in Joomla can be changed using overrides.

    Though many sites may look good with the Core template or a...

  • One of the most important things to have in mind when you deploy a new website is Backup policy. Akeeba Backup is a free Component from AkeebaBackup, which allows you to do secure backups and maintaining them for your Joomla site.

nordvpn

Login Form