14. Jan. 2015: Joomla Templates, Introduction

"I want my own template, a perfect template, a template with all features, ... and with everything possible." Additionally, normally these webmasters want to have everything without any knowledge about PHP, CSS, HTML, ... and, of course, without any efforts. they use Dreamweaver, Artisteer and or other WYSIWYG-editors. The result is, sorry, complete crap. Then they try to use a template framework... but:

With regards to computers and websites, there is a "law of conversation": The amount of work and knowledge remains constant.

So, how to create an own template? How to modify or adjust a template? How to develop a template from scratch? How to use a template framework?

First, let's have a look at a template and the files, this is what we are talking about:

Teplate files1. CSS: Every template has its own CSS-files, weather it is based on a framework or not. And in every case you should be familiar with CSS and CSS technologies.

2. html: This is the folder for the template override files. Code in this folder overwrites the default output of Joomla.

3. images: This folder contains all graphics used in this template. You may replace the pictures, but keep the resolution, sise and name. If you change the name, you have to change the name in the index.php or in the CSS-file too.

4. javascript: Java-Scriptes used in te template.

5. language: Here is the template language file.

6. component.php: To display content without browser navigation or header information in a seperat window (see "print preview" and "e-mail").

7. error.php: Customize your own error-page here.

8. favicon.ico: the smal pic in the URL-field of your browser

9. index.html: <html><body bgcolor="#FFFFFF"></body></html> a white empty website, for security reasons.

10. index.php: The heart of the template, controls the display and structure of your website

11. template_preview.png, template_thumbnail.png: (small) screenshot of the template and its thumbnail pic

12. templateDetails.xml: The "table of content" of the template. Joomla needs this file for instasllation purposes.

The template directories look all similar, if you use a template framework or not.

Introduction to Template Frameworks

There are nearly as many Template Frameworks as Template Providers/Companies. Template Frameworks for Joomla (Examples):

As an example, here is an introduction to Ganty:

Gantry Framework Workshop

(by Paul Blackburn)

The Gantry Framework is software that supports Joomla templates, some free others paid, that are designed to be used by it.

This workshop aims to cover the basics to get you up and running with a basic template..

Gantry itself comes with a free template that can be customised partially in the Template section of the back end of a Joomla site but, for more comprehensive changes, by adding css to a custom css file.

The software can be downloaded here and is loaded like any other Joomla extension.
Note: Dowload the Gantry Template Bundle for Joomla 2.5 + 3.3

Once you have loaded Gantry you work with it by going to Extensions Manager/Template Manager and clicking on Gantry - Default *Master

The screen shows various things but we will concentrate on the following menu items: Style, Features, Menu, Layouts and Advanced which together provide what Gantry calls Template Overrides.

Style

Logo - you can set your logo here though I tend to use a module to populate the site's Header.
Header Style - can either be Light or Dark but leave Light to start with
Link Color - the colour for all hyperlinks - leave as is, change later if you like
Font Settings - leave as is

Features

Leave all options set to OFF except System Messages which should be set to ON

Menu

You should have already have a main menu set in the site before you set these fields

Menu Control - Show = ON, Type = Dropdown-Menu
Select a Menu - select an existing menu from the drop down list
Position - set the module position you want to assign the module to, click here for module positions, for a menu at the top of a site select header-a
Responsive Menu - leave at Panel
Enable ID - set to OFF
Module Cache - set to OFF whilst you are developing the template set to ON when going live

Layouts

At the moment leave all the defaults set except MainBody Positions. MainBody Positions controls where the mainbody (articles) sits and where the sidebars sit in relation to it. There are two sidebars A and B which are positions for modules either side of the body. If, for instance, you want Sidebar A to the left of the body and B to the right and you want the body to be twice as big as a sidebar then set Postions to 3 and manipulate the slide bar underneath until it shows 3|6|3. If you don't intend to have any modules at either side then leave the Positions at 1.

Advanced

Layout Mode - initially select one of the Fixed options - can always change later.
Load Transition - set to OFF
Display Component - set to ON
Mainbody Enabled - set to ON
RTL Support - set to OFF
Page Suffix - set to OFF
Selectivizr - set to ON
Less Compiler - CSS Compression set to ON, Compile wait = 2 sec, Debug Header set to OFF - Click Clear Cache whenever you think it might need clearing.

More

For further documentation click here

CSS

To further customise the template you need to know something about css and create a custom css file - the basics are explained here

Gantry Forum

If you get in trouble or want to try something that is not in the Gantry then click here to visit the Gantry Forum. Please search the forum for answers to questions before you post a question as the community get cheesed off when people do this.

Additional information