Table of Contents

Šta je Joomla template?

Joomla šablon je skup datoteka u okviru Joomla CMS koje kontrolišu prezentaciju (prikaz) sadržaja. Joomla šablon nije veb sajt; takođe, nije kompletan dizajn veb sajta. Template je osnovni dizajn izgleda vašeg Joomla veb sajta. To znači da je potpuno odvojen sadržaj (koji se nalazi u bazi)i prezentacija, posebno kada se koristi CSS za izgled (suprotno od korišćenja tabela u index.php datoteci). Ovo je jedan od osnovnih kriterijuma modernih veb sajtova. Novi šablon i odatle kompletno novi izgled veb sajta može da se primeni brzo. Ovo je moguće čak i ako imate različite pozicije sadržaja kao i boja i grafika. Takođe koriste se i uslovne PHP komande za kreiranje prikaza kojim se dinamički određuje broj kolona u zavisnosti od sadržaja koji se objavljuje.

Od čega se sastoji Joomla template?

Šablon se sadrži od nekoliko datoteka i direktorijuma. Te datoteke moraju biti u /templates/ direktorijumu Joomla instalacije i u svom zasebnom poddirektorijumu. Što znači da ako imamo dva šablona instalirana, to bi izgledalo recimo ovako:

/templates/prvitemp

/templates/drugitemp

Primetićete da nazivi direktorijuma moraju imati isto ime kao i template, u ovom slučaju element i voodoo. Uočljivo je da su „case sensitive“ (bitno je da li su mala ili velika slova) i ne mogu sadržavati razmake. U okviru template direktorijuma su ključne datoteke:

/prvitemp/templateDetails.xml

/prvitemp/index.php

Nazivi i lokacija ove dve datoteke moraju se podudarati sa onim kako se pozivaju iz osnovnog Joomla skripta.

Tipična struktura Template direktorijuma

Tipični template za Joomla! 1.5 sadrži sledeće direktorijume:

Osnovna struktura šablona treba da sadrži najmanje ove četiri datoteke:

templateDetails.xml

Ovo je XML format metadata file koji govori Joomla-i koje druge datoteke su potrebne kada se učitava strana koja koristi ovaj šablon. Obratite pažnju na veliko “D.” Takođe sadrži i ime autora, autorska prava i koje datoteke čine šablon (uključujući i slike). Na kraju služi i za instaliranje šablona kada se koristi admistratorski backend. templateDetails.xml mora sadržati nazive svih datoteka koje su sadržane u šablonu. Takođe sadrži i informacije kao što su autori i autorska prava. Neki od tih su prikazani u administratorskom delu Template Manager-a. Primer XML datoteke: 

<?xml version="1.0" encoding="utf-8"?> 
<install version="1.5" type="template">       
<name>TemplateTutorial</name>       
<creationDate>Maj 2008</creationDate>       
<author>ImeiPrezime</author>       
<copyright>GPL</copyright>       
<authorEmail> adresaautora@gmail.com </authorEmail>       
<authorUrl>www.urlautora.net</authorUrl>       
<version>1.0</version>       
<description>opis templatea</description>       
<files>             
<filename>index.php</filename>             
<filename>templateDetails.xml</filename>             
<filename>js/somejsfile.js</filename>             
<filename>images/threecol-l.gif</filename>             
<filename>images/threecol-r.gif</filename>             
<filename>css/customize.css</filename>             
<filename>css/layout.css</filename>             
<filename>css/template_css.css</filename>        
</files>       
<positions>             
<position>user1</position>             
<position>top</position>             
<position>left</position>             
<position>banner</position>             
<position>right</position>             
<position>footer</position>       
</positions>          
<params>             
<param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use">                   
<option value="blue">Blue</option>                   
<option value="red">Red</option>             
</param>          
</params> 
</install>

Objašnjenja: 

<files> 
<filename>index.php</filename> 
<filename>templateDetails.xml</filename> 
<filename>js/somejsfile.js</filename> 
<filename>images/threecol-l.gif</filename> 
<filename>images/threecol-r.gif</filename> 
<filename>css/customize.css</filename> 
<filename>css/layout.css</filename> 
<filename>css/template_css.css</filename> 
</files>

index.php

Šta je index.php datoteka? To je kombinacija (X)HTML i PHP skripte koja određuje sve što se tiče prikaza i prezentacije stranice.

Šta sadrži index.php?

