13
How to Create a Basic Template You've installed Joomla!, installed all of the components, modules, and mambots you need, and you've created your content and menus. Now you want to create a custom look for your Joomla! site, but you don't know how to create a template. This article will step through the creation of a very basic template in Joomla! Hopefully, by the end of this article, you will have a basic understanding of what goes into a Joomla! template. (Note: This information only applies to Joomla! 1.0.X. It does not apply to version 1.5.) Template File Structure A basic Joomla! template will have the following file structure: /templatename /css /template_css.css /index.html (blank file) /images /index.html (blank file) /... (all of your template images) /index.php /templateDetails.xml /template_thumbnail.png 1. /templatename Your template will reside in a folder with the same name as your template. 2. /css The CSS folder contains your template CSS file, "template_css.css", and any other CSS file you feel is necessary for your template. 3. /images The images folder should contain all (if any) of your template images. The images could be stored anywhere, but storing them in the images folder keeps a consistent structure for your template. /index.php The index is the file that Joomla! looks for when rendering your template. I will discuss this in more detail later. 4. /templateDetails.xml The templateDetails xml file contains details about your template, which Joomla! uses to install your template from your installation ZIP file. I will discuss this in more detail later.

How to create a basic template

  • Upload
    vathur

  • View
    619

  • Download
    1

Embed Size (px)

Citation preview

Page 1: How to create a basic template

How to Create a Basic Template  You've installed Joomla!, installed all of the components, modules, and mambots you need, and you've created your content and menus. Now you want to create a custom look for your Joomla! site, but you don't know how to create a template. This article will step through the creation of a very basic template in Joomla! Hopefully, by the end of this article, you will have a basic understanding of what goes into a Joomla!  template.  (Note: This  information only applies  to  Joomla! 1.0.X.  It does not apply  to version 1.5.)  Template File Structure A basic Joomla! template will have the following file structure:  /templatename  

/css  /template_css.css /index.html (blank file) 

 /images  

/index.html (blank file) /... (all of your template images) 

 /index.php /templateDetails.xml /template_thumbnail.png  

1. /templatename Your template will reside in a folder with the same name as your template. 

2. /css The CSS folder contains your template CSS file, "template_css.css", and any other CSS file you feel is necessary for your template. 

3. /images The  images folder should contain all (if any) of your template  images. The  images could be stored anywhere, but storing them in the images folder keeps a consistent structure for your template. • /index.php 

The  index  is the file that Joomla!  looks for when rendering your template.  I will discuss this  in more detail later. 

4. /templateDetails.xml The  templateDetails  xml  file  contains details  about  your  template, which  Joomla! uses  to  install your template from your installation ZIP file. I will discuss this in more detail later. 

 

Page 2: How to create a basic template

5. /indeThe b

  

Step 1 The  first typographcode. Her

  

Step 2 Now that 'index.php2 DIV elem 

ex.html ‐ blanblank "index.

1: Design

thing  you  shy, etc. for yore is what my 

2: HTML M

you have dep' file. Becausmenets for m

 <?xml  v//W3C//"http://w<html xm<head>   <title>Re  <link hre

nk files html" files are

 

should  do  wour site.  I  likedesign looks 

Markup 

esigned the lose this is a simy site's layou

version="1.0" /DTD www.w3.org/mlns="http://

edSpheresRul

ef="css/templ

e there to pre

when  creatinge to use Maclike: 

ook of your temple 2‐columt. Here is the

encoding="iXHTML 

/TR/xhtml1/D/www.w3.org

le.com</title>

late_css.css" 

event direct a

g  a  templatecromedia Fire

emplate, it is n design with XHTML mark

iso‐8859‐1"?>1.0

DTD/xhtml1‐tg/1999/xhtml

rel="styleshe

access to the 

e  is  to  desigeworks to de

 time to writh no headers kup: 

><!DOCTYPE 0  Transitional.dt"> 

eet" type="tex

default Apac

gn  the  layousign my site 

e some XHTMand no foote

html  PUBLITransitional//td"> 

xt/css" /> 

che index pag

ut,  grid,  grabefore  I writ

 

