Curs 3 Templateuri pentru Joomla!

Unde cutm i unde gsim template-uri pentru Joomla! Cum aleg un template Cum poate fi schimbat grafica (template-ul) unui site Cum instalm un nou template n Joomla! Cum gsesc poziiile pentru module Ce nseamn un template Joomla? Cum schimbm logo-ul

1 2 4 5 7 9 10

Unde cutam i unde gsim template-uri pentru Joomla!

Exist foarte multe template-uri pentru Joomla! (Joomla! templates). Unele template-uri sunt gratuite (free Joomla templates), altele pot fi achiziionate doar cumprnd licena. n general preul unui template de Joomla! nu este foarte mare iar dup cumprare acestea pot fi modificate i mbuntite astfel nct s reprezinte ct mai bine ideea siteului. Template gratuite pentru Joomla! Exist i civa dezvoltatori de templateuri pentru Joomla!, pentru unele dintre aceste template-uri trebuie pltit iar altele pot fi obinute chiar gratis, sunt destul de bune i cu puin munc pot fi aduse la standardul dorit. O list cu provideri(dezvoltatori) mai reprezentativi este prezentat mai jos:
rockettheme.com gavick.com joomlart.com themesclub.com joomlajunkie.com templateplazza.com joomladesigns.co.uk joomlatemplates.com joomlajet.com pure-joomla.com Curs3 Page1

Template pentru Joomla! contra cost Recomandri: Exist posibilitatea nscrierii ntr-un club (RocketTheme Template Club), acesta reprezentnd cel mai avantajos mod de a avea acces la toat arhiva pe o perioad determinat (perioada platit, opiunea pentru template individual are un cost mai ridicat). Consultnd site-urile de mai sus pot fi gsite informaii despre cum se poate face un cont individual sau cum se poate ajunge membru al clubului, informaii de preuri, demo pentru template-urile Joomla! disponibile i multe alte informaii. Informaie: Exist un cont Profesional Member la http://www.rockettheme.com/ , cost 250 USD pe an i se pun la dispoziie pentru download peste 40 de template-uri (Joomla! 1.0 i Joomla! 1.5). Se mai pune la dispoziie i un pachet "RocketLauncher" care conine instalul de Joomla!, template-ul i exemple de content (se utilizeaz numai ca o nou instalare de joomla), astfel cu numai cteva clickuri putem obine un site exact ca n demo-ul prezentat. Deasemenea sunt puse la dispoziie sursele (imaginile din template prelucrate n Fireworks) i suplimentar un modul i un mambot. Nu trebuie uitat forumul unde oricnd putem gsi informaii foarte utile i exemple de site-uri Joomla! dezvoltate cu template-uri disponibile. Aa c, http://www.rockettheme.com/ poate fi recomandat cu cldur ca surs pentru template-uri Joomla!.

Cum aleg un template

Ideal ar fi s avem "trasat" foarte clar imaginea siteului pe care l dezvoltm cu Joomla!, s tim cum ar trebui s arate pagina, adic: locul meniurilor, pe cte coloane dorim s avem contentul, locul modulelor (care pot fi att pe stnga ct i pe dreapta), alegerea culorilor, acestea fiind doar cteva aspecte care trebuiesc urmrite nainte de a plti un anume template. n imaginea templateului de mai jos pot fi vzute toate acestea precum i acele locuri unde pot fi adugate modulele cu care lucrm, fiind astfel foarte importante. n afar de poziiile cu care vine un template pentru Joomla!, se pot aduga i altele, ns trebuie avute cunotine n limbajul PHP.

left,

right, top, banner, user1..4, sunt poziii pe care se poate pune un modul.
Page2

Curs3

Ca i regul nescris, pe left (stnga) se pun: meniul, modulul de login; pe right (dreapta) se pune Polls (chstionare online); pe banner apar de obicei bannerele care urmeaz a fi folosite ulterior. Vizualiznd imaginea de mai sus realizm cum o s apar coninutul (body) paginii. E bine de amintit faptul c, nu e obligatoriu s avem poziiile ocupate cu module, n exemplul de mai sus dac se dorea o pagina mai "larg", nu se pune nimic pe poziia right, n acest fel coninutul paginii "se dilat" i peste acea poziie. Odat ce v-ai hotrt, achiziionnd un template (cu bani sau gratis), creai un folder pe computerul personal, denumii-l "joomla templates" i salvai acolo fiierele care conin sursele care de obicei au extensia .zip sau .tgz,. De ce? pentru c n timp se achizitioneaz foarte multe arhive, aa c e bine s le avem organizate n calculator. Acestea pot fi chiar imprite n dou, "template joomla 1.0.X" i "template joomla 1.5.X", pentru c templateurile sunt diferite pentru cele dou versiuni de Joomla!. Atenie, nu este nevoie s fie dezarhivate, nu e nevoie s fie ncarcate cu un client de FTP Joomla!, acestea se vor instala n site exact cum au fost descrcate pe computer, oferind cea mai simpl metod de instalare a unui template.

