Step 1:
Prepare your template. The template should be (X)HTML & CSS compliant. There are lot of HTML templates on the Internet, just search them by using uncle Google. Templates in Joomla is filed under a directory named templates. Ensure the HTML file, images and CSS file are inside one single directory created under templates folder. This is a HTML file.
NOTE:Joomla will search index.php inside the template directory. So, rename the index.html file to index.php.
step 2:
Replace all the code before starting of the <body>
<?php // no direct access 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" /> <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/your_template_name/your_css_directory/your_css_file.css" type="text/css" /> </head>
NOTE:Change “your_template_name” to the name of your template, “your_css_directory” to name of your css directory, and the last,
change “your_css_file.css” to the name of your css file. If you have more than one css file, you should declare them one by one.
Step 3:
The default Joomla template has a few module positions such as breadcrumb, left, right, top, user1,user2, user3, user4, footer, debug, syndicate.
To create a module position, we need to place this code <jdoc:include type=”modules” name=”your_module_position_name” /> to apropriate position.
The name attribute is the module position name. The snippet code to create a module position is
<div id="header_r"> <div id="logo"></div> <jdoc:include type="modules" name="top" /> </div>
step 4:
create a xml 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>your_template_name</name>
<creationDate>25/01/2009</creationDate>
<author>Dani Gunawan</author>
<authorEmail>dani.gunawan@yahoo.com</authorEmail>
<authorUrl>http://tobacamp.com</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>template description goes here</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>images/arrow.png</filename>
<filename>images/logo.png</filename>
<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>
<position>debug</position>
<position>syndicate</position>
</positions>
</install>
NOTE: save this xml file as templateDetails.xml
Step 5:
create a thumbanail image as template_thumbnail.png
Step 6:
No comments:
Post a Comment