The template building process is fairly simple and straightforward. We recommend watching our video demonstrations to see the process in action before getting started. You may also wish to familiarize yourself with the parameter legend and check over the getting started section to make sure you have all the necessary requirements.
Upon launch, the Joomla! Template Builder's interface presents you with a group of tabs and settings panels. Each tab serves as a quick jump to the section of the builder you wish to work in. The tabs and panel groups allow you to move around the builder without reloading the page so that your settings are not lost in the process.
The Template Builder tab is where the majority of the customization process will take place. This tab contains four collapsible settings groups (or panels) which can be expanded & contracted. To the left of each individual parameter setting is a helper icon which will show a brief tip on mouse over. At the bottom of each panel you'll notice the "Build Template" button which will load all tab and panel settings into the Preview & Download tab, generating the configuration file and preview link.
- Layout & Display Options
- Allows you to select the main architectural template options such as header styles, browser width settings, site title, column ordering, and module column widths.
- Body & Page Colors
- Allows you to quickly change the template's main background color, content background colors, and various page elements using direct input or dynamic color pickers.
- Typography & Text Colors
- Allows you to easily customize the template typography by specifyng font families, heading styles, and text colors by direct input or specify from color pickers.
- Navigation Colors & Options
- Allows you to specify a style of multi-level or dropline menu navigation as well as giving you complete control of all background and text colors.
The Module Builder tab is independent of the Template Builder tab and is a separate step of the process. Typically, the base template should make use of the primary and secondary colors while the modules are created as accent colors. See the configuration presets for example useage. Similar to the Template Builder tab, the Module Builder will load your options into the Preview & Download tab allowing you to visit a live preview, generate the CSS, or download the images for your modules.
If you've ever used Adobe Illustrator, Fireworks, or Photoshop then you'll probably have an idea of what swatches are. The same principle is used in the Joomla! Template Builder. Swatches are basically quick reference design helpers for frequenly used colors. The Template builder process involves a good bit of copying and pasting, so having these colors available in a specified location is intended to speed up the creative process.
The Preview & Download tab is where all the magic happens. Upon clicking the "Build Template" button, all your defined settings are generated for live previewing. The template configuration is also generated where you will only need to copy and paste into your js_template_config.php file to reproduce the settings on your site.
See also: Getting Started