joomla template design

Joomla Template Design

Last week, we learned the basic structure of Joomla templates, how they interact with Joomla’s backend, and how to make a very basic template. Now that you have basic template creation mastered, you will most likely want to make a full template that can actually function on a website and give you all of the flexibility in options and design that you need.

We will cover five steps of Joomla template creation: creating the templateDetails.xml file, organizing the structure of your document, creating CSS styles, adding graphics and background images, and finalizing your template for personal use or public distribution.

1. Create the templateDetails.xml file

This file is very important, and your template will not function properly without it. In templateDetails.xml, you will declare the name of your documentauthorcopyrightall of the modulesimage files, and extra css files.

Although knowledge of XML is helpful, you can learn it very quickly, even if this is your first time.  Unlike HTML, XML tags can be anything and are used to define data.  For example, the first tag in the templateDetails.xml will be <name></name>.  Here you will insert the name of your template: <name>MyTemplate</name>.  Follow the same method to enter the version, creation date, author, author URL, copyright, license, and description. Take a look at the example file to see how the first section should look.

The next part of the templateDetails.xml file is used to declare any files in the template package. This includes index.phpcss/templates.css, any image files, and even the templateDetails.xml file itself. To declare a file, use the following method:

<filename>css/template.css</filename>

and

<filename>index.php</filename>

Notice that you must use the relative path in relation to the templateDetails.xml file, so an image file, for example, will be in images/image-name.png.

The final section in the templateDetails.xml file declares module positions.  This is very important because only modules declared here will appear in your backend.  All you have to do is list the ones you want to use.  For example:

<position>right</position>

See the example document for possible module positions.  Ultimately, you can decide what positions actually exist and where they will be placed in your HTML template.

2. Organize Your Structure (index.php)

In the previous part of this series, you learned about jdoc statements and how to place them in the index.php file, which is the primary HTML template document. Creating the HTML structure is completely dependent on your needs and your aesthetic taste, but you should know how each jdoc statement will display its contents, as this will help you find an appropriate spot to place it.

  • Header: This should contain the title as an image banner or text and should link back to the Home page.
  • Top elements: Top elements include the breadcrumbs or pathway and the top menu.  Typically, these will be defined by a series of DIVs.
  • User elements: You can place one, two, three, or even four user boxes on your site.  These can theoretically contain any module, although they are typically used for “latest news“, “top articles” and other leading modules.  This might also be a good spot to place third-party modules, like a frontpage slideshow.  Typically, user modules will be page-specific.  In other words, you might place the modules on the frontpage but not on full article pages.  All of those settings are controlled in the menu settings of Joomla’s admnistrative backend.
  • Left and right modules: As the names indicate, these modules are usually placed on the left and right respectively inside of floating DIVs.  Both are optional, and depending on the size and structure of your site, you might have both, one, or neither.  Module types include the login module and syndication module.
  • Footer: This is something I usually create manually to include my own site’s copyright license information, bottom text menu, and possibly links to a sitemap and other text-only documents.

3. Create Styles

The css/template.css file will contain all of the styles for your entire site. As a result, the document can get quite long, and you should take care to organize it thoughtfully. There are two ways to approach this.

The first is to separate it into sections: structure (size, width, etc) and visuals (colors, fonts, and images). The other approach is to follow the structure of the index.php file, listing all of the styles according to their actual positions on the site.

4. Add Background Images and Graphics

All background images should be established inside your CSS file, rather than in the index.php document.  You should also declare any images you create in the templateDetails.xml file.

Because your template.css file is inside a subdirectory of the main template directory and the images directory is in another, you need to make sure to link images using the proper relative path.  For example, an image named header.jpg should be linked in a style like this:

background-image: url(../images/header.jpg);

That will tell the server to go up a directory to the main template directory and then go into the images directory.

5. Finalize Template

Once you have all of your components complete, there are a couple of steps you should take to finalize your template. The first is to upload it and test it.  Simply copy your entire template directory to the “templates” directory on your website. When you go into the Joomla backend, you should see your template listed.

If everything looks fine, take a screenshot of the template and save that screenshot to the local template folder on your computer. Resize it to about 200px wide and save it as template_thumbnail.png.

Make sure you have all of the necessary folders and extra files, most of which you can copy from a default template (see the first article of this series). Once you do, create a zip file of your entire template folder, saving it as the name of your template (i.e. MyTemplate.zip). If you decide to distribute your template, users only have to upload your zip file, and it should install correctly.

Joomla template creation can be fun and rewarding, whether you use your new templates for personal use or decide to sell them. Once you have made a few practice templates and feel comfortable making them, you should be able to truly customize Joomla to meet any needs of the websites you design.