Create a New Template Using Atomic

The Atomic template is a skeleton for your own template. It consists of:

  • /htdocs/templates/atomic
    component.php - the print view template
    error.php - the error page template
    favicon.ico - the website icon (Favicon)
    index.html - a security file displaying a blank page when the directory is entered directly (also has to be configured by the webserver but usually is)
    index.php - the template main page
    templateDetails.xml - The configuration file containing all information about files, options and positions is necessary to show the template in the template manager and to later create an installable zip package.
    template_preview.png - the template preview image, displayed in template manager
    template_thumbnail.png - the template thumbnail image, displayed in template manager
  • /htdocs/templates/atomic/css
    the folder for CSS files
  • /htdocs/templates/atomic/html
    the folder for Override files - Atomic provides a few Overrides for modules.
  • /htdocs/templates/atomic/images
    the folder for images
  • /htdocs/templates/atomic/js
    the folder for Java script files
  • /htdocs/templates/atomic/languages
    the folder for language files - Atomic comes with English base language files.

Main template file index.php

The file name of this layout file has to be index.php since Joomla! searches for embedded <jdoc> and PHP commands. All necessary HTML markup is already built-in and commented. You can change the content of the file according to your needs.

To get an idea, let's do a quick walkthrough:

In line 24 you can choose whether you want to use the blueprint CSS framework or not.

In line 50, 55, 61 and more you see that the template provides positions with special names (atomic-search, atomic-topmenu, ...). If you want to use these names you have to assign your modules to these positions. If you want to change the names, you may do that in the templatedetails.xml file.

In line 42 you will see:

echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js

Joomla! knows the values in baseurl as well as the name of your template and you can access them when needed.

In line 46 you will see:

echo $app->getCfg('sitename');

It will tell you the name of your site.

In line 48 you will see:

if($this->countModules('atomic-search')) ...

It counts the amount of modules at the position atomic-search. It is used to adjust your layout to different situations.

In line 50 you will see:

<jdoc:include type="modules" name="atomic-search" style="none" />

This is a <jdoc> command, which only exists as a name space in Joomla!. It is used to insert the HTML output of the given type into the attributes. In this case it means the output of all modules assigned to the template position atomic search. The style attribute is called module chrome and can have these values

  • table - The output is displayed in a table.
  • horz - The output is displayed horizontally in a cell of a surrounding table.
  • xhtml - The output is in in an XHTML-compliant <div> element.
  • rounded - The output is in a format in which round corners can be displayed. The class of the element is renamed from moduletable to module.
  • none - no formatting
  • outline - the display type for the position preview (?tp=1)
  • Template specific style - Some templates, like Beez, have their own styles. See chapter The Beez Template.

You will find a complete list of styles in the Joomla! documentation - What is module chrome.

Other <jdoc> types are:

<jdoc:include type="head" />
<jdoc:include type="message" />
<jdoc:include type="component" style="none" />

Every page needs a head, sometimes a message (after saving) and, of course, a component. One component can be displayed per page. The component can make use of the module chrome as well.

The error and the print view template files work exactly like the main template file.

CSS Folder

You will find three files in this folder.

  1. The css/template.css file with predefined commented CSS commands. If you don't use the blueprint framework, you have to uncomment a few of them. The lines are specifically marked.
  2. The file css/template_ie.css is empty. Here you can add style overrides for Internet Explorer.
  3. The file css/template_rtl.css is empty as well. You can add style overrides for right to left languages.

Blueprint framework

Blueprint is a CSS framework designed to reduce development time and ensure cross-browser compatibility.

A few sentences taken from the readme file:

Welcome to Blueprint! This is a CSS framework designed to cut down on your CSS development time. It gives you a solid foundation to build your own CSS commands. Here are some of the out-of-the-box features BP provides:
* An easily customizable grid
* Sensible default typography
* A typographic baseline
* Perfected browser CSS reset
* A stylesheet for printing
* Powerful scripts for customization
* Absolutely no bloat!

You will find demos and tutorials on the project website - http://www.blueprintcss.org/.