The purpose of this tutorial is to serve as an introduction to creating Joomla! templates. It will cover the essential files and code needed to create a basic template. The code is presented so it can be cut and pasted with very little modification needed.
Setting up a directory structure
To make the most basic template, create a new folder in the "templates" folder. Name this folder after your template i.e. "mynewtemplate".
Using a text editor (or dedicated editor such as Adobe Dreamweaver) create the files "index.php" and "templateDetails.xml"
To keep things organized, make 2 new folders called "images" and "css". Inside the "css" folder create a file called "style.css".
Although it is fine to place all your CSS code directly in your "index.php" file to start, many web developers prefer to place their CSS code in a separate file that can be linked from multiple pages using the "link" tag.
This is the most basic practical setup.
Outline of folder and file structure:
mynewtemplate/
css/
style.css
images/
index.php
component.php
templateDetails.xml
This article is a small, well-defined item that could be completed by someone with a reasonable knowledge of the subject matter and a modest time commitment.
If you would like to try writing this article you're welcome to do so. The subject may be self-evident, but if not then further details should be available on the discussion page. Please add {{inuse}} at the top of this page while editing. For other small, well-defined tasks, please look in the Cookie jar.
Tutorial:Creating a basic Joomla! template
From Joomla! Documentation
Contents
[hide]Introduction
The purpose of this tutorial is to serve as an introduction to creating Joomla! templates. It will cover the essential files and code needed to create a basic template. The code is presented so it can be cut and pasted with very little modification needed.
Setting up a directory structure
To make the most basic template, create a new folder in the "templates" folder. Name this folder after your template i.e. "mynewtemplate".
Using a text editor (or dedicated editor such as Adobe Dreamweaver) create the files "index.php" and "templateDetails.xml"
To keep things organized, make 2 new folders called "images" and "css". Inside the "css" folder create a file called "style.css".
Although it is fine to place all your CSS code directly in your "index.php" file to start, many web developers prefer to place their CSS code in a separate file that can be linked from multiple pages using the "link" tag.
This is the most basic practical setup.
Outline of folder and file structure:
If you would like to try writing this article you're welcome to do so. The subject may be self-evident, but if not then further details should be available on the discussion page. Please add {{inuse}} at the top of this page while editing. For other small, well-defined tasks, please look in the Cookie jar.
from: http://docs.joomla.org/Tutorial