Blog

In this article, we’ll see Joomla Template Structure.

Welcome to the exciting world of Joomla templates! If you’re a web designer or developer, understanding the Joomla template structure is like having a superpower for crafting stunning websites.

We’ll take you on a journey to demystify the Joomla template structure. We’ll explore the different components, files, and directories that come together to shape the look and feel of a Joomla-powered website.

Get ready to unlock your creativity as we dive into the friendly and fascinating world of Joomla template structure!

Joomla, the renowned content management system (CMS), empowers countless websites worldwide with its flexibility and customization options.

Joomla Template Structure

At the heart of Joomla’s power lies its unique joomla template structure. We’ll take a friendly journey into the world of Joomla templates, unraveling their structure and demystifying their components.

By understanding how Joomla templates are organized, you’ll gain the confidence to unleash your creativity and build captivating websites with ease.

A template is a type of Joomla extension that changes the way your site looks. There are two types of templates used by the Joomla CMS: Front-end Templates and Back-end Templates. The Front-end Template controls the way your website is presented to the user viewing the website’s content.

Joomla templates use a structure of directories and files but they can vary from template to template

• Site templates (templates that change what your website looks like) can be found in the /templates directory. For example, if your template is called “mytemplate”, then it would be placed in the folder:

/templates/mytemplate

• Administrator templates (templates that change what the administrator section of the site looks like) can be found in the /administrator/templates directory. For example, if your administrator template is called “myadmintemplate”, then it would be placed in the folder:

/administrator/templates/myadmintemplate

Template directories

A typical template for Joomla! will include the following directories:

• css – contains all the .css files
• html – contains template override files for core output and module chrome
• images – contains all images used by the template
• language – contains additional language files used by the template

Depending on the complexity and design of the template is may also contain:

• javascript – contains supporting JavaScript used by the template for added functionality

Example Joomla template structure with files

Typical path of a template is /public_html/domain-name/template/ which will contain the following directories and files based on your template.

/css
/html
/images
/javascript
/language
component.php
error.php
favicon.ico
index.php
templateDetails.xml
template_preview.png
template_thumbnail.png 

Template files

It is most common for a template to have at least the following files:

• index.php

Provides the logic for the display and positioning of modules and components.

• component.php

Provides the logic for the display of the printer friendly page, “E-mail this link to a friend.” etc.

• error.php

Provides a method to handle errors such as 404, page not found error.

• favicon.ico

favicon icon file

• template.css

Handles the presentational aspects of the template including specifications for margins, fonts, headings, image borders, list formatting, etc. The .css files may also be located in the /css directory.

• templateDetails.xml

Holds meta-information related to the template and is used by the Installer and the Template Manager.

• template_preview.ext – replace .ext with the extension format of the image (.jpg, .png, .gif)

Generally a 600×400 pixel image that is shown when the cursor is clicked on the thumbnail image in Template Manager:Templates, not Template Manager:Styles. This gives the Administrator a pop up modal window of the template before applying it to the Site.

• template_thumbnail.ext – replace .ext with the extension format of the image (.jpg, .png, .gif)

Generally a 200×150 pixel thumbnail image that is shown when viewing the Template list in Template Manager:Templates, not Template Manager:Styles . This gives the Administrator a thumbnail view of the template before applying it to the Site.

The Joomla template structure empowers you to create stunning websites that embody your vision and captivate your audience.

From the template details and file organization to module positions, customizable parameters, and responsive design, Joomla puts you in control.

Embrace the freedom Joomla offers, experiment with customization, and let your creativity soar.

With its user-friendly template structure, Joomla opens up a world of possibilities for creating websites that reflect your brand and engage your visitors.

Get ready to embark on an exciting journey of template customization and design brilliance. Happy templating.

I Hope this article helps!