You are on page 1of 6


Web Hosting Line

Joomla 1.5 Tutorial: Create Basic …
Home Login Support Blog About Us Contact Us








Joomla Hosting Joomla Tutorial Joomla Templates Joomla FAQ Joomla Extensions About Joomla

Create a simple Joomla 1.5 template
This tutorial will show you how to create a simple Joomla 1.5 template. You can get ideas how to create your new Joomla template from our Free Joomla templates gallery. How to create a basic Joomla 1.5 template?

Joomla Tutorial: Joomla 1.5 Tutorial Joomla 1.5 installation Joomla 1.5 manual installation Create website with Joomla 1.5 Create Joomla articles Contact us page Create links Joomla poll Joomla 1.5 advanced Joomla SEF URL's Joomla counter Customize Joomla layout Joomla templates Create Joomla template Joomla drop-down menu Joomla extension types Install Joomla Extensions Common Joomla 1.5 issues Joomla Security Optimize Joomla Joomla 1.5 Backup Upgrade to latest stable Joomla 1.5 version Joomla 1.0-1.5 upgrade Joomla 1.0 tutorial Other Tutorials

First, open the "templates" directory in your Joomla installation. Then create a subfolder in it named "tutorial_template". All the files of your template will reside in it. Inside your new directory, create a file called index.php, and another named templateDetails.xml. Then create a folder named css and in it - a new file name template.css. In order to create these files, you can use a simple Notepad and store the files on your computer, and upload them later via FTP or the File Manager of your cPanel. Those are the basic files that each Joomla template needs to function properly. O index.php - Specifies the available module positions and the path to your Stylesheet file. This is the main "section" of your template; templateDetails.xml - This is a system file that provides information about your template to the Joomla application; css/template.css - The stylesheet file of your template. It defines the looks of your website; Once you have done that, change the default template for your website to the newly created one. For more information how to do this, check our tutorial on Changing the default template of Joomla 1.5. Now, let's take a detailed look on what each file should contain: The index.php file should start with: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns="" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> </head> Those lines specify the beginning of the HTML output of your website. This PHP code <jdoc:include type="head" /> will include in your page the Joomla header content (the page title, meta description, keywords, etc.) that you have added in the administrative end of your application. Next, we have to add the "body" part of your website:

Joomla Host
The best Joomla hosting FREE Joomla installation FREE Joomla templates Free Domain name Unlimited space Unlimited Traffic/mo


<jdoc:include type="component" /> </body>…/joomla_create_…


org/1999/xhtml" xml:lang="<?php echo $this->language.php file and login to the Administrative end of your Joomla right and footer positions to your template.css file once we create it. make the new "tutorial_template" template default for your website. From it. ?>" lang="<?php echo $this->language. Edit your index.0 Transitional//EN" "http://www. Now.w3. In addition. it is time to check our template. however. ?>" > <head> <jdoc:include type="head" /> </head> <body> <div id="container"> <div id="header"><jdoc:include type="modules" name="top" />…/joomla_create_… 2/6 . Note that we have surrounded those in <div> tags and added information about their classes and ID's. Save the index.5. your index. left. Your page should look like this one depending on the content you have: This page includes only your articles without any styling or modules displayed. At this point.6/9/2009 Immediate activation Joomla 1. We have just added the top.5 Tutorial: Create Basic … </html> The <jdoc:include type="component" /> line will display the main content of any given page. let's add some module positions. For more information on how to do that you can refer to our tutorial on how to change the default template of Joomla 1.php should look like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.w3. learn more sign up now Now.php file and change the lines between <body> and </body> to: <div id="container"> <div id="header"> <jdoc:include type="modules" name="top" /> </div> <div id="sidebar_left" class="float"> <jdoc:include type="modules" name="left" /> </div> <div id="content" class="float"> <jdoc:include type="component" /></div> <div id="sidebar_right"class="float"> <jdoc:include type="modules" name="right" /> </div> <div id="footer" class="clear"> <jdoc:include type="modules" name="footer" /> </div> </div> The <jdoc:include type="modules" name="left" /> line tells the Joomla application where to insert the modules published in the "left" position. The div classes will be defined in the template.dtd"> <html xmlns="http://www. we have wrapped everything in a div with ID "container" which allows us to set the basic dimensions of your page.

