Your folder structure should be as below.
"mytemplate" folder will contain all the files and folders that are used to develop web template.
"css" folder contains all the stylesheets related to the template.
"images" folder contains all the images that are used in the template.
First put your style sheets into css folder and put your all images into images folder. Rename your main stylesheet as "template.css"
Put your index.html file into "mytemplate" folder and rename it as index.php as shown in figure 1.1.
At the top of the index.php file, insert the following code segment and remove your <!DOCTYPE> and <html> tag. Joomla template begins with following code segment.
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
Then remove your HTML head part. That is from <head> to </head>. And insert the following code.
<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/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>
After this the body part of the page comes.
<body>
<div id="background">
<div id="Background"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/Background.png"></div>
<div id="Layer1"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/Layer1.png"></div>
<div id="Layernew2"><jdoc:include type="component" /></div>
<div id="Layer4"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/Layer4.png"></div>
</div>
</body>
And finally end the code with " </html>" tag.
Now we have created our index.php file.
Now the remaining part is essential for making the template. We must create templateDetails.xml file. Without this file, joomla will not recognize our template. Let's do it.
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
<name>mytemplate</name>
<creationDate>2013-10-14</creationDate>
<author>Ishara Maddumage</author>
<authorEmail>miprabuddini@gmail.com</authorEmail>
<authorUrl>http://pisharamaddumage.wordpress.com</authorUrl>
<copyright>Ishara Maddumage 2013</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>My Joomla Template</description>
<files>
<folder>css</folder>
<folder>images</folder>
<filename>index.php</filename>
<filename>templateDetails.xml</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>
Here remember to insert all the files and folders that you use for the template within <files></files>.
within <folder> </folder> you can define entire folder. With <filename> </filename> you can define each file.
Don't worry about the positions we used here. Because those are the module positions that are used in default joomla template. We can use those positions in our body section according to our requirements.
Now we have completed with the template.
Finally put your "mytemplate" folder into your joomla->templates folder. Login into the admin panel and go to Extensions->Extension Manager and click on Discover to find your template. Then select your template and click on install to install it. Now your template should show in Template Manager. You can go to Extensions->Template Manager and make your template default.
That's all and now you will see your joomla template.
figure 1.1
"mytemplate" folder will contain all the files and folders that are used to develop web template.
"css" folder contains all the stylesheets related to the template.
"images" folder contains all the images that are used in the template.
First put your style sheets into css folder and put your all images into images folder. Rename your main stylesheet as "template.css"
Put your index.html file into "mytemplate" folder and rename it as index.php as shown in figure 1.1.
At the top of the index.php file, insert the following code segment and remove your <!DOCTYPE> and <html> tag. Joomla template begins with following code segment.
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
Then remove your HTML head part. That is from <head> to </head>. And insert the following code.
<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/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>
After this the body part of the page comes.
<body>
<div id="background">
<div id="Background"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/Background.png"></div>
<div id="Layer1"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/Layer1.png"></div>
<div id="Layernew2"><jdoc:include type="component" /></div>
<div id="Layer4"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/Layer4.png"></div>
</div>
</body>
And finally end the code with " </html>" tag.
Now we have created our index.php file.
Now the remaining part is essential for making the template. We must create templateDetails.xml file. Without this file, joomla will not recognize our template. Let's do it.
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
<name>mytemplate</name>
<creationDate>2013-10-14</creationDate>
<author>Ishara Maddumage</author>
<authorEmail>miprabuddini@gmail.com</authorEmail>
<authorUrl>http://pisharamaddumage.wordpress.com</authorUrl>
<copyright>Ishara Maddumage 2013</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>My Joomla Template</description>
<files>
<folder>css</folder>
<folder>images</folder>
<filename>index.php</filename>
<filename>templateDetails.xml</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>
Here remember to insert all the files and folders that you use for the template within <files></files>.
within <folder> </folder> you can define entire folder. With <filename> </filename> you can define each file.
Don't worry about the positions we used here. Because those are the module positions that are used in default joomla template. We can use those positions in our body section according to our requirements.
Now we have completed with the template.
Finally put your "mytemplate" folder into your joomla->templates folder. Login into the admin panel and go to Extensions->Extension Manager and click on Discover to find your template. Then select your template and click on install to install it. Now your template should show in Template Manager. You can go to Extensions->Template Manager and make your template default.
That's all and now you will see your joomla template.
No comments:
Post a Comment