Templates

Simon Grange.

A template is the design of your website, it controls its overall appearance. A template allows you choose the site's background color, the modules layout and style, the style of your menus...

Joomla! has two native types of templates: those for the Frontend and templates for the Backend.

The Joomla 3 default Backend template, Isis, is responsive design. It means that the template is suitable for all types of devices (smartphones, tablets, computers...).

If you're new to Joomla!, it is recommended that you keep this template. Firstly because it's a success, and secondly because it will be a lot easier for you to get some information or some help from the Joomla! community as this default template is widely used.

 

To access the templates, select ExtensionsTemplate Manager. You'll be taken to the following page:

Joomla! template manager

1 - Find all your Templates, for the Backend and for the Frontend.

2 - Filter to search for a specific template.

3 - Display either the Styles or the Templates.

4 - Toolbar:

    • Default: the default template will be displayed on all pages, except for the pages to which another template is assigned. At least one template must be set as the default template for the Frontend and for the Backend.
    • Edit: select a template then click this button to edit it (you can also click the template's name).
    • Duplicate: select a template then click this button to duplicate it.
    • Delete: select a template then click this button to delete it.
    • Options: customize your templates' parameters.

 

Display a template modules positions in Frontend

Each template offers different positions (different positions' names and layouts). To preview the template positions, select Options and click the Preview Module Positions button. Then, access your site's Frontend and add /?tp=1 to your URL. This will show your template positions on the page that you are viewing:

Protostar template positions

Protostar Template Modules Positions

Assign a Style to some pages

To assign a Style to some pages, they must be displayed via a menu item. The pages that are not displayed via a menu item will be displayed with the default Style.

To assign a Style to some pages, click the Style you want, then click the Menus Assignment tab and finally select the menu items of your choosing. Click the Save & Close button.

 

Edit a template

You may need to edit your Templates. All you have to do is click the template you want to edit to access its style sheets:

Files & folders for the Joomla! template: Protostar

Beez3 Template Style Sheets

To edit your Template, you need to have some knowledge of languages such as CSS, HTML, PHP...

If you decide to modify your Templates, it's recommended that you duplicate them first. This way, you will still have the original Template in case a problem arises.

If you are using the Joomla! native templates, you need to create new styles before you start modifying them. As some updates affect the Templates, all files can be overwritten and therefore all your modifications can be lost during an upgrade.

 

Install new Templates

You can download and install a template from a template provider. There are thousands of templates for Joomla! on the Internet, free or commercial, with themes, responsive design...

Installing a template is just like any other Joomla! extension.