ML markup iners, I am only 

C  "‐/EN" 

ge. 

phics, te any 

n your using 

Page 3: How to create a basic template

 Notice thathe  tempwould loo

Step 3 This is whour basic  

  </head>  <body id  <div id="    <h1 id=  <h2 id=    <!‐‐ side  </div><!  <div id="    <!‐‐ ma  </div><!  </body></html>  

at I have put late. Becauseok like: 

3: CSS 

here we start framework in

 * {   margin:  padding}   

d="bodybg"> 

"sidebar"> 

"sitetitle"><a"siteslogan">

ebar modules

‐‐ end sideba

"mainbar"> 

inBody goes h

‐‐ end mainb

 

comments ase we have no

to see the den place. Here 

: 0; g: 0; 

a href="index>Your source 

s go here ‐‐>

r ‐‐> 

here ‐‐> 

ar ‐‐> 

s placeholderot written an

esign elemenis the CSS co

.php">RedSpfor red spher

s for where I ny of  the CSS

ts really takede: 

pheresRule.cores</h2> 

will load the S code,  this  is

e shape. At th

om</a></h1>

modules ands what  the  re

 

e end of this 

d the mainBoesulting html

step, we will

dy for  page 

l have 

Page 4: How to create a basic template

body {   background‐color: #fff;   color: #666;   font‐family: Arial, Helvetica, sans‐serif;   font‐size: 12px; }   a, a:link, a:visited {   color: #900;   text‐decoration: none; } a:hover {   text‐decoration: underline;   color: #000; }   h1#sitetitle {   padding: 100px 0 0;   background: #fff url('../images/logo.png') center top no‐repeat;   font‐size: 20px;   font‐weight: bold;   text‐align: center;   color: #000; } h1#sitetitle a, h1#sitetitle a:link, h1#sitetitle a:visited {   text‐decoration: none;   color: #000; } h1#sitetitle a:hover {   text‐decoration: none;   color: #000; } h2#siteslogan {   font‐size: 14px;   font‐weight: bold;   margin: 0 0 10px;   text‐align: center;   color: #000; }   #sidebar {   width: 215px;   margin: 10px 0 10px 10px;    float: left;   color: #000; }   #mainbar { 

Page 5: How to create a basic template

  margin: 10px 10px 10px 235px; }   /*   Joomla Elements Will be added in Step 4: Joomlafy   */  

  

Step 4: Joomlafy  The next step  is to "Joomlafy" our  'index.php' and  'template_css.css' files. Here  is the XHTML markup, Joomlafied:  XHTML Markup  

 <?php defined( '_VALID_MOS' ) or die( 'Restricted access' ); // needed to seperate the ISO number from the language file constant _ISO $iso = explode( '=', _ISO ); // xml prolog echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?> <!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"> <head> <?php mosShowHead(); ?> <?php if ( $my‐>id ) {   initEditor(); } ?> <meta  http‐equiv="Content‐Type"  content="text/html;  <?php  echo  _ISO; ?>" /> <link  href="<?php  echo  $mosConfig_live_site; ?>/templates/redspheres/css/template_css.css"  rel="stylesheet" type="text/css" />   </head>   <body id="bodybg">   

Page 6: How to create a basic template

<div id="sidebar">     <h1  id="sitetitle"><a href="index.php"><?php echo $mosConfig_sitename; ?></a></h1>   <h2 id="siteslogan">Your source for red spheres</h2>   <?php   if( mosCountModules( 'left' ) > 0 ) {     mosLoadModules( 'left', ‐2 );   } ?>   </div><!‐‐ end sidebar ‐‐>   <div id="mainbar">     <?php mosMainBody(); ?>   </div><!‐‐ end mainbar ‐‐>   </body> </html>  

 Now that we have our "Joomlafied" XHTML markup, let's take a look at what's different. In the header, I have added the following code:  

 <?php defined( '_VALID_MOS' ) or die( 'Restricted access' ); // needed to seperate the ISO number from the language file constant _ISO $iso = explode( '=', _ISO ); // xml prolog echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?> <!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"> <head> <?php mosShowHead(); ?> <?php if ( $my‐>id ) {   initEditor(); } ?> <meta  http‐equiv="Content‐Type"  content="text/html;  <?php  echo  _ISO; ?>" /> 

