Primal Habits
It is currently Sun Mar 26, 2017 12:47 pm


Feed

Post new topic Reply to topic  [ 1 post ] 
Author Message
PostPosted: Tue Jun 29, 2010 12:44 pm 
Offline
User avatar

Joined: Sun Apr 25, 2010 1:02 pm
Posts: 115



How to create a simple Joomla 1.5 template?

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:

Code:
Please Login or Register, to see this Content


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:

Code:
Please Login or Register, to see this Content


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 your website.


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

Code:
Please Login or Register, to see this Content


The <jdoc:include type="modules" name="left" /> line tells the Joomla application where to 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 <div> tags and added information about their classes and ID's. In addition, we have wrapped everything in a div with ID "container" which allows us to 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:

Code:
Please Login or Register, to see this Content


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

Code:
Please Login or Register, to see this Content


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 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:

Code:
Please Login or Register, to see this Content


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:

Code:
Please Login or Register, to see this Content


The <jdoc:include type="component" /> 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 your website. 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 content you have:

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

Code:
Please Login or Register, to see this Content


The <jdoc:include type="modules" name="left" /> line tells the Joomla application where to 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 <div> tags and added information about their classes and ID's. In addition, we have wrapped everything in a div with ID "container" which allows us to 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:

Code:
Please Login or Register, to see this Content


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

Code:
Please Login or Register, to see this Content


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

<install version="1.5" type="template"> - This line shows the Joomla version which your 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 different Joomla instance.

<name>tutorial_template</name> - This line defines the name of your template. For the purpose of this tutorial, we are using "tutorial_template";
<creationDate>02/2008</creationDate> - This line displays the creation date of your template;
<author>SiteGround</author> - This line defines the author of the template;
<authorEmail>user@yourdomain.com</authorEmail> - Add your e-mail in this line;
<authorUrl>http://www.siteground.com</authorUrl> - This line specifies the website of the template creator;
<copyright>SiteGround</copyright> - You should add the copyright information for your template in this line;
<license>SG TOS</license> - This line specifies the type of license your template is published under;
<version>1.0.0</version> - This line defines the version of your template;
<description>Basic Joomla Template</description> - Here you can add additional information for your template;
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files> - Those lines specify all the files that your template uses.
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
</positions> - Those lines 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 </head> tag:

Code:
Please Login or Register, to see this Content


This line will tell your website where to load its stylesheet file from.

Now, you should edit the css/template.css file and add the following lines to it:

Code:
Please Login or Register, to see this Content


Those lines will add some clean basic design to the different parts of your website. You will need some basic skills in working with CSS in order to make changes in the outlook of your Joomla site.

Your template is now complete.

From now on it is up to you 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 much more.

Enjoy...!!!

_________________
Check Out RouterHead8080 T.V.



Share on FacebookShare on TwitterShare on TuentiShare on SonicoShare on FriendFeedShare on OrkutShare on DiggShare on MySpaceShare on DeliciousShare on Technorati
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC - 7 hours [ DST ]


Related topics
 Topics   Author   Replies   Views   Last post 
There are no new unread posts for this topic. 1.5 to 1.6 Joomla Template Up Grade.

RouterHead8080

0

2135

Sat Mar 19, 2011 7:22 am

RouterHead8080 View the latest post

There are no new unread posts for this topic. vShare: How to set black template as default template /style

RouterHead8080

0

2675

Tue Jan 17, 2012 12:05 pm

RouterHead8080 View the latest post

There are no new unread posts for this topic. This isn't such an simple catechism to V Belt China

AdaAlva

0

50

Tue Dec 20, 2016 1:23 am

AdaAlva View the latest post

There are no new unread posts for this topic. Get Ahead Of The Game With These Simple MS2 Tips

amazingz

0

43

Tue Jan 24, 2017 8:24 pm

amazingz View the latest post

There are no new unread posts for this topic. How to create passwords that hackers hate

ExtraExtra173A3

0

15594

Mon Nov 12, 2012 9:39 am

ExtraExtra173A3 View the latest post

 


Who is online

Users browsing this forum: No registered users and 0 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
cron

Affiliates    Terms of use    Privacy policy   

Primal Habits, a Sceptersoft Company
Copyright © 2010 - 2017 Sceptersoft LLC. All rights reserved.