Template Import - Preparations

[abdulkarim]

Once you have your required template ready, you can modify/add a few things in your existing template files to make them usable in Joomla system as a Joomla template.

1. Change the name of index.html to index.php and add some relevant information at the top of the file.
2. Create and add templateDetails.xml in the same folder/directory
3. Compress the directory into a .zip file to be able to import it in Joomla

  joomla_template_6.png (Size: 82.02 KB / Downloads: 874)

[abdulkarim]

As an example I show you files behind NotJustBrowsing website.

Here is a template skeleton diagram with position names written within position space.

  joomla_template_4_0.png (Size: 23.26 KB / Downloads: 809)

The changes made in index.php (previously index.html) are shown in the following picture.

  joomla_template_4_1.png (Size: 48.88 KB / Downloads: 806)

In this picture, paths to .css files are changed to make them point to the actual folder inside Joomla system. Notice that within this path there will be template name (templates/{template name}/...) given by you to your newly created template.

< body > section of index.php remains untouched.

[abdulkarim]

Next step is to create templateDetails.xml file.

File shown in picture below is templateDetails.xml of NotJustBrowsing website.

  joomla_template_4_2.png (Size: 62.5 KB / Downloads: 786)

For each position in templateDetails.xml there should be one line of Joomla module inclusion in index.php at those content positions (within named divs). This step can be performed at a later stage when contents for those positions are ready to be included.
See picture below for module inclusion lines in index.php of NotJustBrowsing website.

  joomla_template_4_3.png (Size: 104.82 KB / Downloads: 795)

The only thing left in your preparations is to compress your directory and its files into a .zip file. This .zip will be imported from within Joomla and be used as your website template by Joomla for you.