Templates in Joomla
Joomla templates consists of a frontend (the website) and a backend (the administration interface). Both parts have their own templates. They are stored in the folders
- /templates - Frontend
- /administrator/templates - Backend
- /templates/atomic
Atomic a kind of an uncommon template framework - /templates/beez_20
Beez 2 is the Joomla standard template. - /templates/beez5
Beez 5 is the HTML5 version of Beez 2 - /templates/system
In this folder Joomla stores all the files that are common for all the templates, e.g. the Offline and the Error page.
- /administrator/templates/bluestork
Bluestork is the default standard administrator template - /administrator/templates/hathor
Hathor is an optional administrator template. It is accessible and colours are customizable. - /administrator/templates/system
In this folder Joomla stores all the files that are common for all the templates, e.g. the Error page.
How to create a new Template?
You have three options for creating a new template- start from scratch with creating a folder and all the necessary files
- install a starter theme and modify it
- copy an existing template and modify it
Template name
First of all we need a name for our template. The name will appear in XML files, the database, the webservers files system and several caches. Avoid special characters and blanks in the name. I’ll call the template cocoate.Files and Folders
Create a /templates/cocoate folder.In the folder we need the following files and a subfolder css
- /templates/cocoate/index.php
- /templates/cocoate/templateDetails.xml
<?php
defined('_JEXEC') or die;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>
<body >
<jdoc:include type="modules" name="top" style="xhtml" />
<jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
<jdoc:include type="modules" name="left" style="xhtml" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" style="xhtml" />
<jdoc:include type="modules" name="footer" style="none" />
</body>
</html>
Listing 1: index.phpThe index.php file is the “page” template, the “big picture”. Inside this file all the bits and pieces (CSS, JavaScript, Joomla content) were loaded. In our example I just loaded the Joomla content with the <jdoc:include …> command. It contains the head, the component content and the module content depending on the postion of the module (What is a module?).
templateDetails.xml
This is the most important file in a template. It is the manifest, or packing list file that includes a list of all the files or folders that are part of the template. It also includes information such as the author and copyright. Without this file, Joomla wil not find your template. The positions are the module positions that are already mentioned in the index.php file. You can create as many positions as you want. So far, there is no naming standard in Joomla.
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "https://www.joomla.org/xml/dtd/1.6/template-install.dtd"> <install version="2.5" type="template" method="upgrade"> <name>cocoate</name> <creationDate>2012-07-17</creationDate> <author>Hagen Graf</author> <authorEmail>hagen@</authorEmail> <authorUrl>http://cocoate.com</authorUrl> <copyright>Copyright (C) 2012 cocoate</copyright> <version>1.0</version> <description><![CDATA[ <p>cocoate is a template exercise from scratch.<p> ]]></description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <folder>css</folder> </files> <positions> <position>top</position> <position>breadcrumbs</position> <position>footer</position> <position>left</position> <position>right</position> <position>footer</position> </positions> </install>
Comments
Post a Comment