Here we are going to create a joomla theme named "testjoomla".Create a folder named testjoomla in /templates folder. i.e. /templates/testjoomla . The following is the file and folder structure of the theme.
Note that all folders created must have a file called "index.html" including the root folder of "testjoomla".
index.html
This file is an empty blank file and is used for the prevention of unwanted access to the folder and prevents file listing. You may also write a warning or an error message here so that hackers can know that they are entering wrong.
template_thumbnail.png
This file creates the thumbnail to be shown in the admin area when selecting the site theme.It may be of size width: 206 px and height: 150 px
error.php
This file contains the error page to be shown when a user lands a wrong page.You can redirect to home page if you want.This is done here.
<?php
// this line checks the unwanted access of files by hackers.
defined( '_JEXEC' ) or die( 'Restricted access' );
include dirname(__FILE__) . "/index.php";
?>
favicon.ico
This is the favicon to be shown in the browser address bar.It must be of size 16 X 16 px.
component.php
Provides the logic for the display of the printer friendly page, "E-mail this link to a friend." etc.
<?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; ?>" dir="<?php echo $this->direction; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" />
<?php if($this->direction == 'rtl') : ?>
<link rel="stylesheet" />
<?php endif; ?>
</head>
<body>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
params.ini
The contents of this file is optional.this contains the parameters to be taken when the theme is installed.you can specify some default parameters while the theme is active.Here is an example of the file with some parameters.Remember not to give any php open and closed tags here.
logo=logo-13.jpg
frontPageLayout=single-col
twitterUrl=http://twitter.com/The3DShow
siteName=bestprice3d.com
siteSlogan=3D for you and me
css/template.css
Handles the presentational aspects of the template including specifications for margins, fonts, headings, image borders, list formatting, etc.
/* ***************************************************************************************************** */
/* CONTENT CSS */
BODY{
}
P{
}
H1{
}
H2{
}
H3{
}
a:link, a:active, a:visited{
}
a:hover{
}
/* ***************************************************************************************************** */
/* TEMPLATE SPECIFIC CSS CODE */
/* ***************************************************************************************************** */
.article_separator{
}
.adminform{
}
.author{
}
.bannerfooter{
}
.bannergroup{
}
.bannerheader{
}
.banneritem{
}
.blog{
}
.blog_more{
}
.blogsection{
}
.breadcrumbs{
}
.button{
}
.buttonheading{
}
.clr{
clear:both
}
.componentheading, .contentheading{
}
.content_email{
}
.content_rating{
}
.content_vote{
}
.contentdecription{
}
.contentpagetitle{
}
.contentpane{
}
.contentpaneopen{
}
.contenttoc{
}
.createdate{
}
.created-date{
}
.date{
}
.input{
}
.inputbox{
}
.intro{
}
.latestnews{
}
.loclink{
}
a.mainlevel:link, a.mainlevel:active, a.mainlevel:visited{
}
a.mainlevel:hover{
}
.message{
}
.metadata{
}
.modifydate{
}
.module{
}
.moduletable{
}
.mosimage{
}
.mosimage_caption{
}
.mostread{
}
.newsfeed{
}
.outline{
}
.pagenav{
}
.pagenav_next{
}
.pagenav_prev{
}
.pagenavbar{
}
.pagenavcounter{
}
.pathway{
}
.pollstableboarder{
}
.read{
}
.search{
}
.searchintro{
}
.sections{
}
.sectiontable_footer{
}
.sectiontableentry{
}
.sectiontablefooter{
}
.sectiontableheader{
}
.small{
}.smalldark{
}
a.sublevel:link, a.sublevel:active, a.sublevel:visited{
}
a.sublevel:hover{
}
.title{
}
.wrapper{
}
css/style.css
Contains the stylesheet of the site.copy the style given by the designer to here.
body {
background-color: #D7DFE2;
margin:0px;
padding:0px;
font: 10px verdana, arial, helvetica;
color: #416271;
}
h1{
padding:5px 0 5px 0;
margin:0px;
font-size:18px;
color:#FFFFFF;
}
h2{
padding:5px 0 5px 0;
margin:0px;
font-size:18px;
color:#f7951e;
}
h3{
padding:0 0 5px 0;
margin:0px;
font-size:12px;
color:#59cef9;
}
h4{
padding:0 0 10px 0;
margin:0px;
font-size:14px;
color:#7ea743;
}
p{
text-align:justify;
padding:2px 0 2px 0;
margin:0px;
line-height:15px;
}
p.white{
color:#FFFFFF;
}
p.green{
color:#d4f0ba;
}
p.clear{
clear:both;
padding:10px 0 0 0;
}
img.left_img{
border:1px #cae6c6 solid;
float:left;
margin:0 10px 0 0 ;
}
img.box_img{
float:left;
padding:0 20px 0 0 ;
}
#main_container{
width:900px;
height:auto;
margin:auto;
background-color:#FFFFFF;
}
#header{
width:900px;
height:auto;
margin:auto;
}
#logo{
padding:15px 0 0 30px;
float:left;
}
#menu{
width:900px;
height:42px;
padding:0px;
clear:both;
background-color:#416271;
}
#menu ul{
list-style:none;padding:0 0 0 230px;margin: auto;display:block;
}
#menu ul li{
list-style:none;display:inline;float:left;width:auto;height:42px;padding:0px;line-height:42px; font-family:Arial, Helvetica, sans-serif; font-size:13px;
}
#menu ul li a{
height:42px; width: auto;float:left;text-decoration:none;padding:0 0 0 25px; margin:0px 3px 0px 3px;color:#fff;text-align:center;
}
#menu ul li a:hover{
height:42px;width: auto;text-decoration:none;color: #fff;padding:0 0 0 25px; background:url(../images/menu_arrow.gif) no-repeat left;
}
#menu ul li a.current{
height:42px;width: auto;float:left;text-decoration:none;padding:0px;color: #fff;padding:0 0 0 25px; background:url(../images/menu_arrow.gif) no-repeat left;
}
.green_box{
width:900px;
height:265px;
clear:both;
background:url(../images/green_box_bg.gif) no-repeat left #50a842;
background-position:50px 0px;
}
.clock{
float:left;
padding:0px;
}
.text_content{
width:350px;
float:left;
padding:20px 0 0 0;
}
.read_more{
width:101px;
height:29px;
float:right;
padding:10px;
background:url(../images/read_more_bg.gif) no-repeat center;
line-height:29px;
text-align:center;
}
.read_more a{
text-decoration:none;
color:#FFFFFF;
}
.read_more_link{
width: auto;
float:right;
padding:3px 25px 3px 0;
background:url(../images/orange_bullet.gif) no-repeat right;
}
.read_more_link a{
text-decoration:none;
color:#f7941d;
}
#left_nav{
width:280px;height: auto;padding:5px 0 0 0; float:left;
}
#left_nav ul{
list-style:none;margin: auto;display:block; padding:0px;
}
#left_nav ul li{
list-style:none;display:block;width:auto;height:29px;padding:0px;line-height:29px;
}
#left_nav ul li a{
height:29px;display:block; width:280px;text-decoration:none;padding:0 0 0 35px; margin:7px 0 7px 0;color:#6898ac;background:url(../images/left_nav_arrow.gif) no-repeat left; border-bottom:1px #bedf77 dashed;
background-position:0px 0px;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
#main_content{
width:auto;
height:auto;
clear:both;
}
#left_content{
width:320px;
height:auto;
margin:10px;
float:left;
padding:10px;
background:url(../images/left_content_bg.gif) repeat-x top;
}
#right_content{
width:490px;
height:auto;
margin:10px 0 0 0;
float:left;
padding:10px;
}
#right_nav{
width:263px;height: auto;padding:20px 0 0 50px; float:left;
}
#right_nav ul{
list-style:none;margin: auto;display:block; padding:0px;
}
#right_nav ul li{
list-style:none;display:block;width:auto;height:29px;padding:0px;line-height:29px;
}
#right_nav ul li a{
height:29px;display:block; width:263px;text-decoration:none;padding:0 0 0 35px; margin:7px 0 7px 0;color:#d4f0ba;background:url(../images/right_nav.gif) no-repeat center;
background-position:0px 0px;
}
#right_nav ul li a:hover{
height:29px;display:block;width:263px;text-decoration:none;color: #d4f0ba;padding:0 0 0 35px;margin:7px 0 7px 0; background:url(../images/right_nav_a.gif) no-repeat center;
background-position:0px 0px;
}
#right_nav ul li a.current{
height:29px;display:block;width:263px;text-decoration:none;padding:0px;color: #d4f0ba;padding:0 0 0 35px;margin:7px 0 7px 0;
background:url(../images/right_nav_a.gif) no-repeat center;
background-position:0px 0px;
}
.products_box{
height:110px;
padding:10px 0 5px 0;
border-bottom:1px #a7ef6e dashed;
}
.search_box{
width:267px;
height:124px;
float:left;
margin:15px 10px 10px 0;
background:url(../images/search_box_bg.gif) no-repeat center;
background-position:0px 0px;
}
.search_title{
font-size:14px;
color:#7ea743;
padding:10px 0 0 15px;
float:left;
font-weight:bold;
}
input.search_input{
width:170px;
height:20px;
background-color:#FFFFFF;
border:1px #c0c485 solid;
float:left;
margin:15px 0 0 15px;
}
input.submit{
float:left;
padding:0 0 0 10px;
}
.subsearch{
width:200px;
float:left;
color:#8b8e5d;
padding:0 0 0 15px;
}
.contact_information{
width:200px;
float:left;
padding:10px 0 0 10px;
}
.news{
width:310px;
clear:both;
padding:10px 0 10px 0;
}
.news_icon{
width:30px;
float:left;
padding:0 10px 0 0;
}
.news_content{
width:260px;
float:left;
padding:0 0 0 10px;
text-align:justify;
line-height:13px;
}
.news_content span{
color:#4ab7e8;
}
.services_box{
height:120px;
padding:10px 0 5px 0;
margin:0px 0px 10px 0;
border-bottom:1px #a7ef6e dashed;
}
.best_sol_box{
width:277px;
float:left;
}
.news_archive{
width:190px;
height: auto;
padding:10px 0 0 10px;
float:left;
}
.news_archive ul{
list-style:none;padding:10px 10px 10px 10px;margin:0px; width:190px;float:left;
}
.news_archive ul li{
list-style:none;width:180px;height: auto;padding:0px; line-height:26px;
}
.news_archive ul li a{
width: 180px;text-decoration:none;padding:0 0 0 20px; margin:6px 0px 6px 0px;color:#000;text-align:left;
background:url(../images/bullet.gif) no-repeat left; background-position:0px 0px;
}
.news_archive ul li a:hover{
width: 180px;text-decoration:underline;color: #000;
}
.contact_info_box{
width:481px;
height:116px;
margin:5px;
background:url(../images/contact_info_bg.gif) no-repeat center;
}
.contact_info_title{
font-size:14px;
color:#7ea743;
padding:10px 0 0 15px;
font-weight:bold;
}
.contact_info{
float:left;
padding:15px 10px 5px 13px;
}
.adress{
clear:both;
padding:10px 0 0 20px;
}
#contact_form{
width:310px;
height:auto;
padding:10px 0 0 60px;
}
.form_row{
float:left;
padding:4px 0 4px 0;
}
label{
width:70px;
float:left;
padding:3px 5px 0 0;
color:#59a5bf;
text-align:right;
}
input.contact_input{
width:220px;
height:18px;
float:left;
border:1px #ced6ec solid;
background-color:#dbedf3;
color: #000;
}
textarea.contact_textarea{
width:220px;
height:80px;
float:left;
border:1px #ced6ec solid;
background-color:#dbedf3;
color: #000;
}
.send a{
width:62px;
height:24px;
display:block;
background:url(../images/read_more_bg_white.gif) no-repeat center;
background-position:0px 0px;
line-height:22px;
color:#FFFFFF;
text-decoration:none;
padding-left:40px;
float:right;
margin:10px;
}
#wide_content{
width:auto;
padding:10px 20px 10px 20px;
}
#footer{
clear:both;
width: auto;
height:37px;
color: #fff;
background-color:#416271;
}
.copyright{
float:left;
padding-left:10px;
padding-top:10px;
}
.footer_links{
float:right;
padding-right:15px;
padding-top:13px;
}
.footer_links a{
text-decoration:none;
color: #fff;
padding-left:10px;
}
.footer_links a:hover{
text-decoration:underline;
color: #fff;
}
/images
this folder contains the images for the site.
/js
This folder contains the necessary javascript for the theme files.you can also keep the js for the site here.
/html
this folder is optional and does the work of extending the layouts of controllers and models.
templateDetails.xml
This file gives the necessary information for the template file.it also contains the params,filenames,templatename,authorinformation,menu postitions,etc. this file is required for installation purposes.without this file installation will not be done.and every file that is within the template folder have to be recorded here.if you do not write any file name here,then they will not be installed.here is a sample file.
<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
<name>testjoomla</name>
<version>1.0</version>
<creationDate>02-07-2010</creationDate>
<author>Subhajit Basu</author>
<authorEmail>subhajitfriend@gmail.com</authorEmail>
<authorUrl>http://www.twitter.com/subhajitfriend</authorUrl>
<copyright>Subhajit 2010</copyright>
<license>GNU/GPL</license>
<description>This is a custom build template for all testjoomla sites.</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>params.ini</filename>
<filename>images/index.html</filename>
<filename>css/index.html</filename>
<filename>css/template.css</filename>
</files>
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>bottom</position>
<position>inset</position>
<position>banner</position>
<position>header</position>
<position>footer</position>
<position>newsflash</position>
<position>legals</position>
<position>pathway</position>
<position>breadcrumb</position>
<position>latesttweets</position>
<position>home-latest-reviews</position>
<position>home-slider-hotproduct</position>
<position>home-slider-newestproduct</position>
<position>home-slider-upcomingproduct</position>
<position>home-forum-chat-post</position>
<position>sub-category-list</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>user5</position>
<position>advert_top</position>
<position>advert_side</position>
<position>debug</position>
<position>syndicate</position>
</positions>
<params>
<param name="logo" type="imagelist" default="logo-1.jpg" label="Select a Logo" description="" directory="/images/logo" filter="" exclude="" stripext="" />
<param name="frontPageLayout" type="list" default="three-col" label="Front page Layout" description="Front page Layout">
<option value="three-col">Three column Highlighted </option>
<option value="three-col-with-bg">Three column Highlighted with Background</option>
<option value="single-col">Single Post Highlighted</option>
</param>
<param name="facebookUrl" type="text" default="" label="Facebook Page URL" description="" size="60" />
<param name="twitterUrl" type="text" default="" label="Twitter URL" description="" size="60" />
<param name="siteName" type="text" default="" label="Site Name" description="" size="60" />
<param name="siteSlogan" type="text" default="" label="Site Slogan" description="" size="60" />
</params>
</install>
js/site.js
this is an optional file and contains the site javascript functions which will be used.you can however use any number of js files in the theme,just have to include them in the header,but remember that the more the number of js the more is the call so the more slow will be the site.
index.php
This is the main file as far as the templating goes.Withou this file the template cannot run.Provides the logic for the display and positioning of modules and components.Here is an example structure.
<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
define('TEMPLATE_PATH','templates/'.$this->template);
define('CSS_PATH','templates/'.$this->template.'/css');
define('IMAGE_PATH','templates/'.$this->template.'/images');
define('JS_PATH','templates/'.$this->template.'/js');
$pageoption = JRequest::getVar( 'option', '' );
$frontpage = 'N';
$menu = & JSite::getMenu();
if ($menu->getActive() == $menu->getDefault()) { $frontpage = 'Y'; }
$menu =& JSite::getMenu();
$active = $menu->getActive();
$params = $menu->getParams( $active->id );
>
/* -- activate the following line if you want to get class directly from the admin settings.
'pageclass_sfx' );
---- the following code demonstrates the use of class for use based on components and front page.
if($option == 'com_compareprice')
;
$fullpage = FALSE;
if($option == 'com_compareprice' || $frontpage == "Y")
$fullpage = TRUE;
*/
?>
<!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>
<!--code for error heading is also included here-->
<?php if (!$this->error->code) : ?>
<jdoc:include type="head" />
<?php else : ?>
<title><?php echo $this->error->code ?> - <?php echo $this->title; ?></title>
<?php endif; ?>
<!--code for error heading is also included here-->
<link rel="stylesheet" />
<link rel="stylesheet" />
<link rel="stylesheet" media="screen" />
<script >
<?php
// this code includes the jquery which may be required for the site.
// the jquery.js to be downloaded and placed in /media/system/js/jquery.js
$document = &JFactory::getDocument();
$document->addScript('/media/system/js/jquery.js' );
?>
</head>
<body <?php echo ((trim($class)!='') ? '' : ' ; ?>>
<!--This element should only appear once in the <body> element of the Template to render system and error messages that occurred in the request.CSS styles for system messages can be found in templates\system\css\system.css-->
<jdoc:include type="message" />
<div>
<div>
<div><a title="" border="0" /></a></div>
<div>
<!--the following statement includes the menu.notice how the module is rendered.you can see the details of this <jdoc:include from here: http://docs.joomla.org/Jdoc_statements-->
<jdoc:include type="module" name="mainmenu" title="Top Menu" />
</div>
</div>
<div>
<div>
<img title="" />
</div>
<div>
<!--note the name of the module,it is php not mod_php-->
<jdoc:include type="module" name="php" title="biologicalclock" />
</div>
<div>
<!--note the name of the module,it is mainmenu not mod_mainmenu.this is how module instances are rendered i.e module copies with different names. -->
<jdoc:include type="module" name="mainmenu" title="Example Pages" />
</div>
</div><!--end of green box-->
<div>
<!--the following code places the breadcrumb in the page.here also the logic that if we are in home page breadcrumbs will not show is included.-->
<?php if($frontpage != "Y"):?>
<div><jdoc:include type="module" name="breadcrumbs" /></div>
<?php endif; ?>
<div>
<!--the following code places all the modules in the left position one by one.you can also place your custom position modules here.-->
<?php if($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left" style="" />
<?php endif;?>
</div><!--end of left content-->
<div>
<!--the following code places the pages contents.each page is equal to a component.-->
<jdoc:include type="component" />
</div><!--end of right content-->
<div style=" clear:both;"></div>
</div><!--end of main content-->
<div>
<!--including the modules for the footer position.-->
<?php if($this->countModules('footer')) : ?>
<jdoc:include type="modules" name="footer" />
<?php endif;?>
</div>
</div> <!--end of main container-->
</body>
</html>