How to create your own Joomla! templates using Template Creator

Simon Grange.

A Joomla! Site's template is very important, it defines the graphic style guidelines of your website. Even though this template is just the paint layer being added to your whole work and to your site's features, it plays a major role in determining the first impression of your website's visitors.

Even before your visitors find the information or the feature they are looking for, they will judge your site, its design and probably also its navigation.

Note that it's important to choose a well-coded template for at least three reasons:

  • Search engines like clean code, therefore your site will rank higher if the code is clean.
  • A well-coded template will have a fast load time, providing a pleasant experience for your visitors.
  • You will be able to easily edit (if necessary) the code of a well-coded template.

For all these reasons, it is important that you carefully choose your template.

When you installed Joomla!, you also installed 2 templates (in Frontend): Protostar and Beez3. These two templates are clean, ready-to-use and responsive design (suitable for all devices), but, in order to make your site stand apart from other Joomla! websites, you may want to edit these templates or use a completely different one.

If you wish to use a template that is different from those natively included in Joomla!, you have 2 options:

  • Download and install a template from a template provider. There are thousands of them, free or commercial.
  • Create your own template.

Creating your own template requires knowledge in programming languages (such as HTML or CSS), but you also have the possibility to use some tools allowing you to create your template without any coding skills.

Today, we're going to focus on a tool called Template Creator.

Template Creator is a component for Joomla! allowing you to easily create, few technical skills are required, fully customized, high quality and responsive design templates.

As is the case for every Joomla ! component, Template Creator must be installed on your site, then you'll be able to create and generate your templates. Once generated, you can export and install your templates as you would do with any other template.

 

Download Template Creator

Please note that Template Creator is a commercial component. This extension can be purchased for 24€ VAT excluded (6 months updates included, no support) and for 59€ VAT excluded (support and 6 months updates included). The extension can be downloaded from the author's website TemplateCreator.com
Please also note that you have a 30 day trial during which you can receive a refund if you're not fully satisfied.

 

Install Template Creator

Installing this component is just like any other Joomla ! extensions. To install Template Creator, go to your site's administration control panel, select Extensions (1)  → Extension Manager (2) → Tab "Upload package file" (3). Click on the button (4) to upload the package file from your drive, then hit the Upload & Install button (5).

How to install Template Creator

Install Template Creator

Once the installation's complete, you should see a message telling you that the process went OK.

 

Template Creator Presentation

To access the component, select Components → Template Creator. You'll be taken to the following page:

Template Creator - Presentation

Template Creator Presentation

1 - To create a new template.

2 - To edit an existing template (first select a template).

3 - To copy a template.

4 - To import a previously exported template.

5 - To export a template.

6 - To move a template to trash.

7 - Templates list : displays all templates.

8 - Fonts : to download and install fonts.

9 - About : You can find a description of the extension.

10 - Here you can find several video tutorials which will guide you through the creation of your templates. Do not hesitate to watch these video tutorials, they will help you get started and improve your template creation skills. Note that a comprehensive documentation is also available on the author's website, in the download section.

 

Create a template

To create your first template, just click the New button (1), you'll then see this page :

New template parameters

New Template Parameters

 1 - Two parameters are mandatory : the version of Joomla! with which you want to install this template and the template name.

Note : The template name should not contain space or special characters.

2 - It may be interesting to add extra parameters, such as the Author, the License or the Copyright.

Once everything is configured properly, click the Save & Close button. You'll be taken to the page that displays all your templates. All you have to do is to click the newly created template to edit it. You'll then be taken to this page:

Template Creator layouts

On this page, you have to choose the layout that best suits your project. This is not a permanent choice, you will still be able to add or remove some blocks afterwards. It's just a good way to save some time.

As an example, we will choose the model 11 which offers a variety of different block positions.

Configure the template's main style

Template Creator main styles

1 - You can edit your template's information details (version of Joomla !, name, copyright, etc.).

2 - The parameters button allows you to edit the template's main style. You can specify, among other parameters, the template's width, the page background, the colours (links, text), the font, the size, the headers, the buttons, … and you can also add custom code.

3 - This button enables you to configure your template's responsive design, that is the way it will be displayed on the different device types (smartphones, tablets, computers).

4 - Preview your site with the template you're creating.

5 - The Download button allows you to download the template on your computer so that you can install it on another Joomla ! site for example.

6 - You can make a copy of your template.

7 - The expert mode gives you access to advanced parameters for each block.

8 - This button allows you to upload an existing theme (very useful for beginners).

9 - You can save your template. As always, don't forget to make regular backups of your work in case a problem arises.

9 - Cancel and go back to your templates' list.

 

As you can see, you can easily customize the design of a template, be it the broad outlines or in detail.

Take the time to discover the Parameters button (2) and the various functionalities it offers. Thanks to this button, you will be able to easily determine your template's overall appearance.

 

Define each block's style

 

Once you've configured the template's main style, you can customize each block.

When you hover your mouse over a specific block, you will see the following information:

Template ceator style bloc 

1 - Remove the block.

2 - Move the block up.

3 - Move the block down.

4 - Edit the block. Here, you can find the block's specific parameters allowing you to customize and to differentiate the block from the template.

 

Then, you can even choose different styles for each module position.

 

Thanks to all the parameters we've just introduced, you can create and customize your template in a very easy way. Don't forget to click the Preview button in order to make sure that the result (which can sometimes differ) meets your expectations.

Once your template is done, you can click the Upload button. Template Creator will create a zip file so that you will be able to install this template on another Joomla ! site as you would do with any other extension.

 

Killer features

 

No coding skills required

As previously said, you don't need any coding skills to use Template Creator. All you have to do is to configure the different parameters and the component will generate the code needed to the creation of your template. You only need to get familiar with this component to be able to create your custom templates.

 

Ease of use

Template Creator allows you to easily create your template and to visualize it on your site, with all the items that your site contains.

 

Responsive web design

Thanks to the various parameters, you can configure exactly how your site will be displayed on the different devices (smartphones, tablets, computers). For smartphones and tablets, it's even possible to choose a landscape and a portrait mode.

 

A clean generated code

The code generated by Template Creator is clean. Therefore, it's easy for you to edit this code if you want to and it also ensures that no problem will arise with the use of third-party extensions.