Prvo da vidimo kritični deo za dobijanje ispravnog šablona, DOCTYPE na vrhu u index.php datoteci. Ovo je deo koda koji ide u sam vrh svake veb strane. U vrhu naše strane mi imamo sledeće: 

<?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">

Prva PHP naredba koja osigurava nemogućnost direktnog pristupa datoteci iz bezbednosnih razloga.

DOCTYPE je jedna od fundamentalnih komponenti – kako se veb strana prikazuje u browseru, posebno, kako browser interpretira CSS.

Možete koristiti različite DOCTYPE. Osnovno, DOCTYPE (document type declaration) govori browseru kako da interpretira stranu.

HTML 4.01specificira tri tipa: Strict, Transitional i Frameset.

Sledeće je XML naredba (posle DOCTYPE): 

<html xmlns="http://www.w3.org/1999/xhtml" 
xml:lang="<?php echo $this->language; ?>" 
lang="<?php echo $this->language; ?>" >

Šta sačinjava <head>? 

<?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="/templates/system/css/system.css" type="text/css" /> 
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" /> 
<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> 
</head>

<?php echo $this→language; ?> uzima jezik definisan u Global Configuration.

Sledeća linija je uključivanje još nekih header informacija: 

<jdoc:include type="head" />

Ovo su sve header informacije koje su podešene u Global Configuration. Sadrže sledeće tagove (u podrazumevanoj instalaciji): 

<title>Welcome to the Frontpage</title>   
<meta name="description" content="Joomla! - the dynamic portal engine and content management system" />   
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<meta name="robots" content="index, follow" />   
<meta name="keywords" content="joomla, Joomla" />  
<link href="/?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />   
<link href="/?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />   
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/mootools.js"></script> 
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/caption.js"></script>

Neke od ovih header informacija su kreirane u letu u zavisnosti od specifičnosti strane odnosno sadržaja koji je u njoj. Sadrži i brojne metatags[md]the favicon, RSS feed URLs, i neke standardne JavaScipt datoteke.

Poslednje linije u headeru definišu link sa CSS datotekom: 

<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" /> 
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

Prve dve datoteke system.css i general.css sadrže neke genričke Joomla stilove. Najmanje jedan je CSS za šablon, ovde nazvan template.css. PHP code <?php echo $this→template ?> vraća ime tekućeg šablona. Pisanje u ovom formatu a ne pisanje prave putanje čini kod više generičkim. Kada kreirate novi template možete kopirati ceo header koda bez da morate išta menjati.

Template CSS datoteka može biti više, npr. uslovni za različite browsere. Ovo je za IE6: 

<!--[if lte IE 6]>
<link href="/templates/<?php echo $this->template ?>/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->

Ovo je primer za korišćenje template parametara: 

<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" />

Naš <body> kod u index.php je: 

<body>
<div id="wrap">
  <div id="header">
    <div class="inside">
        <?php echo $mainframe->getCfg('sitename');?>
      <jdoc:include type="modules" name="top" />
    </div>
  </div>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" />
    </div>
  </div>
  <div id="content">     
    <div class="inside">
      <jdoc:include type="component" />
    </div>
  </div>
  <div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" />
    </div>
  </div>
  <div id="footer">
    <div class="inside"> Powered by <a href="http://joomla.org">Joomla!</a>Valid <a href="http://validator.w3.org/check/referer">XHTML</a> 
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> 
    </div>
  </div>
</div><!--end of wrap-->
</body>
Pozicioniranje modula?

Ova linija ubacuje lokaciju modula: 

<jdoc:include type="modules" name="right" />

Puna sintaksa je sledeća 

<jdoc:include type="modules" name="LOCATION" style="OPTION" />

Detaljniji opis nalazi se u delu o modulima

template.css

CSS datoteka šablona uređuje prezentacioni deo šablona, odnosno font, margine, zaglavlja, itd… Lokacija direktorijuma je opciona, ali morate ga tačno navesti u index.php datoteci. Možete ga zvati kako želite. Moguće je imati i više CSS datoteka.

template_thumbnail.ext

Zamenite .ext sa nekim od formata slika (.jpg, .png, .gif) Generalno to je slika u formatu 200×150 pixela koja prikazuje izgled strane kada se kursorom pređe preko naziva šablona u Template Manager-u. Ovo omogućava administratoru da vidi kako izgleda template pre nego što ga primeni na sajt.