How to Create a Basic Template

September 25, 2006 | by Cory

You've installed Joomla!, installed all of the components, modules, and mambots you need, and you've created your content and menus. Now you want to create a custom look for your Joomla! site, but you don't know how to create a template. This article will step through the creation of a very basic template in Joomla! Hopefully, by the end of this article, you will have a basic understanding of what goes into a Joomla! template. (Note: This information only applies to Joomla! 1.0.X. It does not apply to version 1.5.)

Template File Structure

A basic Joomla! template will have the following file structure:

  • /templatename
    • /css
      • /template_css.css
      • /index.html (blank file)
    • /images
      • /index.html (blank file)
      • /... (all of your template images)
    • /index.php
    • /templateDetails.xml
    • /template_thumbnail.png

/templatename

Your template will reside in a folder with the same name as your template.

/css

The CSS folder contains your template CSS file, "template_css.css", and any other CSS file you feel is necessary for your template.

/images

The images folder should contain all (if any) of your template images. The images could be stored anywhere, but storing them in the images folder keeps a consistent structure for your template.

/index.php

The index is the file that Joomla! looks for when rendering your template. I will discuss this in more detail later.

/templateDetails.xml

The templateDetails xml file contains details about your template, which Joomla! uses to install your template from your installation ZIP file. I will discuss this in more detail later.

/index.html - blank files

The blank "index.html" files are there to prevent direct access to the default Apache index page.