Getting started with Joomla Template Builder

What is Template Builder ?

Template Builder  is an online tool for creating templates which can be used in a Content Management System. Template Builder  works with an advanced WYSIWYG-editor (What You See Is What You Get). With this WYSIWYG-editor it is not required to have programming skills anymore when creating a template .

What is an template?

As defined by the Joomla! documentation:

The Template controls the overall look and layout of your site. It provides the framework that brings together common elements, modules and components as well as providing the cascading style sheet for your site.

Templates are managed with the Template Manager, which is located on the site menu on the Back-end of your site.

How do I get started?

There are a few steps which will help you to get started with Template Builder:

Picking your template
With Template Builder you always start from a design. When you open up the application a basic template is shown.
You might however would like something completely different. In order to pick a different template, select the green 'Templates' tab on the right in the top navigation menu.

This will open up a whole set of templates. To open up  one of these templates, just click the template you like and it will load this template in the application. In order to load another design, go back to the templates tab.

Customizing your template
In order to make the template yours, we offer you a set of tools which will help you to customize the template to your likings. Although almost everything is editable, we highlighted some of the best features:

Uploading your own header image
On many places you can add your own images (header, page background, sheet background, article background, menu items, logo). 
All these images can be changed. Here we will describe how you can change your header image, so you can apply this to all other images.

To change your header image simply click in the template on the header. You will see that on the left the header menu will be loaded, presenting you with options to adjust the header. On the top of the left menu you will see the 'select image' button. To change your image simply select this button. A file browser will be opened. Use this to locate the image you would like to incorporate in your template. Select open and the image will be uploaded and entered within your template!

Setting colors
Changing colors is a simple process. Almost all items in the template contains color settings.
For example to change the background color, select the background in the editor. The left menu will load the Background menu. 

To select a color click the color picker (the black box above transparency containing either a color or the sign that no color is selected). The color picker will open allowing you to select a standard color. If you want more advanced colors, select 'more colors' and you can enter your colors or pick any of the colors there.

Changing fonts
Changing fonts can be done in 2 easy ways. First of all you can decide to change all the fonts in your template. To do that select 'Global Fonts' from the top menu.
On the left you can pick the font family, size and color. Note that all this will change all fonts within the template.

To change only certain fonts, click on the 'Expert' tab above the right menu. This will feature more settings. You can select the fonts you want to change from the menu and modify the fonts, just as in the Designer menu.

Previewing your template
During development it is always good to check your work. We therefore build in the live Joomla! preview. This will allow you to view your Joomla! template in a live installation. In order to preview your template, just click the preview button (the magnifying glass). Within a new screen your template will be loaded into a Joomla! installation with demo content.

Remember that once you export the template to your own Joomla! installation, automatically your content will be selected.

Exporting your template
In order to export your template and implement it in your Joomla!, follow the following steps:

1. Make sure you are logged in (this is always wise as this will allow you to save your templates as well).
2. Select 'My templates' under your username.
3. Choose the template you would like to export and select 'Finalize'.
4. Template Builder will build your template and once finished, it will allow you to:

- Select the 'Download' button (this will provide you with the .zip file which you can import in Joomla!)
- Copy the install from URL link. This link can be used to install the 'Install from URI' option within Joomla!