Skip to main content

Joomla Designs

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
Each template has it’s own folder. In Joomla 2.5 you’ll find two preinstalled non responsive templates (Beez 2 and 5) and one template framework (Atomic)
  • /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.
The administrator folder looks the same
  • /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
  1. start from scratch with creating a folder and all the necessary files
  2. install a starter theme and modify it
  3. copy an existing template and modify it
In this chapter we want to try option one. We’ll create a responsive frontend template based on the Twitter Bootstrap framework for Joomla 2.5 from scratch. I’ll keep it as simple as possibible. The aim of this chapter is to understand Joomla’s template structure. It’s quite easy to make it more and more pretty and complicate afterwards :)

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
index.php
<?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.php
The 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

Popular posts from this blog

Joomla Is Best For E-commerce websites

Joomla best  CMS of choice Joomla is the middle ground between WordPress and Drupal. It isn’t as complex as Drupal but it has the awesome ability to manage complex functionalities for an eCommerce website, besides offering must-have features for a website out-of-the-box. Here are the five solid reasons why you should choose Joomla for your e-Commerce website. Enhanced Security Joomla has built-in secure layers that make your eCommerce website invulnerable to security threats. Starting from the CSRF protection to preventing other known vulnerabilities, Joomla excels. Apart from this you also have extensions that help you boost website security. These extensions allow you to add an additional security barrier in the form of captchas, protection from SQL injections, XSS attacks and more. Since e-Commerce websites deal with sensitive customer information day in and day out, these features come in handy to ensure safe transactions on your website. Fabulous built-in feature...
Post a Comment
Read more

Joomla what is it

Joomla! is a free and open-source content management system (CMS) for publishing web content. Over the years Joomla! has won several awards. It is built on a model–view–controller web application framework that can be used independently of the CMS that allows you to build powerful online applications. Joomla! is one of the most popular website softwares, thanks to its global community of developers and volunteers, who make sure the platform is user friendly, extendable, multilingual, accessible, responsive, search engine optimized and so much more. What’s a content management system  The definition of a CMS is an application (web-based), that provides capabilities for multiple users with different permission levels to manage (all or a section of) content, data or information of a website project, or intranet application. Managing content refers to creating, editing, archiving, publishing, collaborating on, reporting, distributing website content, data and information. Jo...
Post a Comment
Read more

Joomla Services

Running a Joomla! website and balancing the day to day tasks of running a business can really challenging for business owners.  At the Joomla marketplace website we understand business owners don’t have the time, skills or knowledge to build websites this is why the marketplace is the ideal solution as it acts as one stop shop to hire the best Joomla experts to help you build a stunning website. To find out more visit the Joomla marketplace website today to hire a professional designer or developer to build your dream website https://www.joomlamarketplace.online/ Joomla services provided by the best Joomla designers and developers on the internet which you can trust to help you create an amazing website for your business. The Joomla services marketplace also offers a wide range of other services including Custom Joomla templates, website updates, website security and website speed optimization and so much more at really great value for money.
Post a Comment
Read more