Joomla template example. This is our first article on this CMS. Today we talk about Joomla template design for front-end developer completely unfamiliar with CMS. Joomla is one of the most popular content management system (CMS) that allows you to create websites fast and easy. Therefore, we decided not to bypass the script and make our own review. We will not make a simple overview of the system, which may seem rather boring, but we take something more interesting – the process of creating your own template. We also describe the structure of the templates in Joomla and other important things.
Basic concepts of the Joomla CMS:
Template – a set of folders / files that define the layout and design of the pages. You can have many installed templates on one website. Thus it is possible to change the design of the website in a few seconds, switching from one template to another.
HTML template has specified areas of the page (usually – div blocks), in which will be displayed certain content. For example, in the central area, the main page content is displayed. The owner / author of the site can create articles using the built-in editor WYSIWYG, which will be displayed in this area.
Also, we can define other areas in the HTML template to display different objects. Typically, these areas are: header of the document (that is always displayed at the top), the footer (what is displayed at the bottom), the area for the menu, additional areas for the sides. It all depends on the desire of the template’s author. These areas are called positions.
In the template there are other features that will be described further.
Module – an object with HTML / PHP / CSS / JavaScript code that can be displayed in certain designated areas of the page. Example of typical models: language switcher, authorization block, search on the site, voting, etc.
Plugin – an object with HTML / PHP / CSS / JavaScript code that can be embedded into the page content. The main difference from the module is the place where the plugin appears on the page. Article’s author, during working in WYSIWYG editor will be able to insert some code (similar to HTML code). On the site, this code will be replaced by a similar object module.
Component – a global object that has a lot of settings. Typically, in addition, modules and plugins come to the component. For example, a component may be a guest book, e-commerce shop, forum and so on. All these objects have a variety of settings and can be shown on a separate page.
WYSIWYG editor – online text editor (what you see is what you get). Using a simplified panel similar to the panel of Microsoft Word or WordPad, you can create articles that the editor will automatically convert into HTML code.
Modules, plugins and components are extensions. With extensions, by installing the CMS, you can make anything you want: online store, blog, forum and so on. All extensions are available in a zip archive, which you can download and install on your site through the admin panel.
The main extension directory is a directory on official Joomla website http://extensions.joomla.org/
Downloading from it you can be with some certainty that the extension does not contain any malware or adware code.
At least, I would like to believe that all of these extensions are mercilessly deleted from the catalog in a timely manner. I prefer popular and proven extension, as their developers value their reputation.
CMS itself is developed all the time, and during this time, the development passes through stages of global changes, which manifested in the fact that at the moment there are several versions of the system. This is version 1.5, version 2.5 and version 3.x (3.x means that the version 3 are compatible with each other – 3.1 3.2 and 3.3). If you have a site on Joomla 2.5 version, only extension on that version will suit your website, extension of different versions are not compatible.
You can find thousands of free and paid templates with ready designs, that you can modify to your taste, but very often, they contain a lot of unnecessary (for you) function. More professional approach is to create your own template.
A blank template is quite possible to find in the Internet, but you can create it from scratch.
A template is a folder archived in zip.
Template consists of the following files:
index.php – main file that describes the structure and design of the page
component.php – display pages in a suitable form for the printer
error.php – representation for 404 pages
favicon.ico – icon for the website
template_preview.png and template_thumbnail.png – preview pictures of the template
templateDetails.xml – description of the template.
For the convenience of structuring within the folder are also sub-folders with clear names:
css – for styles
images – for images
js – for scripts
language – for ini files with translations into different languages.
Please note that for security reasons, each folder must have an empty index.html file
You can find html folder in the template folder. This folder contains the change in appearance to any Joomla components – the so-called override.
In general, the structure of the template remains unchanged for Joomla versions 1.5, 2.5 and 3.x
Let us consider a simplified version of the templateDetails.xml
After header
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
follows the main tag:
<extension version="2.5" type="template" client="site">
Next header with the description of the template:
<name>blanktemplate</name><!-- name of your template --> <creationDate>2015-01-01</creationDate><!-- template's date --> <author>your name</author><!-- author's name --> <copyright>Copyright © 2015 website.com</copyright><!-- template's author--> <authorEmail>[email protected]</authorEmail><!-- e-mail --> <authorUrl>http://www.website.com</authorUrl><!-- your website --> <version>1.0.0</version><!-- template's version -->
Further, as a rule, is a description of the template, which can be arranged with HTML:
<description> <![CDATA[ <h1> My template </h1> <p>Created <a href="http://www.website.com" target="_blank">This is the simplest template!</a>.</p> ]]></description>
All files required for the template must be described in templateDetails.xml
<files> <folder>css</folder> <folder>images</folder> <folder>js</folder> <folder>language</folder> <filename>component.php</filename> <filename>error.php</filename> <filename>index.php</filename> <filename>index.html</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <filename>favicon.ico</filename> <filename>templateDetails.xml</filename> </files>
If you do not forget, the pages of our site will be divided into areas – positions.
Positions are usually located inside of div blocks. This is example of how positions can be located (from the site joomla.org):
These positions also need to be specified in the description of the template. You can use your own names, or you can follow the standard names:
<positions> <position>top</position> <position>footer</position> <position>debug</position> </positions>
If you have a multilingual site, you need to describe all the used languages
<languages folder="language"> <language tag="en-GB">en-GB/en-GB.tpl_blanktemplate.ini</language> <language tag="de-DE">de-DE/de-DE.tpl_blanktemplate.ini</language> </languages>
This description implies that inside the language folder, here are 2 subfolders: en-GB and de-DE which contain files with translations. These files contain the text in the form of “key = value”. Name of the key must be in capital letters.
For Example:
DEMOTEXT = "Sample Text"
Also the template can describe various switches for changing settings template which can be changed by a simple user or administrator of the site (not a programmer). On the site, switches look like the following:
For example, consider the opportunity to create some color. We will create one of the switches. To do this, add the following piece of code:
<config>
<fields name="params">
<fieldset name="basic">
<field name="templateBGColor" class="" type="color" default="#FFFFFF" label="Background color" description="This is background color theme" />
</fieldset>
</fields>
</config>
The value of this color will be displayed on the page.
Consider now the index.php file and try to make some arrangement.
In the very beginning of the file add the php code:
<?php defined( '_JEXEC' ) or die; // this string for security reasons prohibits direct access $doc = JFactory::getDocument(); // variable that stores a reference to the document $tpath = $this->baseurl.'/templates/'.$this->template; // variable with relative template address // add css style using such construction $doc->addStyleSheet($tpath.'/css/template.css.php'); // add javasript $doc->addScript($tpath."/js/custom.js"); ?>
Next, the standard header of the page:
<!doctype html> <html lang="<?php echo $this->language; ?>" class="no-js"> <head> <jdoc:include type="head" /> </head>
Here <jdoc:include type = "head" /> adds typical tags into the “header”. For example, such meta tags as description, keywords, some other pluggable files, scripts, styles, and others.
In our body tag, we add in our style value a color of our switcher, so the site administrators who are unfamiliar with css, can change the background color of the page from admin console:
<body style="background-color:<?php echo $this->params->get('templateBGColor', '#FFFFFF'); ?>">
Then we can make our template using div-s. To display the position inside a div or other element:
<div> <?php if ($this->countModules( 'footer' )) : ?> <jdoc:include type="modules" name="footer" /> <?php endif; ?> </div>
This code checks whether any of the modules to be showed at this footer position, and displays the contents of the modules. Of course, it is possible not to perform verification, and to display it anyway:
<jdoc:include type="modules" name="footer" />
To show a different position you need to replace the footer with the name of another position.
To display the main content of the page we use the following tags
<jdoc:include type="message" /> <jdoc:include type="component" />
We need to put them in the correct div.
As for examples, if you haven’t forgotten, we previously created 2 folders en-GB and de-DE with language files. This text we have marked with a code word DEMOTEXT. We may display this text using the following php code:
<?php echo JText::_( 'DEMOTEXT' ) ?>
Moreover, this text can be inserted into values as a parameter (eg title or alt) and as the content of paragraphs, and even in the url links.
Pictures in the template are usually in the directory images. In order to display the image, use the next php code that displays the path to the folder that contains our template
<?php echo $tpath; ?>
Variable $tpath we already declared at the beginning of the page, and we know in which template directory the picture is placed.
An example of the picture logo output:
<img src="<?php echo $tpath; ?>/images/logo.png" alt="Logo" onclick="doSomething()">
Here, onclick = "doSomething()" runs the function from the file custom.js which we connected as an external script file.
The complete code of our basic template
<?php defined( '_JEXEC' ) or die; // this string for security reasons prohibits direct access
$doc = JFactory::getDocument(); // variable that stores a reference to the document
$tpath = $this->baseurl.'/templates/'.$this->template; // variable with relative template address
// add css
$doc->addStyleSheet($tpath.'/css/template.css.php');
// add javasript
$doc->addScript($tpath."/js/custom.js");
?>
<!doctype html>
<html lang="<?php echo $this->language; ?>" class="no-js">
<head>
<jdoc:include type="head" />
</head>
<body style="background-color:<?php echo $this->params->get('templateBGColor', '#FFFFFF'); ?>">
<p><?php echo JText::_( 'DEMOTEXT' ) ?></p>
<header class="header">
<img src="<?php echo $tpath; ?>/images/logo.png" alt="Logo" onclick="doSomething()">
<nav class="navtop" role="navigation">
<?php if ($this->countModules( 'top' )) : ?>
<div class="top">
<jdoc:include type="modules" name="top" />
</div>
<?php endif; ?>
</nav>
</header>
<main class="content">
<jdoc:include type="message" />
<jdoc:include type="component" />
</main>
<footer class="footer">
<?php if ($this->countModules( 'footer' )) : ?>
<jdoc:include type="modules" name="footer" />
<?php endif; ?>
</footer>
<jdoc:include type="modules" name="debug" />
</body>
</html>
[sociallocker]
download in package
[/sociallocker]
This is not a problem to make a beautiful design for coders, without speaking about front-end developers.
Website template, in fact, is a representation of the pattern MVC (model-view-controller). That is the part that is responsible for the output of information and design. Most modules and components follow the same principle.
If you want to change the appearance of a module, you can take its view and modify the HTML code to fit your needs.
Often, the module’s code is updated. Vendors can remove some errors. If you want that after each module update does not change the appearance of view, you can create an override. This is the file or files that are located in the template will determine the appearance of the module.
This can be done in the administration panel:
Extensions – Template manager – Templates – click on our template (get into the online editor of our template) and go to the tab Create Overrides
After you created the override, we can see that in the html folder will be added the files, or even folders. You can put html folder with these files directly to our zip -template and install on your site the ready template with already modified the appearances of the modules.
Try to create a template for the site and in case of success, you can easily modify views, and after that you can create your own different modules or plugins!