Cum poate fi schimbat grafica (template-ul) unui site

Cum schimb grafica (template-ul) unui site sau altfel spus: cum setez un template ca default n Joomla!. Dup ce s-a instalat template-ul, trebuie s schimbm pe cel setat default (cel cu care vine Joomla!), cu cel nou. E foarte simplu s facem acest lucru, nu trebuie s tim programare, HTML sau PHP, ns trebuie s fim ateni s fim logai n admin cu un cont de Super Administrator. De fapt, cam pentru orice modificare n extensii, structura, useri trebuie s fim logai ca superadmin, pentru a avea drepturi depline. Trebuie s dm dou click-uri, urmrii imaginea de mai jos:

Paii pe care-i urmm sunt: Site -> Template Manager -> Site Templates, dup care se prezint o list cu template-urile disponibile. n acea list se afl i cel pe care tocmai l-am instalat. Click stnga n dreptului lui dup care click dreapta sus pe butonul "Default".
Curs3 Page3

O s apar un V de culoare verde pe coloana Default n dreptul acelui template. Dac se d refresh n front end, o s realizm c site-ul este deja transformat iar noul template este acum vizibil n browser. Dac ne place nseamn c suntem gata, dac nu, putem alege alt template, l instalm i l setm default n acelai fel, continund aa pn suntem complet mulumii de noul design al site-ului. Pentru schimbarea unui template n Joomla! 1.5, e nevoie s urmm nite pai ajutai i de imaginea de mai jos: Extensions -> Template Manager -> click pe template i click pe Default n dreapta sus.

Cum instalm un nou template n Joomla!

Cum s instalez un nou template n site-ul meu Joomla!? Este foarte simplu s instalm un template n Joomla! Sunt numai caiva pai de urmat. 1. Se merge la Installers -> Templates -Site; 2. Browse pentru gsirea unui template Joomla! pe calculator (dac ai urmat acele intruciuni de salvare i exist deja salvat n foldere v va fi foarte uor de gsit), dac nu, trebuie cutat prin My Documents; 3. Click pe Upload File & Install; 4. Ok, este instalat; 5. Pentru a ne aduce aminte cum l setm ca template default in Joomla! Ne ntoarcem la imaginea de acum dou pagini.

Curs3

Page4

A se vedea n imagine, jos dreapta cateva informatii? media/ Writeable administrator/templates/Writeable templates/ Writeable images/stories/ Writeable Acele foldere trebuie s aib permisie de scriere pe ele, trebuie sa fie "Writeable" i colorat n verde, dac cel puin unul din ele nu are aceste caracteristici, nu se poate face instalarea i o s dea erori. Acest articol a fost scris pentru a nva ce nseamn i cum se dau drepturi de scriere pe foldere i fiiere. n Joomla! 1.5.X este mai uor de realizat deoarece avem un singur cmp unde ncrcm extensii iar sistemul va recunoate automat de ce tip este.

Curs3

Page5

Cum gsesc poziiile pentru module

Aa cum au fost prezentate cu cteva lecii mai nainte, modulele sunt aplicaii create pentru Joomla! cu ajutorul crora putem s adugam n site diverse "features" (aplicaii) n jurul contentului principal. O s relum o imagine prezentat anterior dar cu mai multe explicaii.

Curs3

Page6

Pentru a ne da seama unde le putem aduga pe grafica siteului, trebuie s vedem mai nainte dac siteul are acele poziii. Aproape toate templateurile au o diagram cu poziiile pe care le are construite, acea diagram este prezentat n imaginea de mai sus. Un exemplu prezentat de provider pe site-ul Joomla! este urmtorul.

Ca s ajungem acolo, se merge pe meniul din top: Site-> Preview-> Inline with Positions i o s apar o digram ca cea din imagine. E bine ca poziiile, dac nu sunt reinute, s le notai pentru a ti unde s aezm modulele. Urmtoarea imagine poate fi i mai concludent:

