You are on page 1of 6

Tutorial za izradu Joomla Template-a

Postao/la HepeK 20 kol 2012, 00:00 Nikada na besplatnom ili plaenom templateu neete nai sve to vam treba zbog toga najbolje je da napravite sopstveni template. U ovom kratkom tutoralu napisati u korak po korak kako da od obinog html-a napravite funkcionalni joomla template. Koristiu Joomlu 1.5 ali i u novijim verzijama se radi na isti nain... Trebate imati na umu da kada izradjujete template za svaki modul vam je potreban css... Da bi napravili template potrebno je da prvo kreiramo folder u ../templates/ pod nazivom tutorial_template jer e nam se tako zvati template.

Unutar foldera kreirati emo foldere css i images a zatim i fajlove templateDetails.xml i index.php I jo kao priprema nam ostaje kreiranje fajla template.css u kojem cemo definisati stajl naseg templatea. Dakle ovako bi trebalo da izgleda:

Sada pristupamo kreiranju fajla templateDetails.xml u kojem emo definisati nae fajlove i foldere da bi joomla sistem znao da je rije u templateu i koji fajlovi su potrebni za rad. Sintaksa: [ Preuzmi ] [ Sakrij ] [ Selektuj ] [ Povecaj ]
Upotrijebljena je sintaksa xml koda

<?xml version="1.0" encoding="utf-8"?> <install version="1.5" type="template"> <name>ProgramiranjeOrgJoomlaTemplate</name> <creationDate>August 2012</creationDate> <author>HepeK</author> <copyright>GPL</copyright> <authorEmail>dzuboksss@gmail.com</authorEmail> <authorUrl>www.programiranje.org</authorUrl> <version>1.0</version> <description>Pokazna verzija template-a za joomla 1.5</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <folder>images</folder> <folder>css</folder> </files> <positions> <position>gore</position> <position>dole</position> <position>lijevo</position> <position>desno</position> <position>footer</position> <position>menu</position> <position>header</position> </positions> </install> Analiza zavrsena za 0.016 sekundi, koristeci GeSHi 1.0.8.4 Dakle u templateDetails.xml smo naveli ime, opis, datum, autora teme a i fajlove i foldere koji su potrebni. Ali pored toga naveli smo jo i position odnosno nazive pozicija za module koji ce biti dostupni za nau temu (nazivi po elji). Za joomla 1.6, 1.7, itd... templateDetails.xml se razlikuje samo drugoj i zadnjoj liniji koda: Sintaksa: [ Preuzmi ] [ Sakrij ] [ Selektuj ] [ Povecaj ]
Upotrijebljena je sintaksa xml koda

<?xml version="1.0" encoding="utf-8"?> <extension version="1.6" type="template"> <name>ProgramiranjeOrgJoomlaTemplate</name> <creationDate>August 2012</creationDate> <author>HepeK</author> <copyright>GPL</copyright> <authorEmail>dzuboksss@gmail.com</authorEmail> <authorUrl>www.programiranje.org</authorUrl> <version>1.0</version> <description>Pokazna verzija template-a za joomla

1.5</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <folder>images</folder> <folder>css</folder> </files> <positions> <position>gore</position> <position>dole</position> <position>lijevo</position> <position>desno</position> <position>footer</position> <position>menu</position> <position>header</position> </positions> </extension> Analiza zavrsena za 0.016 sekundi, koristeci GeSHi 1.0.8.4 Sada cemo kreirati index.php Sintaksa: [ Preuzmi ] [ Sakrij ] [ Selektuj ] [ Povecaj ]
Upotrijebljena je sintaksa php koda

<?php 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/<?php echo $this->template;?>/css/template.css" type="text/css" /> </head> <body> <jdoc:include type="component" /> </body> </html> Analiza zavrsena za 0.203 sekundi, koristeci GeSHi 1.0.8.4 <jdoc:include type="head" /> - ubacuje sve potrebno u head tagove (javascript, css komponenti, meta tagove, title, description...etc) <jdoc:include type="component" /> - Content komponente - Ukoliko se nalazite na otvorenom artiklu

to je sadrzaj artikla (npr. vijesti). $this->baseurl - url vaeg sajta. $this->template - naziv vae teme. Sada cemo malo popraviti izgled stranice i ubaciti pozicije modula. index.php sada izgleda ovako: Sintaksa: [ Preuzmi ] [ Sakrij ] [ Selektuj ] [ Povecaj ]
Upotrijebljena je sintaksa php koda

<?php 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/<?php echo $this->template;?>/css/template.css" type="text/css" /> </head> <body> <div class="kontejner"> <div class="header"></div> <div class="meni"><jdoc:include type="modules" name="menu" /> </div> <div class="wrapper"> <div class="boxLijevo"><jdoc:include type="modules" name="lijevo" /> </div> <div class="boxCentar"><jdoc:include type="component" /></div> <div class="boxDesno"><jdoc:include type="modules" name="desno" /> </div> <div style="clear: both;"></div> </div> <div class="footer"><jdoc:include type="modules" name="footer" /> </div> </div> </body> </html> Analiza zavrsena za 0.200 sekundi, koristeci GeSHi 1.0.8.4 I template.css izgleda ovako: Sintaksa: [ Preuzmi ] [ Sakrij ] [ Selektuj ] [ Povecaj ]
Upotrijebljena je sintaksa css koda

body{ background: silver; margin: 0; padding: 0; } .kontejner{ width: 960px; margin: 0 auto 0 auto; } .header{ width: 100%; height: 150px; background: green; } .meni{ width: 100%; height: 35px; background: yellow; } .wrapper{ width: 100%; } .boxLijevo{ width: 200px; float: left; background: #8080FF; } .boxCentar{ width: 560px; float: left; background: #FF8040; } .boxDesno{ width: 200px; float: left; background: #8080FF; } .footer{ width: 100%; background: maroon; } Analiza zavrsena za 0.026 sekundi, koristeci GeSHi 1.0.8.4 Kada ukljuimo module na nae pozicije koje smo postavili u index.php frontend izgleda ovako:

<jdoc:include type="modules" name="lijevo" /> - ovo je pozicija za module koji ce biti na lijevoj strani. Moete postaviti neogranieno pozicija za module na bilo koje mjestu u templateu ali morate ih navesti u templateDetails.xml Ovo je bio osnovni tutorial za izradu templatea...u narednim tutorialima bavicemo se malo naprednijom doradom ovog postojeeg tutorial_template-a. To je to, samo vaa mata je granica u izgledu vaeg joomla portala

You might also like