Page 7: How to create a basic template

<link  href="<?php  echo  $mosConfig_live_site; ?>/templates/redspheres/css/template_css.css"  rel="stylesheet" type="text/css" />   </head>  

  "defined( '_VALID_MOS' )..."  The first line, "defined( '_VALID_MOS')...", prevents direct access to the 'index.php' file.  mosShowHead Another  important part  to note  is  the  line  that says "mosShowHead".  I have used  this  in place of my "title" and "meta"  tags because  Joomla! uses  this  function  to automatically show  the site's  title along with important meta tags. initEditor  The third part I would like to point out is "initEditor". This function initializes the WYSIWYG editor for the front end of your site. It is inside a conditional statement that tests whether or not the user is logged in. The  conditional  statement  improves  load  time  for  users who  are  not  logged  in,  because  it  prevents Joomla! from executing the initEditor function when it is not necessary. echo $mosConfig_live_site  You should also note that the link element has been changed to use an absolute href for the template's CSS file. Using $mosConfig_live_site along with the path to the template (templates/redspheres...), your template now knows exactly where its corresponding CSS file is.  Now let's take a look at what else we've added to "Joomlafy" our 'index.php' file. Left Module Position  The  following code  is used  to 1) determine whether or not  there are modules published  to  the "left" module  position,  and  2)  load  those modules  in  the  "left" module  position  with  a  style  of  ‐2.  (see "mosLoadModules ‐ An Explanation")  

 <?php   if( mosCountModules( 'left' ) > 0 ) {     mosLoadModules( 'left', ‐2 );   } ?>  

 

Page 8: How to create a basic template

