Quantcast
Channel: IT Tech Developer » Joomla
Viewing all articles
Browse latest Browse all 2

How to Create your First joomla Template

$
0
0

Share/Bookmark

AFter the installation of the Joomla into your PC, you will be able to see the joomla site into your browser. It is strongly recomended that you should use the wamp server for the joomla installation because the xamp have some issues after the installation of joomla.

Go to your root directory and the to your joomla folder, here you will see the template folder/directory just go there here you will see the diffrent templates, you can switch between them from the admin area of the site.

Now Create a new directory for your template in the template directory as i created  testtemplate. In this Directory you will create your required files and folders that will needed.

In joomla we usually need only two files. First one is xml file that contains the details of the template and the other one is index file that will show your template. these are the basic and necessary files for your joomla template. if you want to give some design that is for a good looking site just create a styles file in the same folder of your template or create a subfolder in your template folderm, As I created a subfolder for the css and images also, because i also going to add images in my template.

I create the following files and folders in my testtemplate folder

index.php (file)

templateDetails.xml (file)

images (folder)

css (folder)

in the css folder i create a file for css call it as template.css

in the images folder i place 1 image only you can place as many images as you want to include into your template.

now start the editing and open your xml file first.

< ?xml version="1.0" encoding="utf-8"?>
<extension version="1.7.2" type="template">
	<name>mytemplate</name>
	<creationdate>2011-01-28</creationdate>
	<author>Shah RUkh</author>
	<authoremail>admin@joomladeveloper.com</authoremail>
	<authorurl>http://www.tdevelopers.com</authorurl>
	<copyright>T Developers</copyright>
	<license>GNU/GPL</license>
	<version>1.0</version>
	<description>My new First Joomla Template</description>
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<folder>images</folder>
		<folder>css</folder>
               <filename>css/template.css</filename>
	</files>
	<positions>
		<position>breadcrumb</position>
		<position>left</position>
		<position>right</position>
		<position>top</position>
		<position>user1</position>
		<position>user2</position>
		<position>user3</position>
		<position>user4</position>
		<position>footer</position>
	</positions>
</extension>

The xml file just tell the system that what is the version of your joomla, and things like auther , date of creation version etc.
after these things you just tell abut the files and folders that are created in your template directory, Remember the thing any file you want to include into your index.php you should first declare it into your xml file.
After this there are positions that you can call as the the something like modules that you will include.
Now move to the index.php file


< ?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
< !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="<?php echo $this->language; ?>" lang="< ?php echo $this->language; ?>" >
   <head>
<jdoc:include type="head"></jdoc:include>
<link rel="stylesheet" href="<?php echo $this-/>baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this-/>baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this-/>baseurl ?>/templates/< ?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>
<body>
<jdoc:include type="modules" name="top"></jdoc:include>
<jdoc:include type="component"></jdoc:include>
<img src="<?php echo $this-/>baseurl; ?>/images/3.jpg" alt="Custom image" class="customImage" />
<jdoc:include type="modules" name="bottom"></jdoc:include>
</body>
</html>

its the very simple one, first line is for the restricted group of users that may harm your code so it will away them from your code.
after this the more simple thuings the syntex of every html start .
the main thing in this code is the

<jdoc:include type="head"></jdoc:include>

its the syntex that will use to include every predefind like modules in it.
the first two css files are the system css files that should b included and the 3rd on is yours that may not necessory .
so thats the end hope you learn from it .


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles



Latest Images