Create Simple Joomla Template

7/30/2019 Create Simple Joomla Template

1/6

Joomla Hosting

Joomla Tutorial

Joomla Templates

Joomla FAQ

Joomla Extensions

About Joomla

Joomla Tutorial:

Joomla 1.5 Tutorial

Joomla 1.5 installation

Joomla 1.5 manualinstallation

Create website withJoomla 1.5

Create Joomla art icles

Contact us page

Create links

Joomla poll

Joomla 1.5 advanced

Joomla SEF URL's

Joomla counter

Customize Joomla layout

Joomla templates

Create Joomla t emplate

Joomla drop-down menu

Joomla extension types

Install Joomla Extensions

Common Joomla 1.5issues

Joomla Security

Optimize Joomla

Joomla 1.5 Backup

Upgrade to latest stableJoomla 1.5 version

Joomla 1.0-1.5 upgrade

Joomla 1.0 tutorial

Other Tutorials

Joomla Host

The best Joomla hosting

FREE Joomla installation

FREE Joomla templates

Free Domain name

Unlimited space

Unlimited Traff ic/mo

SITE SEARCH:

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?

First, open the "templates" directory in your Joomla installation. Then create a subfolder in itnamed "tutorial_template". All the files of your template will reside in it.

Inside your new directory, create a file called index.php, and another namedtemplateDetails.xml. Then create a folder named css and in it - a new file nametemplate.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 isthe main "section" of your template;

templateDetails.xml - This is a system file that provides information about your template to theJoomla 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:


2/6

learn more sign up now

Immediate activation

The line will display the main content of any given

page.

Now, it is time to check our template. Save the index.php file and login to the Administrative end

of your Joomla application. From it, make the new "tutorial_template" template default for yourwebsite. For more information on how to do that you can refer to our tutorial on how to change

the default template of Joomla 1.5. Your page should look like this one depending on the contentyou have:

This page includes only your articles without any styling or modules displayed. Now, let's addsome module positions. Edit your index.php file and change the lines between and to:

The line tells the Joomla application whereto insert the modules published in the "left" position. We have just added the top, left, right and

footer positions to your template.

Note that we have surrounded those in tags and added information about their classesand ID's. In addition, we have wrapped everything in a div with ID " container" which allows usto set the basic dimensions of your page. The div classes will be defined in the template.css file

once we create it. At this point, however, your index.php should look like this:


3/6

Now we have to edit the templateDetails.xml file. In it, paste the following lines:

tutorial_template

02/2008

SiteGround

[email protected]

http://www.siteurl.com

SiteGroundSG TOS

1.0.0

Basic Joomla Template

index.php

templateDetails.xml

css/template.css

left

right

top

footer

Let's take a more detailed look on the lines of the templateDetails.xml file:

- This l ine shows the Joomla version whichyour template is designed for. 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 differentJoomla instance.

tutorial_template - This line defines the name of your template.For the purpose of this tutorial, we are using "tutorial_template";

02/2008 - This line displays the creation date ofyour template;

SiteGround - This line defines the author of the template;

[email protected] Add your e-mail in this line;

http://www.siteground.com - This line specifies thewebsite of the template creator;

SiteGround - You should add the copyright information for

your template in this line;SG TOS - This line specifies the type of license your template ispublished under;

1.0.0 - This line defines the version of your template;

Basic Joomla Template - Here you can add additionalinformation for your template;

index.phptemplateDetails.xmlcss/template.css

- Those lines specify all the files that your template uses.

6/9/2009 Joomla 1.5 Tutorial: Create Basic

siteground.com//joomla_create_ 3/6


4/6

leftright

topfooter

- Those l ines define the positions you have enabled in your template.

The next step is to add some styling to the template. First, open the index.php file and add the

following line just before the tag:


5/6

padding: 5px;

}

#sidebar_left {

text-align: center;

background-color:#f4f9fc;

width: 165px;

border-right: 1px solid #e2e2e2;

border-bottom: 1px solid #e2e2e2;

padding: 5px;}

#sidebar_right {


text-align: center;

width: 165px;

border-left: 1px solid #e2e2e2;

border-bottom: 1px solid #e2e2e2;

padding: 5px;

}

#footer {


text-align:center;

border-top: 1px solid #e2e2e2;

border-botom: 1px solid #e2e2e2;

padding: 5px;

}

Those lines wil l add some clean basic design to the different parts of your website. You will needsome basic skills in working with CSS in order to make changes in the outlook of your Joomlasite.

Your template is now complete, 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. You

can add different module positions, play with the css file, add images for backgrounds and muchmore. Joomla's template structure gives you the freedom to create the website you have alwayswanted. Good luck!

(c) Copyright 2008 SiteGroundWeb HostingProvider. All rights reserved

Copyright 2009 SiteGround.com Inc :: Terms of use . Legal . Privacy :: All-inclusive website hosting services by the best web hosting provider :: Blog :: Affiliates :: Links :: SitemapTemplate galleries: Joomla templates . Joomla 1.5 templates . WordPress themes . osCommerce templates . Website tutorials . Hosting tutorials . Video Tutorials . Web hosting guide .

SiteGround Reviews . Web hosting FAQ . Web hosting forum

SiteGround services:Hosting . eCommerce hosting . Reseller hosting . Joomla hosting . Mambo hosting . osCommerce hosting . Magento hosting . phpBB hosting . phpNuke hosting .




6/6

i i i i ll i l i i i i i i WordPress hosting . Mediawiki hosting . Drupal hosting . Wiki hosting . cPanel hosting . Mac hosting . Cheap hosting . PHP hosting . FTP hosting . MiaCMS hosting . ImpressCMS hosting .

VPS hosting . Dedicated Servers



Documents

Create Simple Joomla Template