<copyright>SiteGround</copyright> .This line specifies the type of license your template is published under. <authorEmail></authorEmail> <authorUrl>http://www.This line displays the creation date of your template.Here you can add additional information for your template. <name>tutorial_template</name> .6/9/2009 Joomla 1.xml</authorUrl> <copyright>SiteGround</copyright> <license>SG TOS</license> <version>1.dtd"> <install version="1. we are using "tutorial_template".You should add the copyright information for your template in this line.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0.5" type="template"> <name>tutorial_template</name> <creationDate>02/2008</creationDate> <author>SiteGround</author> <authorEmail></authorUrl> .Add your e-mail in this line. <author>SiteGround</author> .5 Tutorial: Create Basic … </div> <div id="sidebar_left" class="float"><jdoc:include type="modules" name="left" /></div> <div id="content" class="float"><jdoc:include type="component" /></div> <div id="sidebar_right"class="float"><jdoc:include type="modules" name="right" /></div> <div id="footer" class="clear"><jdoc:include type="modules" name="footer" /></div> </div> </body> </html> Now we have to edit the templateDetails. In it.0</version> .This line defines the version of your template.xml file: <install version="1.joomla. siteground.siteground.css</filename> </files> <positions> <position>left</position> <position>right</position> <position>top</position> <position>footer</position> </positions> </install> Let's take a more detailed look on the lines of the</authorEmail> . For the purpose of this tutorial.0</version> <description>Basic Joomla Template</description> <files> <filename>index.This line defines the author of the template. <authorUrl>http://www. It will allow the Joomla template installer to correctly install your template if you decide to make an archive of the template and use it on a different Joomla instance.xml</filename> <filename>css/template.This line specifies the website of the template creator. <version>1.Those lines specify all the files that your template uses.siteurl. <creationDate>02/2008</creationDate> .php</filename> <filename>templateDetails.0//EN" "http://dev.php</filename> <filename>templateDetails.xml</filename> <filename>css/template.This line shows the Joomla version which your template is designed for.5" type="template"> . <files> <filename>index.5/template-install.css</filename> </files> . <description>Basic Joomla Template</description> . <license>SG TOS</license> .This line defines the name of your paste the following lines: <?xml version="…/joomla_create_… 3/6 .

padding: 0. { text-align: center.css file and add the following lines to it: ? * { padding: 0. margin: auto. } body { font-family: Arial. margin: 0px auto 0 auto.6/9/2009 Joomla 1. a:visited { text-decoration: underline. line-height: 1. font-weight: normal. border: 1px solid #e2e2e2. background-color: #f4f9fc. margin: 0.overall { background-color: #fff. text-align: left. width: 950px.3em.php file and add the following line just before the </head> tag: <link rel="stylesheet" href="<?php echo $this->baseurl >/templates/tutorial_template/css/template. color: #000. } #header { text-align: center. background: #FFFFFF. Now. margin: 0.css" type="text/css" /> This line will tell your website where to load its stylesheet file from.5 Tutorial: Create Basic … <positions> <position>left</position> <position>right</position> <position>top</position> <position>footer</position> </positions> . sans-serif.Those lines define the positions you have enabled in your template. } img { border: 0. text-align: left. } . } . } #container { width:960px. font-size: 13px.…/joomla_create_… 4/6 . } #content { width: 598px. height: 80px. } . outline: none. open the index. } div.float { float: left.clear { clear: both. padding: 0. Helvetica. siteground. you should edit the css/template. The next step is to add some styling to the template. text-align: left. } a:link. color: #0F0F0F. background-color:#f4f9fc.

Mambo hosting . osCommerce hosting . All rights reserved C opy right © 2009 SiteGround. border-right: 1px solid #e2e2e2. Web hosting FAQ . text-align:center. You will need some basic skills in working with CSS in order to make changes in the outlook of your Joomla site. add images for backgrounds and much more. phpBB hosting . play with the css file. Joomla hosting . W eb hosting guide . } #sidebar_left { text-align: center. siteground. Good luck! (c) Copyright 2008 SiteGround Web Hosting Provider. padding: 5px. Magento hosting . border-top: 1px solid #e2e2e2. width: 165px. phpNuk e hosting . } #sidebar_right { background-color:#f4f9fc. Joomla's template structure gives you the freedom to create the website you have always wanted. at this point your website should look like this : From now on it is up to your imagination to create the design of your website as you want it. } Those lines will add some clean basic design to the different parts of your website. Hosting tutorials . text-align: center. Reseller hosting . border-bottom: 1px solid #e2e2e2. eC ommerce hosting . Video Tutorials .com Inc :: Terms of use . Website tutorials . padding: 5px. Your template is now complete.5 templates . Priv acy :: A ll-inclusiv e website hosting serv ices by the best web hosting prov ider :: Blog :: Affiliates :: Link s :: Sitemap Template galleries: Joomla templates . osC ommerce templates . Joomla…/joomla_create_… 5/6 . border-botom: 1px solid #e2e2e2. SiteGround Rev iews .6/9/2009 Joomla 1. WordPress themes . You can add different module positions. Legal . } #footer { background-color:#f4f9fc. width: 165px.5 Tutorial: Create Basic … padding: 5px. padding: 5px. border-left: 1px solid #e2e2e2. background-color:#f4f9fc. border-bottom: 1px solid #e2e2e2. W eb hosting forum SiteGround serv ices: Hosting .

ImpressC MS hosting .6/9/2009 Joomla 1. Drupal hosting . W ordPress hosting . C heap hosting . Mac hosting . Mediawik i hosting . PHP hosting . VPS hosting . phpBB hosting . Magento hosting . W ik i hosting . osCommerce hosting . cPanel hosting .5 Tutorial: Create Basic … SiteGround serv ices: Hosting . Dedicated Serv ers siteground. FTP hosting . MiaC MS hosting . Reseller hosting . phpNuk e hosting .com/…/joomla_create_… 6/6 . Mambo hosting . Joomla hosting . eC ommerce hosting .