<

How to make your own Joomla template

Published on
21,802 Points
14,302 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

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

Join & Write a Comment

When you have multiple client accounts to manage, it often feels like there aren’t enough hours in the day. With too many applications to juggle, you can’t focus on your clients, much less your growing to-do list. But that doesn’t have to be the cas…
This is Part-2 of Learning to use the Power of Mailwasher Pro so if you haven't watched Part-1 yet, I urge you to do so before watching this video. Click this link to watch Part-1 (https://www.experts-exchange.com/videos/56638/Learn-to-use-the-POWER…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month