How to Create a Basic Template
September 25, 2006 | by Cory| Article Index |
|---|
| How to Create a Basic Template |
| Step 1: Design |
| Step 2: HTML Markup |
| Step 3: CSS |
| Step 4: Joomlafy |
| Steps 5-9 |
| Sample Template Files |
| All Pages |
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
- /css
/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.






