Joomla template override

protostar contact form

When you start building templates based on Joomla content management system very often you come to the point when you need to use more than just css.


Joomla as opensource CMS comes with tons of free and paid extensions, many quality templates. In many cases everything is styled nicely up to hight standard.

Sometimes although you would like to make some changes, add some layout modification inside extension to blend it nicely into your Joomla template. The beauty of Joomla lays in “organization”, everything has got its place. It may look at the first instance a bit overwhelming, but when you get into it it really helps with development. Lets start with extension ( module/component) overide. We start with com_contact component. First image shows us great default protostart contact, breath taking design. I am going to achieve contact as isĀ  in ABC template, below:

contact form for ABC joomla template

I think you can see subtle differences in design. Contact component comes with three presentation styles, plain ( we are going to style this one ),sliders and tabs. My aim is to have contact details and contact form displayed side by side. To achieve this I want to add two wrappers div with classes, “cd-wrapper” for contact details and “cf-wrapper” for contact form and at the end add styles to LESS file. We are going to modify views. First we are going to go to modules directory.

location of contact component in Joomla

Select com_contact and go to views directory and then contact->tmpl. Copy all files which are within tmpl folder to html folder inside yourtemplate root folder. If doesn’t exist, create one, make sure that web server can access these files. From now our Joomla template will use files we just coppied. Below is what it looks like in my ABC Joomla template.

overrides location

As you could see we are going to modify default.php file. There are three different styles and we add our wrapper div only is presentation style is set to plain. It is highlighted in red above, keep in mind that we just have opened div tag and haven’t close it. For closing this div I also use if statement to apply it only to plain style.

contact component override

We successfuly added wrapper div for contact details, now scroll down a bit and do similar thing with contact form part:

contact form wrapper

The mechanism is exactly the same, place wrapper within “plain” presentation style ( line about 129 ) and do the same with closing tag at line about 142-145. I placed it also within if statement to be sure that it applies only to plain style. Now is time to check if it works. If you don’t know how to apply different presentation stlye see image below:

comcontact manager

You select it in “Display” tab and Display format option. Select it to plain and refresh front end:

firebug com contact


After inspection in firebug you will see that we applied two div wrappers. Your output will vary from mine, because I have already applied styles. You are not restricted to adding html, you may also add some php logic, but it is not the best practice to use view for that purpose. Also keep in mind that although your joomla template override is 100% safe from extension update, from time to time is worth checking if it is not absolete, unlikely but extension developer may have some updates to views as well. Explore another files inside our html/com_contact/contact template override. Have a look at default_address.php. Inside this file we can add our own icons, font awesome and extra comments.

default address

As you can see I have added some font awesome icons “icon-envelope” and “icon-phone”. I use gantry framework and therefore I always prefer to work with LESS to style my joomla templates.

lsee styles for contact

I hope you find this article helpful, it is not ready make receipt, cookbook how to style, but aim is to put you to the right direction.