Main Body  The  following code  is used to  load the Main Body of your  Joomla! template. This  is where all content items and components are loaded for your Joomla! site.  

   <?php mosMainBody(); ?>  

  CSS Code  

 * {   margin: 0;   padding: 0; }   body {   background‐color: #fff;   color: #666;   font‐family: Arial, Helvetica, sans‐serif;   font‐size: 12px; }   a, a:link, a:visited {   color: #900;   text‐decoration: none; } a:hover {   text‐decoration: underline;   color: #000; }   h1#sitetitle {   padding: 100px 0 0;   background: #fff url('../images/logo.png') center top no‐repeat;   font‐size: 20px;   font‐weight: bold;   text‐align: center;   color: #000; } h1#sitetitle a, h1#sitetitle a:link, h1#sitetitle a:visited {   text‐decoration: none;   color: #000; } 

Page 9: How to create a basic template

h1#sitetitle a:hover {   text‐decoration: none;   color: #000; } h2#siteslogan {   font‐size: 14px;   font‐weight: bold;   margin: 0 0 10px;   text‐align: center;   color: #000; }   #sidebar {   width: 215px;   margin: 10px 0 10px 10px;    float: left;   color: #000; }   #mainbar {   margin: 10px 10px 10px 235px; }   /* Joomla Elements */   /* Moduletable DIV's */ #sidebar .moduletable {   margin: 10px 0; } #sidebar .moduletable h3 {   border‐bottom: 1px solid #ccc;   font‐size: 18px;   font‐weight: bold;   margin: 0 0 10px;   padding: 0 0 0 5px; }   /* Main Menu */ ul {   padding: 0 0 0 5px; } li {   list‐style‐type: none;   padding: 3px 0 3px 18px;   background: #fff url('../images/bullet.gif') 0 5px no‐repeat; } ul#mainlevel a, ul#mainlevel a:link, ul#mainlevel a:visited {   text‐decoration: none; 

Page 10: How to create a basic template

  color: #900; } ul#mainlevel a:hover {   text‐decoration: underline;   color: #000; }   /* Login Form */ #mod_login_username {   width: 205px;   margin: 0 5px 5px;   border: 1px solid #ccc; } #mod_login_password {   width: 205px;   margin: 0 5px 5px;   border: 1px solid #ccc; } #mod_login_remember {   margin: 0 0 0 5px; } input.button {   border: 1px solid #ccc;   background‐color: #eee;   color: #666;   padding: 3px;   margin: 5px;   font‐size: 10px; } label {   margin: 0 0 0 5px; }   /* Search Form */ #mod_search_searchword {   width: 205px;   margin: 0 5px 5px;   border: 1px solid #ccc; }   /* Main Content Area */ .componentheading {   display: block;   font‐size: 20px;   color: #666;   font‐weight: bold;   border‐bottom: 1px solid #ccc;   margin: 0 0 10px; 

Page 11: How to create a basic template

}   .contentheading {   font‐size: 20px;   color: #900;   font‐weight: bold;   margin: 0 0 2px; }   .small, .createdate, .modifydate {   font‐size: 10px;    font‐weight: normal; }   a.readon {   display: block;   padding: 3px 0 3px 18px;   background: #fff url('../images/bullet.gif') left center no‐repeat;   margin: 5px 0 0; }   .article_seperator {   display: block;   height: 10px; }  

 We  also  Joomlafied  our  CSS  code.  Everything  below  "Joomla  Elements"  was  added  to  the  CSS  for Joomla!‐specific elements. I will not take time to discuss the Joomla!‐specific CSS elements, but rather I will just give you a link to "A Blank Template CSS file for Joomla" from CompassDesign.    

Step 5: Create a Thumbnail  This step is not entirely necessary. Your template will load and run properly with or without a thumbnail. This just gives you a quick look at the template from the template manager.  The dimensions of a thumbnail do not have to meet specific requirements, but they should be around 225 pixels wide by 150 pixels high. Give your thumbnail the name 'template_thumbnail.png'.  Here is my thumbnail: 

Page 12: How to create a basic template

Step 6 The next for our te 

 It  is  impo'template 

6: Create 

step is to cremplate: 

 <mosinst  <name>  <creatio  <autho  <copyriGNU/GP  <autho  <autho  <versio  <descriinstructio  <files>     <filena    <filena    <filena    <filena    <filena    <filena    <filena    <filena    <filena  </files></mosins 

ortant  that  eeDetails.xml' f

"templa

eate the 'tem

tall type="tem>redspheres<onDate>09/2r>Cory Webbght>CopyrighL</copyrightrEmail>your erUrl>www.hon>1.0</versioption>RedSpon. I hope we

ame>index.htame>index.phame>templatame>templatame>css/indeame>css/temame>images/ame>images/ame>images/> stall> 

every  file  in file. 

ateDetail

plateDetails.x

mplate" versi</name> 6/2006</creab</author> ht  2006 > email here</aowtojoomla.non> heres  is a same all learn som

tml</filenamehp</filenamete_thumbnailteDetails.xml<ex.html</filenplate_css.css/index.html<//logo.png</fil/bullet.gif</fil

your  installa

   

ls.xml"

xml' file. Her

on="1.0.x">

ationDate> 

‐  Cory 

authorEmail>net</authorU

mple Joomlamething.</de

e> e> .png</filenam</filename>name> s</filename>/filename> ename> lename> 

tion  package

 

e is the XML 

Webb,  R

> Url> 

! template foscription> 

me> 

e  has  a  corre

markup that

eleased  u

or the purpos

esponding  fil

t goes into th

nder 

se of 

ename  tag  i

his file 

n  the 

Page 13: How to create a basic template

Step 7: Zip It  All  of  your  template  files  should  be  in  a  folder  that  is  named with  your  template  name. Use  a  file compression application,  like WinZip,  to create a ZIP  file with your  template  files. This ZIP  file  is your installation file.   

Step 8: Install It  In your template manager, install your new template, and set it as your default template.   

Step 9: Modify It  Nobody's  perfect.  We  all  make  mistakes.  For  that  reason,  you  should  be  prepared  to  check  your template  for errors, browser compatability, and overall quality. Using  the  Joomla!  template manager, you can modify your template  'index.php' and  'template_css.css' files right  from the browser. You can make changes, save them, and immediately see the result by previewing your site.