Curs3

Page7

Ca nceptor, s nu v gndii c pe un template o s gsii toate poziiile din imaginea de mai sus, ns chiar dac nu le are ele pot fi adugate. Nu este nevoie de cunotine avansate de HTML i PHP. O alt metod pentru aflarea poziiilor, fr a ne loga n site, este s tastm n browser: http://mysite.ro/index.php?tp=1 se nlocuiete mysite.ro cu numele site-ului dumneavoastr (comanda funcioneaz att pe Joomla!1.0 ct i pe Joomla!1.5), prezentndu-ne imediat poziiile pe pagina de front end a site-ului.

Ce nseamn un template Joomla?

n Joomla!, grafica unui site se schimb foarte uor cu ajutorul template-urilor. Oriunde cautai o s gsii termenii de "template, joomla templates, template-uri Joomla", pentru ceea ce d aspectul vizual al unui site. Grafica este independent de content i se adreseaz elementelor de style existente n pagin. Deci, template-ul Joomla! intervine n site asupra urmtoarelor elemente:

fonturile utilizate i culorile care apar n pagin; aezarea n pagin a poziiilor pe care instalm modulele, mai exact aezarea n pagin a tuturor elementelor incluznd componente i content;

Dup instalarea Joomla!, se poate observa c exist 2 template-uri cu care vine pachetul: madeyourweb si rhuk_solarflare_ii, aceste template-uri ne fiind foarte deosebite ca i grafic, fapt pentru care o s ne folosim de altele pentru exemplificare. Templateurile sunt instalate n folderul templates, din root-ul siteului, fiecare nou template fiind n folderul su, creat la instalare. Ca i structur, n Joomla! 1.0.x, fiecare template are cteva foldere i fiiere obligatorii:

index.php - fiier care conine codul de HTML/PHP i poate JavaScript n combinaie cu CSS-ul i imaginile din site, o s afieze grafica final a site-ului; templateDetails.xml - acest fiier conine informaiile template-ului (nume, data de creare, autorul, copyright, email-ul i site-ul creatorului, versiunea, descrierea i toate fiierele (fiiere plus imagini) coninute n template; template_thumbnail.png - imagine a template-ului pe care o putem vedea n admin, Site ->Template Manager ->Site Templates, cnd trecem cu mouse-ul peste numele template-urilor instalate; CSS/ - este un folder care conine fiierele de CSS din template (cel mai important este template_css.css). Aici o s gsim clasele din site care ne dau aspectul fonturilor utilizate (familie, dimensiune, culoare), culorile din site, diverse clase pentru div-uri, celule i multe alte clase. Este de menionat faptul c, atunci cnd cutm s schimbm ceva legat de style, aici este locul unde trebuie s cutam;

Curs3

Page8

images/ - este folderul care conine imaginile utilizate n template, imagini cu extensia .gif, .jpg, .png; aici o s gsim i logo.gif.

Cum schimbm logo-ul

Logo-ul care apare n site este de fapt o imagine care este inclus n template-ul pe care tocmai l-ai instalat. Ca s l schimbm trebuie s vedem ce imagine are i unde se afl.

n browser, aezai mouse-ul deasupra acelei imagini i dai click dreapta, o s apar un meniu cu opiuni pe vertical, dai pe View Image. n browser o s apar acea imagine i un link, de exemplu: http://localhost/test_Joomla/templates/madeyourweb/images/logo.gif asta nseamn c imaginea n cauz este logo.gif. Presupunnd c avei deja un logo personal (e bine s pstrai dimensiunile celui din template dar nu este obligatoriu, ns s-ar putea s nu se ncadreze foarte bine dac nu are acceai lungime respectiv nalime), trebuie ncrcat n site n locul celui existent. Pentru asta, e bine s ne asigurm, n primul rnd, c are aceeai extensie (.gif, .png, .jpg) i acelai nume: logo.gif, apoi instalm componenta JoomlaXplorer, cu care se pot accesa fiierele din site (din adminul siteului) dup care replace la imaginea din folderul unde este cel original. Bineneles c aceti pai se pot face i pe FTP utiliznd un client de FTP. Atenie mare la lucrul cu fiiere, un fiier din surse ters, poate compromite tot siteul. templates/madeyourweb/images/ reprezint folderele unde este locat logoul template-ului.

Curs3

Page9