Tutorial za izradu Joomla Template-a

Teme vezane za jedan od najboljih CMS danas.
18 post(ov)a • Stranica: 1/2.1, 2

Tutorial za izradu Joomla Template-a

PostPostao/la HepeK » 20 kol 2012, 00:00

Nikada na besplatnom ili plaćenom templateu nećete naći sve što vam treba zbog toga najbolje je da napravite sopstveni template.

U ovom kratkom tutoralu napisati ću korak po korak kako da od običnog html-a napravite funkcionalni joomla template.

Koristiću Joomlu 1.5 ali i u novijim verzijama se radi na isti način...

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.

slika

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:

slika

Sada pristupamo kreiranju fajla templateDetails.xml u kojem ćemo definisati naše fajlove i foldere da bi joomla sistem znao da je riječ u templateu i koji fajlovi su potrebni za rad.

xml code
<?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>


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 našu temu (nazivi po želji).

Za joomla 1.6, 1.7, itd... templateDetails.xml se razlikuje samo drugoj i zadnjoj liniji koda:

xml code
<?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>


Sada cemo kreirati index.php

php code
<?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>


<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 vašeg sajta.
$this->template - naziv vaše teme.

Sada cemo malo popraviti izgled stranice i ubaciti pozicije modula.

index.php sada izgleda ovako:

php code
<?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>


I template.css izgleda ovako:

css code
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;
}


Kada uključimo module na naše pozicije koje smo postavili u index.php frontend izgleda ovako:

slika

<jdoc:include type="modules" name="lijevo" /> - ovo je pozicija za module koji ce biti na lijevoj strani.

Možete postaviti neograničeno 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 postojećeg tutorial_template-a.

To je to, samo vaša mašta je granica u izgledu vašeg joomla portala :p
"Ko nema u glavi ima na internetu"
Što čujem - poštujem, dok ne vidim - ne vjerujem.

Re: Tutorial za izradu Joomla Template-a

PostPostao/la bolepks » 24 sij 2014, 11:31

Interesujeme da li u XML verzin za novi temlejt navodimo 2.5 ili nemora.
Moduli se podešavaju u fajlu PHP u kom tačno delu koda i šta oni u suštini predstavljaju.
I još jedno pitanje ovo je jdoc je specifično za Joomlu u PHP nepostoji?

Re: Tutorial za izradu Joomla Template-a

PostPostao/la HepeK » 24 sij 2014, 13:04

Kod Joomla 2.5 koristi se xml u ovom obliku:

xml code
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.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>
</extension>


U ovom tutorialu konkretno se govori o poziciji modula a podešavanje i izrada modula je sasvim druga priča...

jdoc je html tag koji je specifičan samo za joomla sistem i on ga procesira na svojstven način za inkludanje modula ili komponenti na pozicije jdoc taga.
"Ko nema u glavi ima na internetu"
Što čujem - poštujem, dok ne vidim - ne vjerujem.

Re: Tutorial za izradu Joomla Template-a

PostPostao/la bolepks » 24 sij 2014, 17:52

Hvala na odgovoru, sve pohvale za tutotijal.
A za Index.php da li se nešto menja za verziju 2.5.....

Re: Tutorial za izradu Joomla Template-a

PostPostao/la bolepks » 24 sij 2014, 19:44

Sve sam odradio kao što je napisano ali nevidi templejt. Imam instaliranu Joomla! 2.5.17 Stable. Možda je problem byethost24.com free hosting... Taj koristim za vežbanje

xml code
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.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>
</extension>


php code
<?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>


Css isto i ova dva foldera ali nevidi ništa?

Ka pokušam da zazipujem folder pa preko Joomle panela javlja grešku
JInstaller: :Install: File does not exist /home/vol15_5/byethost24.com/b24_14248879/htdocs/joomla/tmp/install_52e2b7c15f9ee/tutorial_template/images
Zadnja izmjena: Armin; 25 sij 2014, 10:37; ukupno mijenjano 1 put/a.
Razlog: display koda

Re: Tutorial za izradu Joomla Template-a

PostPostao/la HepeK » 25 sij 2014, 12:17

Folder images ne smije biti prazan. Ubaci bilo kakvu sliku i proći će ti instalacija.
"Ko nema u glavi ima na internetu"
Što čujem - poštujem, dok ne vidim - ne vjerujem.

Re: Tutorial za izradu Joomla Template-a

PostPostao/la bolepks » 26 sij 2014, 12:03

Hvala, upravo sad sam probao proradio je templejt.... Sad ću malo da se pozabavim njime i ako naidžem na neki problem pišem.

Re: Tutorial za izradu Joomla Template-a

PostPostao/la bolepks » 26 sij 2014, 14:36

Podesio sam sve sve se vidi kako treba ali nikako nemogu da ukljčim horizontalni meni About Joomla, Feantures.... menjao sam pozicije gore, header ali ništa ostalo sve radi

Re: Tutorial za izradu Joomla Template-a

PostPostao/la HepeK » 26 sij 2014, 16:35

Horizontalni menu je ustvari modul menu u kojem odabereš koji ce se menu prikazivati.

Odavno ne radim u Joomli ali koliko se sjecam zove se top_menu ili samo menu, nisam siguran...
"Ko nema u glavi ima na internetu"
Što čujem - poštujem, dok ne vidim - ne vjerujem.

Re: Tutorial za izradu Joomla Template-a

PostPostao/la bolepks » 26 sij 2014, 19:50

U pravu si rešio sam


18 post(ov)a • Stranica: 1/2.1, 2

Na mreži

Trenutno korisnika/ca: / i 1 gost.