<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

How to make your own Joomla template

Published on
21,913 Points
14,413 Views
10 Endorsements
Last Modified:
Approved
Community Pick
Here is a tutorial for making your own Joomla templates. Note before reading, you should have some existing knowledge of web development using HTML and CSS.

1. Design Layout

Design your template in a graphics program like Adobe PhotoShop or Corel Draw for example (use whichever is your preference).

2. Isolate Images

Save important design pictures (header, background, footer, menu, etc.) in some folder (for example: "images").

3. Create Directory for your new Joomla Template

Open Joomla templates directory and make a new folder ("mytemplate") in it.

4. Create File/Folder Structure for your new Joomla Template

In "mytemplate" folder create some new files: "index.php", "template_thumbnail.png" and "templateDetails.xml".
Then, make another two folders, "images" and "css". In images folder, paste your pictures from step 2, and in css, create a new "style.css" file.

5. The Joomla Template Details XML

Now, open templateDetails.xml file with any code editor like NotePad++ or DreamWeaver for example (as with graphic design, it doesn't matter which one you choose as that is your preference).
Then, write this code, changing the information between the tags appropriately (e.g., "TEMPLATE NAME") and then save the file.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
 "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
  <name>TEMPLATE NAME</name>
  <creationDate>07/01/2010</creationDate>
  <author>YOUR NAME</author>
  <authorEmail>YOUR E-MAIL</authorEmail>
  <authorUrl>YOUR WEBSITE</authorUrl>
  <copyright>&nbsp;</copyright>
  <license>gnu/gpl</license>
  <version>1.0.0</version>
  <description>No description</description>
  <files>
    <filename>index.php</filename>
    <filename>templateDetails.xml</filename>
    <filename>template_thumbnail.png</filename>
    <filename>css/style.css</filename>                
  </files>
  <positions>
    <position>left-column</position>
    <position>main-column</position>
    <position>right-column</position>
  </positions>
</install>

Open in new window


6. The Joomla Template Index Page

Open index.php using your text/code editor and add HTML code like the following example for your template, then save it!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
  <link rel="stylesheet" type="text/css" href="/templates/mytemplate/css/style.css" />
</head>
<body>
  <div id="header">&nbsp;</div>
  <div id="columns">
    <div id="left">
      <jdoc:include type="modules" name="left-column" />
    </div>
    <div id="main">
      <jdoc:include type="component" />
      <jdoc:include type="modules" name="main-column" />
    </div>
    <div id="right">
      <jdoc:include type="modules" name="right-column" />
    </div>
  </div>
  <div id="footer">&nbsp;</div>
</body>
</head>

Open in new window


Note: <jdoc:include type="modules" name="main-column" /> means that there is the "main-column" module position that you will find in Joomla administration panel. The name of the module position must be the same in the "templateDetails.xml" and "index.php" files (e.g. main-column).

7. The Joomla Template StyleSheet

Open the style.css file and add some CSS code for your template. I will not put examples for this, but as stated earlier you should already know some CSS and so you can write some simple test styles yourself here.

8. Activate Your Template!


Open your Joomla administrator panel and go to the template manager. You will see your own template's name which you can now set to the default and try it out!


I hope this will help you to make your websites better.
10
Comment
Author:V4nP3rs13
0 Comments

Featured Post

Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Join & Write a Comment

A query can call a function, and a function can call Excel, even though we are in Access. This is Part 2, and steps you through the VBA that "wraps" Excel functionality so we can use its worksheet functions in Access. The declaration statement de…
Learn how to collaborate with office 365 Office Online

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month