In Joomla!, grafica unui site se schimba foarte usor cu ajutorul template-urilor. Oriunde cautati o sa gasiti termenii de "template, joomla templates, template-uri Joomla",pentru ceea ce da aspectul vizual al unui site. Grafica este independenta de content si se adreseaza elementelor de style existente in pagina.
Deci template-ul Joomla! intervine in site asupra urmatoarelor elemente:
fonturile utilizate si culorile care apar in pagina;
asezarea in pagina a pozitiilor pe care instalam modulele, deci in principiu asezarea in pagina a tuturor elementelor incluzand componente si content;
Dupa instalarea Joomla!, o sa vedeti ca exista 2 template cu care vine pachetul: madeyourweb si rhuk_solarflare_ii, aceste template nu sunt foarte deosebite ca si grafica, asa ca o sa folosim altele.
Template-le sunt instalate in folderul templates,din root-ul siteului, fiecare nou template fiind in folderul sau creat la instalare.
Ca si structura, in Joomla! 1.0.x, fiecare template are cateva foldere si fisiere obligatorii:
index.php - fisier care contine codul de HTML/PHP si poate JavaScript, in combinatie cu css-ul si imaginile din site o sa afiseze grafica finala a siteului;
templateDetails.xml - acest fisier contine informatiile template-ului (nume, data de creare, autorul, copyright, email-ul si siteul creatorului, versiunea, descrierea si toate fisierele (fisiere plus imagini) continute in template;
template_thumbnail.png - este o imagine a template-ului, pe care o putem vedea in admin, Site ->Template Manager ->Site Templates cand trecem cu mouse peste numele template-urilor instalate;
css/ - este un folder care contine fisierele de css din template, cel mai important este template_css.css. Aici o sa gasim clasele din site care ne dau aspectul fonturilor utilizate(familie, dimensiune, culoare), culorile din site, diverse clase pentru div-uri, celule si multe alte clase. In principiu cand cautam sa schimbam ceva legat de style aici este locul unde trebuie sa cautam. O sa explic aici cum fac eu sa gasesc repede un style utilizand Firefox;
images/ - este folderul care contine imaginile utilizate in template, imagini cu extensia .gif, .jpg, .png; aici o sa gasim si logo.gif - aici aflati cum se schimba.