Cunostinta va deschide lumea intelepciunii - Referate profesionale unice

Acasa » scoala » informatica
Elementele de baza ale unui template Joomla

Elementele de baza ale unui template Joomla

Inainte de a incepe efectiv crearea unui template Joomla trebuie sa intelegi sistemul pe care il foloseste Joomla .

Pentru intelegerea acestui concept vom folosi template-ul default/standard/implicit folosit de Joomla la o instalare "fresh": rhuk_solarflare_ii . Daca te uiti printer fisierele Joomla vei gasi un folder numit "templates", iar in interiorul lui alt folder intitulat crhuk_solarflare_ii .

Sa luam pe rand fisierele care stau la baza acestui template .

Fila index . php

-aceasta este frame-ul principal al template-ului tau . Ea contine informatiile care permit ca Joomla sa creeze layout-ul site-ului tau . Daca te uiti in sectiunea administratorului Joomla la "modules site modules" vei vedea ca fiecare modul are o pozitie, dupa cum poti vedea in imaginea de mai jos:

Cu ajutorul filei index . php se seteaza pozitiile pe care Joomla le poate folosi pentru module si pentru sectiunea principal a pentru text . Putem realize aceasta folosind ceva cod PHP, dar va voi da tot codul PHP care trebuie copiat in aceasta fila, chiar daca nu intelegeti (nu aveti nevoie efectiv sa intelegeti) ce face el . Ce trebuie sa stiti este ca el actioneaza ca o strutura pentru modulele tale .

Fila templateDetails . xml

Aceasta fila este folosita de Joomla in instalarea template-ului din Control Pannel-ul administratorului . Arata cam asa:

templateDetails . xml

<?xml version='1 . 0' encoding='iso-8859-1'?>

<name>rhuk_ solarflare_ii</name>

<authorEmail>rhuk@ jamboworks</authorEmail>

<authorUrl>https://www . jamboworks . com</authorUrl>

<description>SolarFlare II is a simple and stylish template . The clean design of this template makes it very lightweight and fast . This is a significatn upgrade for the original SolarFlare template in that is has a completely revised layout that uses an alternate box model hack that makes it easier to modify . Also a table has been introduced in the main content area that better constricts layout causing less problems with 'problematic' components . New headers and menu elements give this template a 'fresher' look . </description>

<files>

<filename>index . php</filename>

<filename>template_thumbnail . png</filename>

</files>

<filename>images /advertisement . png</filename>

<filename>images/arrow . png</filename>

<filename>images/button_bg . png</filename>

<filename>images/contenthead . png</filename>

<filename>images/indent1 . png</filename>

<filename>images/indent2 . png</filename>

<filename>images/indent3 . png</filename>

<filename>images/indent4 . png</filename>

<filename>images/header_short . jpg</filename>

<filename>images/menu_bg . png</filename>

<filename>images/powered_by . png</filename>

<filename>images/spacer . png</filename>

<filename>images/subhead_bg . png</filename>

<filename>images/title_back . png</filename>

</images>

<css>

<filename>css/template_css . css</filename>

</css>

</mosinstall>

Fila contine informatiile despre template, numele template-ului, autorul, versiunea si filele grafice asociate cu acest template .

Daca te uiti la imaginea de mai jos poti sa vezi cum foloseste Joomla informatiile din aceasta fila pentru a-ti spune mai multe despre template:

Folderul cu imagini (de obicei intitulat "images")

Dupa cum sugereaza si numele acest folder contine toate imaginile folosite de template . Vom folosi cateva imagini, si acesta este locul unde vor fi "asezate" . Marea majoritatea a imaginilor pe care le vom folosi exista deja in template-ul standard .

Fila css/template_css . css

CSS: "cascading style sheet" . Aceasta fila este folosita pentru a aplica o tema distinct template-ului . Ea seteaza practice fontul, culorile si alte elemente in template . Motivul folosirii acestei file este pentru a separa anumiti factori de alte elemente ale layout-ului documentului .

Bun . Acum inainte de orice altceva sa cream un folder unde vom stoca toate filele si fisierele template-ului nostrum . O sa il numim "template1" . Creeaza-undeva pe computerul tau .

ATENTIE: filele si numele folderelor sunt "case sensitive", asa ca se folosesc de obicei litere mici in denumirea lor . Nu folositi spatii in numele lor .

Acum dup ace am creat folderol principal al template-ului, sa downloadam celelalte file de care avem nevoie .

Intra in folderul principal Joomla

Cauta folderul "templates"

alege folderul template-ului standard: rhuk_solarflare_ii .

Selecteaza toate fisierele si folderele care le vezi in directorul template-ului standard si copiaza-le in folderul creat pe computerul tau

Asigura-te ca ai toate filele . Ar trebui sa ai urmatoarele fisiere:

. index . html

. index . php

. template_thumbnail . png

. templateDetails . xml

. images

o advertisement . png

o contenthead . png

o indent1 . png

o indent4 . png

o pdf_button . png

o rating_star_blank . png

o subhead_bg . png

o arrow . png

o emailButton . png

o indent2 . png

o index . html

o powered_by . png

o rating_star . png

o button_bg . png

o header_short . jpg

o indent3 . png

o menu_bg . png

o printButton . png

o spacer . png

. css

o editor_content . css

o template_css . css

o index . html

Toate acestea in folderul "template1" .

Daca nu ai toate imaginile listate mai sus, nu te ingrijora, datorita schimbarilor frecvente ale Joomla noile in noile versiuni poate sa difere putin setul imaginilor .

Bun . Urmatorul pas este sa cream o "casa" pentru template-ul nostru . Cu ajutorul unui program FTP ne conectam la serverul unde avem instalat Joomla, si sau mutam in folderul "templates" folderul cu template-ul nostru .

Acum trebuie sa editam filele . Vom face acest lucru cu ajutorul unui program de genul PHP Designer 2006 .

Sa deschidem fila templateDetails . xml, downloadata mai devreme . Este necesar sa editam aceasta fila pentru ca Joomla sa recunoasca noul nostru template ca fiind diferit de cel standard .

Prima linie ce trebuie editata este linia 3:

<name>rhuk_solarflare_ii</name>

Trebuie sa punem aici numele exact al folderului template-ului nostru, asa ca vom schimba aceasta linie in:

<name>template1</name>

Urmatoarea linie ce trebuie modificata este linia 4:

O vom modifica, adaugand data la care cream template-ul .

Linia 5:

Schimba acest nume cu numele tau

Liniile 7,8,9:

<authorEmail>rhuk@rockettheme . com . com</authorEmail>

<authorUrl>https://www . rockettheme . com</authorUrl>

Modifica-le:

<authorEmail>email-ul tau</authorEmail>

Urmatoarea linie este o descriere a template-ului .

<description>Un template creat dupa un tutorial standard de pe joomla . ro, avand la baza setarile implicite alte template-ului standard al Joomla </description>

Cu aceasta editare am configurat fila asa incat sa arate detaliile noastre .

Salvam fila si o suprapunem peste cea nemodificata din folderul "template1" de pe server .

Putem seta acum acest template ca default pentru site-ul nostru, asa incat sa putem urmari continuu efectele a ceea ce editam . Pentru a face acest lucru trebuie sa ne logam in sectiunea administratorului Joomla si apoi sa urmam calea: site template manager site templates . Aici ar trebui acum sa apara listat si template-ul nostrum, cu detaliile noastre . Marcheaza casuta butonul "radio" din stanga lui si da click pe butonul Default de sus din dreapta .

Odata ce am setat template-ul nostrum ca default sa mergem mai departe . Trebuie sa cream un nou layout care s ail inlocuiasca pe cel default de la rhuk_solarflare_ii .

Inainte de urmatorul pas insa trebuie sa ne lamurim anumite "concept" . Primul este cel al "modulelor" (modules) .

Modulele sunt de fapt ceea ce vede vizitatorul cand acceseaza site-ul, ele creaza interfata vizibila a site-ului Joomla . Ele preiau informatii din backend si le expun intr-o maniera formatata pe site . Majoritatea modulelor in joomla sunt optionale, asa incat poti decide pe care sa le folosesti si pe care nu .

Meniurile . System vine cu un set dinamic de meniuri contruit din sectiunea de administrator . Poti decide unde sa apara fiecare link pe care il creezi . Poti sa il ai in "main", "top", "other" sau "user menu" . Meniurile (linkurile) sunt create dinamic, ceea ce inseamna ca ele sunt automat adaugate la meniul linkurilor, imediat ce le-ai creat, si vor fi vizibile pe fiecare pagina . Ordinea linkurilor in meniuri poate fi setata din sectiunea administratorului . De asemenea meniurile pot fi setate asa incat sa apare ori pe toate paginile site-ului, ori doar pe anumite pagini .

In total sunt 4 . Le vom analiza scurt pe fiecare:

Meniul principal (Main Menu) al site-ului . De obicei in pozitie vertical, ceea ce inseamna ca potriveste mai bine in partea dreapta sau stanga a site-ului tau . Default este in partea stanga .

Meniul de sus (Top Menu)

Top Menu este optional, default in pozitie orizontala, si pozitionarea sa poate fi de asemenea controlata din sectiunea administratorului . Implicit el este asezat in "fruntea" site-ului .

Meniul Utilizatorului (User Menu)

Apare vizibil doar utilizatorilor inregistrati si logati, si default este asezat in pozitie vertical, in partea din stanga .

Other Menu

Este un meniu auxiliary pentru linkurile care nu le vrei in niciunul din meniurile amintite mai sus . Optional, si vertical ca asezare .

Pathway

Este o cale (un link) care arata vizitatorilor unde se afla ei pe site, intr-un moment anume (vezi imaginea), in raport cu prima pagina a site-ului (home,index . php . Este orizontala ca aparenta si latimea ei poate sa varieze, insa este de comun accord acceptat ca ea trebuie sa aiba o latime sufficient de mare ca sa poata sa arate "caile" mai lungi .

Login (Casuta de logare)

Casuta de logare este optional, si daca site-ul tau nu necesita o inregistrare a utilizatorilor poti sa treci peste ea, poti sa o omiti . Default casuta de logare apare in partea stanga a site-ului . Titlul ei poate fi setat sa fie vizibil sau nu

Search Box (casuta de cautare)

Default casuta de cautare este plasata in acelasi rand ca si Top Menu . Pozitia ei marimea ei pot fi insa, oricum, schimbate .

Main Content

Continutul principa nu este, evident, optional, si reprezinta practice locul / regiunea unde este afisat continutul site-ului tau . Default este coloana de mijloc a site-ului . Pozitia si marimea acestei regiuni poate fi schimbata dar exista anumite limite minime de care ar trebui sa tii seama . Continutul este adaugat in mod dinamic in aceasta regiune pe masura ce vizitatorii tai acceseaza un link sau altul .

Banners (Banerele)

Modulul banerelor iti permite sa adaugi banere ca reclama pe site-ul tau, modulul este optional, si are un standar de 468x60 . Poti seta proprietarul, URL-ul de redirectionare si numarul de accesari pe fiecare banner . Sistemul poate sa alterneze banerele, sa le afiseze alternative .

Newsflash

Default acest modul apare in partea dreapta a logo-ului din header . Acest modul afiseaza in mod automat elemente din categoriile pe care le alegi, precum "latest news" (ultimele stiri), FAQ, etc . Poate sa afiseze elemente din orice Categorie de Continut (content category) pe care ai creat-o . Este optional .

Popular

Default aceasta sectiune vine dupa modulul ultimelor noutati (latest news module), si deasupra zonei continutului principal (main content) . El afiseaza linkurile paginilor cu cele mai multe afisari, accesari .

Syndicate

Acest modul iti permite sa plasezi anumite linkuri pe site-ul tau pe care utilizatorii le pot folosi pentru un "xml feed" al site-ului tau in cititorul lor de stiri . Este optional si apre implicit in coloana din stanga .

Cine este on-line (Who's Online)

Modulul apare default in partea dreapta (coloana dreapta) a site-ului si afiseaza numarul vizitatorilor sau membrilor inregistrati prezenti pe site la un moment dat . Este optional .

Poll's

Acest modul iti permite sa creezi sondaje printer vizitatorii site-ului tau si apare default pe prima pagina a site-ului, in coloana din dreapta . Este optional .

Related Items

Iti permite sa afisezi linkuri ale unor pagini similar, cu keywords identice in meta . Default nu este publicata dar este cel mai bine plasata in coloana din stanga sau din dreapta .

Random image (Imagine aleatorie)

Afiseaza aleatoriu imaginile dintr-un folder .

Latest News (Ultimele stiri, noutati)

Default aceasta regiune este afisata langa modulul "Popular" si deasupra continutului principal . Este optionala . Expune linkurile paginilor din categoria ultimelor noutati .

Layout

Layout-ul Joomla determina unde pot fi plasate in pagina ta fiecare din modulele de mai sus .

Sa vedem cum ar arata o pagina standard si unde sunt principalele pozitii:

Dupa cum observe unele module potrivesc mai bine in anumite zone ale paginii . Cheia unui layout profi este sa decizi exact de care module ai nevoie pentru site-ul tau . Apoi poti crea regiunile in pagina .

Un layout nu trebuie sa aiba obligatoriu 3 coloane . Poti sa ai la fel de bine doar 2, sau chiar una . Site-ul are nevoie de un modul pentru meniuri (linkuri) si modulul pentru continut . Toate celelalte sunt optionale .

Pozitiile in pagina sunt predefinite ca denumire:

Layout-ul pe care il alegi decide ce module poti folsi si unde sunt ele pozitionate .

Schitarea layout-ului

Pentru acest template de inceput vom folsi doar o singura coloana . Chiar daca acest lucru nu corespune viziunii tale, ideea este sa iti perfectionezi abilitatea de a crea layout-ul care il vrei, si nu acela de a oferi un template "perfect" .

Mai intai trebuie sa facem o lista cu modulele care vreau sa le folosesc pe site-ul meu . De exemplu:

. Top menu

. Search box

. User login

. Latest news

. Popular

. Pathway

. Main content

Cam asa ar arata schita layout-ului:

Dupa cum observe sunt doua parti extra in aceasta schita: "footer" si un alt bloc, mai sus, numit "optional" . "Footer-ul" este o pate implicita pentru orice template joomla, si foarte necesara .

Blocul "optional" ne permite o anumita flexibilitate in adaugarea de noi module daca avem nevoie mai tarziu .

Odata ce avem schita, trebuie sa contruim un tabel HTML care sa functioneze ca un container pentru aceste parti .

Putem sa face acest lucru cu PHP Designer 2006 .

Daca deschizi programul vei vedea ceva asemanator figurii de mai sus . Click pe HTML in sectiunea New Document . Ti se va deschide o pagina alba, unde putem "confectiona" codul nostru .

Inainte ca sa adaugam orice taguri Joomla trebuie sa adaugam codul obligatoriu, de baza, HTML, si sa cream tabelele ce vor "sustine" layout-ul nostru .

Primul lucru ce trebuie adaugat este tag-ul "joomla head" . Acesta este extreme de important si el seteaza elementele de baza ale paginii intr-un template Joomla . Tag-ul "joomla head" arata cam asa:

Joomla Head Tag

<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed . ' );?>

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1 . 0 Transitional//EN' 'https://www . w3 . org/TR/xhtml1/DTD/xhtml1-transitional . dtd'>

<head>

<?php if ( $my->id ) ?>

<?php mosShowHead(); ?>

<?php echo '<link rel='stylesheet' href='$GLOBALS[mosConfig_live_site] /templates/ $GLOBALS[cur_template] /css/template_css . css' type='text/css'/>' ; ?><?php echo '<link rel='shortcut icon' href='$GLOBALS[mosConfig_live_site] /images/favicon . ico' />' ; ?>

</head>

<body>

La acest moment nu ai nevoie sa stii ce face exact acest cod . Trebuie doar sa te asigur ca il plasezi in top-ul paginii .

Urmatorul pas este sa adaugam in codul HTML tag-urile de sfarsit . Aceastea ar trebui sa fie intodeauna ultimul lucru scris pe pagina ta, continutul fiind scris intre ele si tagurile head . Tagurile de sfarsit arata asa:

Joomla End Tag

</body>

</html>

Pagina toata compilata pana acum ar trebui deci sa fie urmatoarea:

Inainte sa mergem mai departe, sa salvam aceasta pagina . O vom salva in folderul template-ului nostrum: "template1" si o vom suprapune peste index . php care este deja acolo . Deci vom numi fila index . php .

Acum trebuie sa adaugam tabelul de care avem nevoie . De fapt vom adauga mai multe tabele unul in interiorul altuia .

Primul tabel pe care il cream este "containerul" principal . El va fi structurat pe o singura coloana si va contine suficiente randuri ca sa mentina elementele pe care ni le-am propus in schita noastra de mai sus . Deci vom avea nevoie de randuri pentru:

. Site name

. Top menu

. user login - popular - latest news

. Pathway

. Content

. Optional

. Footer

Aceasta inseamna ca avem nevoie de un tabel cu o singura coloana si 7 randuri . PHP Designer 2006 ne ajuta sa realizam usor acest tabel . In randul de sus cu inconite dam click pe acest buton: , care este inconita pentru crearea si inserarea unui tabel . Asa ca, asigura-te ca ai cursorul intre cele doua taguri <body>

si da click pe butonul de mai sus . Ti se va deschide un pop-up . Ceva de genu:

Ajusteaza setarila la ce dorim noi: 7 randuri si 1 coloana . Apoi da click pe butonul Properties si seteaza latimea (width) la 700, pentru ca dorim ca latimea tabelului nostru sa fie de 700 de px . Seteaza de asemenea cellpadding si cellspacing la 0, si allege aliniamentul "center" . Ar trebui sa arate asa:

Click pe OK .

Ce ar trebui sa vezi pe pagina ta este aceasta:

Poti vedea acum randurile in HTML si noi le vom folosi ca sustinatori pentru tagurile Joomla . Primul rand cu care vom incepe lucrul este randul 13 din grafica de mai sus, care reprezinta de fapt primul rand in tabelul nostru, si acolo va apare numele site-ului ce il vom crea . Din fericire Joomla are un tag pentru inserarea automata a numelui site-ului in template-ul nostrum . Tagul arata asa:

Joomla Site Name Tag

<?php echo $mosConfig_sitename; ?>

Punem acest tag intre cele doua taguri <td> de pe randul 13 . Ar trebui sa arate asa:

Acest cod va adauga automat numele site-ului din joomla in pagina web .

Acum trebuie sa adaugam codul pentru "top menu" (meniul de sus, sau linkurile de navigare de sus) si "search box" (casuta de cautare) . Deoarece acestea necesita doua campuri diferite, vom adauga un tabel cu doua coloane in interiorul randului urmator din tabelul mare, asa incat sa putem formata lyout-ul mai usor .

Ne aflam deci pe randul 16 in PHP Designer Web . Plaseaza cursorul in interiorul celor doua taguri <td> dupa cum vezi in imaginea de mai jos:

Acum click pe iconita pentru adaugarea unui tabel: . De data aceasta vrem sa adaugam un tabel cu 1 rand si doua coloane; de asemenea vrem ca acest tabel sa fie lat 100%, pentru a umple total randul tabelului mare de 700 de px . De asemenea, un alt motiv pentru care am setat latimea de mai sus 100% este ca atunci cand dorim sa schimbam latimea paginii principale tot ce trebuie sa facem este sa ajustam latimea tabelului principal de 700 si toate celelalte se vor "mula" automat dupa noua dimensiune .

Dupa cum poti vedea mai sus setam "width" (latimea) la 100 si selectam procentajul % . de asemenea setam cellpadding si cellspacing la 0 . Click OK .

Pagina ar trebui sa arate astfel:

Noul tabel a fost adaugat si poate fi vazut ocupand randurile 16 pana la 21 . Randurile in care vom pune tagurile noastre urmatoare sunt 18 si 19 . Vom folosi tagul joomla "user" datorita flexibilitatii sale (joomla poate folosi pana la 9 astfel de taguri "user") .

Joomla User Tag

<?php mosLoadModules ( 'user1' ); ?>

Numarul 1 de dupa "user" poate fi schimbat pana la 9, pentru a crea 9 portiuni . Vom folosi "user1" si "user2" pentru "top menu" si "search box", asa incat pagina noastra ar trebui sa arate asa:

Urmatorul rand in tabelul mare trebuie sa sustina trei elemente : "login form" (casuta de logare), "popular menu" (intrari populare) si "latest news" . Vom lucra acum pe randul 24 si vom crea un alt tabel, asa incat asigura-te ca ai cursorul plasat intre cele doua <td> de pe randul 24 .

Click pe iconita pentru crearea de tabele De data aceasta avem nevoie de un tabel cu latimea de 100%, cu un rand si trei coloane, asa ca ar trebui sa arate astfel:

Click pe ok si tabelul este creat . Va ocupa liniile de la 24 pana la 30 dupa cum este aratat mai jos:

Acum trebuie sa adaugam tagurile pentru cele trei module pentru a fi incluse in tabel: "login form", "popular" si "latest news" . Ele vor merge pe liniile 26, 27 si 28 . Pentru acestea folosim tottagul "user" dar crestem numerele identificatoare . Deci vom folosi "user3", "user4" si "user5" dupa cum urmeaza:

Bun, acum cele trei taguri joomla sunt in locul lor .

Mai trebuie sa adaugam cateva taguri pentru "pathway", "main body" (continutul principal) si "footer" (subsolul paginii, care de obicei contine drepturile de copyright) . Acestea sunt taguri unice in Joomla .

Vom lucra cu randurile 33, 36, 39 si 42 . Randul sau linia 33 este pentru "pathway", 36 este pentru "main body", 39 pentru tagul "optional", si 42 pentru "footer" .

Asa ar arata adaugate:

Acum avem toate tagurile necesare, asa ca salvam fila . Atentie: ea trebuie salvata ca index . php in folderul "template1" pe PC-ul tau . Acum trebuie sa o uploadam, sa ajustam pozitia modulelor in Joomla Administrator sis a vedem cum arata . Vom uploada fila cu FTP, si o vom plasa in folderul "templates/ template1" in directorul site-ului joomla .

Bun, odata uploadata fila la locatia precizata mai sus sa mergem in panoul de Administrator Joomla sis a ajustam pozitia modulelor . Deci accesam "modules site modules" si ar trebui sa vedem o lista de genul:

Trebuie sa schimbam pozitia modulelor . Sa incepem cu "top menu" . Marcheaza casuta din dreptul modulului "top menu" si da click pe butonul "edit" din partea dreapta sus . Arata asa:

Odata facut acest lucru vei vedea o pagina ca cea de mai jos:

Din lista "drop down" din dreptul cuvantului Position selectam "user 1" si apoi click pe "save" in drepata sus . TRebuie sa alegem pozitia si pentru celelalte module de care avem nevoie dupa cum urmeaza:

. Search - user 2

. Login form - si de asemenea selecteaza 'All' in partea dreapta la items/links

. Popular - user 4 si de asemenea selecteaza 'All' in partea dreapta la items/links

. Latest news - user 5 si de asemenea selecteaza 'All' in partea dreapta la items/links

Sa lasam deocamdata "user 6" deocamdata necompletat . Ceea ce trebuie sa facem acum este sa ne asigura ca nu se afla alte module in pozitiile pe care le folosim noi . Odata ce am facut aceste schimbari sa vedem cu arata acum site-ul .

Ar trebui sa vedem in aceasta faza ceva de genul imaginii de mai jos, si care nu arata prea dragut, dar nu te ingrijora inca .

Acum trebuie sa facem unele ajustari pentru a arata mai bine .

Primul lucru pe care il remarci mai sus este ca modulul "popular" si "latest news" nu sunt aliniate in topul tabelului in care sunt inserate . Asa ca sa vedem cum rezolvam aceasta deficient .

Dupa cum vezi din imaginea de mai sus am adaugat aceasta:
valign="top"

In interiorul tagurilor <td> pe liniile 26,27 si 28 . Aceasta mica modificare va alinia modulele si le va aseza in topul tabelului . Salvam fila index . php si o uploadam . Sa vedem cum arata site-ul acum:

Deocamdata lasam index . php si ne mutam la tema site-ului . Ne vom intoarce insa la aceasta fila asa ca lasati-o deschisa in PHP designer 2006 . In urmatoarea sectiune vom adauga propriile noastre culori si vom face site-ul sa arate mai placut .

Ajustarea culorilor in Style Sheet

Style Sheet este o fila externa in care sunt precizate culorile si setarile fontului, si alte caracteristici ce tin de design . Anumite referinte la aceste file in paginile php fac ca toate aceste setari sa se aplice automat in paginile respective, fara a fi necesar sa precizezi in fiecare pagina in parte setarile legate de culori, font, etc .

Cu ajutorul acestei file putem sa facem site-ul nostru sa arate cum vrem . Chiar daca nu folosim deloc grafica tot avem nevoie de o schema de culori . Trebuie sa hotaram culorile pentru linkuri, bordere (margini), background (fundal), etc .

Inainte sa ne apucam efectiv de setarile din Style Sheet sa alegem o schema de culori . O schema de culori reprezinta o suita de culori care potrivesc , si intra in rezonanta placut . E VITAL pentru site-ul tau sa gasesti culorile potrivite . Daca nu stii ce culori sa folosesti poti sa te folosesti de site-ul de mai jos care iti va inlesni mult munca:

Colour Scheme generator

https://wellstyled . com/tools/colorscheme2/index-en . html

Pentru acest proiect al nostrum vom folosi o tema de un albastru monocrom plus nunante de orange .

Aceste culori le vom folosi (desigur ca tu poti sa alegi ce culori vrei)

Nu le vom folosi pe toate, doar pe cele care potrivesc exact la ce vrem noi sa facem .

Primul pas in aceasta sectiune il facem deschizand fila style sheet, numita "template_css . css" si care se gaseste in folderul "css" din folderul "template1" de pe PC-ul tau .

Deschide-o folosind PHP Designer 2006 . Daca derulezi pagina pana jos vei vedea ca exista cam 634 de linii in aceasta fila . Majoritatea nu le vom folosi, dar vom adauga ceva stiluri noi la fila, si le vom edit ape altele . Ar trebui de asemenea sat ii fila "index . php" deschisa , pentru ca anumite schimbari pe care le facem necesita de asemenea mici modificari si in aceasta fila .

Numele site-ului

Primul lucru care trebuie sa ne preocupe este numele site-ului .

Deocamdata titlul site-ului este ridicol de mic . Trebuie sa stii ca motoarele de cautare "adora" textul header (cuprins de obicei intre taguri H1 sau H2 . E posibil ca site-ul tau sa apara listat in aceste motoare cu acel titlu .

Al doilea lucru pe care il vom face este sa "ingradim" ( sa adaugam un "frame") la meniul de sub numele site-ului, ca sa nu atarne chiar asa acolo . Ar fi de asemenea frumos sa lasam putin spatiu intre topul paginii si numele site-ului . Ar arata mai bine .

Ce e bine e ca putem face toate astea din style sheet . Dar inainte trebuie sa marim numele site-lui, asa ca il vom incadra intre taguri H1 . Asa ca sa ne intoarcem scurt in index . php si sa schimbam linia 13, care arata ca In imaginea de mai jos

Si sa o modificam astfel:

Dupa cum poti observa am adaugat <h1> inainte de tagul Joomla pentru numele site-ului, si </h1> dupa el (tagul de inchidere a formatarii) . Daca uitam sa inchidem tagul intreaga pagina va aparea formatata cu H1 .

Sa salvam pagina si sa o uploadam . Vei vedea ca numele site-ului a devenit mai mare, si implic site-ul tau a capatat o oarecare personalitate prin asta . Dar mai sunt inca multe de facut . Pentru a realiza si celelalte dorinte ale noastre trebuie sa adaugam ceva cod nou la style sheet .

Mergi inapoi la PHP Designer 2006 si implicit la template_css . css . Deruleaza pagina pana jos . Ce vrem sa facem este sa cream un stil pentru tagurile H1 care formateaza titlul site-ului . Deci ar trebui sa pe la linia 634 unde ar trebui sa vezi aceasta:

span . article_seperator

O sa adaugam un mic comentariu unde inseram ceva nou ca sa stim unde modificam ceva . Textul cuprins intre /* si */ nu este citit de browser si ne va fi noua folositor cand vrem sa reeditam site-urile create .

/*aici dedesubt am adaugat tagurile noaste */

Adauga aceasta dedesubtul caracterului . Mai jos adaugam codul nostru . Acesta il vrem asa:
h1

Sa luam fiecare linie in parte din acest cod de formatare ca sa avem o idée a ceea ce face .

font-size: aceasta linie precizeaza marimea textului formatat cu H1

font-weight: seteaza fontul ca bold (ingrosat)

margin-top: aceaasta seteaza o margine de 20 de pixeli in afara regiunii fontului

Margin-bottom: seteaza o margine de 0 pixeli in afara regiunii fontului, dedesubt .

Border-bottom: acesta creaza un border de 7 pixeli de-a lungul partii de jos a fontului si seteaza culoarea acestui border .

Padding-bottom: acestea seteaza distanta dintre text si boder .

Copiaza si insereaza acest cod in template_css . css apoi salveaza fila si uploadeaz-o in /templates/template1/css/ . O vei suprapune peste fila care exista deja acolo cu acelasi nume . Acceseaza pagina site-ului in browserul tau si eventual da un refresh la pagina (Ctrl+F5) daca e deja deschisa . Pagina ta ar trebui sa arate cam asa dupa noile formatari:

Incepe sa ia forma, nu? Numele site-ului arata mai bine, exista o distant intre el si topul paginii, si borderul realizeaza un frame frumos pentru meniul de dedesubt . Simte-te liber sa adaugi propriile tale modificari, poti schimba culorile, marimea fontului, padding, si orice mai vrei .

Mai multe despre formatarile in css poti afla in google, sau accesnd pagini de genul https://www . w3schools . com/css/default . asp .

Acum sa ne uitam la "top menu" . Top menu este reprezentat de meniul orizontal ce se afla sub numele site-ului . Ar fi cateva modificari de facut la el . Poti observa ca este o distanta de 2 pixeli intre boderul/backgroundul fiecarui element al meniului si parrtea de jos a borderului de sub numele site-ului . Ar fi mai frumos daca acestea s-ar atinge, sis a parca ca si cum fiecare link ar iesi din acel boder mai gros de sub titlu . Trebuie sa facem asa incat sa se schimbe culoarea de fundal a meniurilor si culoarea linkurilor cand trecem cu mouse-ul pe deasupra . In sfarsit, am vrea sa mai adaugam ceva spatiu alb, gol intre meniu si urmatorul element, de dedesubt, in pagina .

Sa incepem .

Deschidem template_css . css si index . php in PHP Designer 2006 . Prima actiune este sa indepartam acel spatiu alb dintre meniu si partea de jos a boderului de sub numele site-ului . Daca folosesti Internet Explorer nu vei vedea acel spatiu, el apare vizibil doar in Firefox (ca un principiu de baza tine minte sa faci site-ul tau sa arate frumos in majoritatea browserelor mari, populare folosite pe net: internet explorer, firefox, opera sau netscape) .

Primul pas pentru implinirea acestui scop il vom face in index . php . Dupa cum ne amintim tabelul in care se gaseste "top menu" si "search box" are doua coloane . Elementele din tabel sunt plasate automat in centru (vertical, deci "middle"), si noi vrem sa le aliniem in top (chiar sus in tabel) . Vom face deci o mica midificare la tagul <td> din aceasta coloana . Cauta linia 18 si adauga in interiorul tagului <td>

valign="top"

Ar trebui sa arate acum asa:

Salveaza index . php si uploadeaz-o in folderul "template1" care este la randul lui in folderul "templates" .

Acum vom edita template_css . css si trebuie sa gasim linia 328

Ce trebuie sa facem este sa anulam ("comment out") linia 328, are se refera la inaltimea liniei . Vom folosi semnele /* la inceputul liniei si */ la sfarsitul liniei . Ar trebui sa arate asa:

Daca vrei sa verifici si sa te asiguri ca functioneaza bine salveaza si uploadeaza template_css . css .

Acum trebuie sa schimbam culoarea cand trecem cu mouseul peste link si borderul dintre fiecare element link din meniu, asa ca mergi pana la linia 96 in template_css . css . Arata asa:

Schimba codul pentru background la #0055B3

Acum cauta linia 78 si schimba culoare la border-right in #0055B3

Salveaza fila si uploadeaz-o pentru a verifica daca modificarile sunt corecte . Daca vrei sa faci mai departe modificari si schimbari la acest meniu, trebuie sa ai in vedere:

. ul#mainlevel-nav

. ul#mainlevel-nav li

. ul#mainlevel-nav li a

. ul#mainlevel-nav li a:hover

Poti sa schimbi marimea fontului, culorile, stilul .

Ajustarea finala ar fi reprezentata de adaugarea unui spatiu alb dedesubt . Pentru aceasta avem nevoie sa editam index . php si template_css . css . sa modificam index . php mai intai . Mergi la linia 18, unde avem tagul Joomla pentru top menu, si ceea ce vom face este sa incadram tagul cu un tag <div> . Ar trebui sa arate asa:

Dupa cum vezi am pus acestea inainte de tagul php Joomla:

Adauga tagul de inchidere dupa tagul joomla:

</div>

Aceasta modificare ii spune browserului sa aplice acea clasa de stil la tot ce se gaseste intre tagurile respective . Acum trebuie sa setam aceasta clasa de stil in interiorul style sheet, asa ca vom edita template_css . css si vom merge chiar la subsolul paginii, unde vom adauga noua clasa de stil dupa setarile pentru H1, pe care le-am facut mai devreme .

Vom adauga aceasta:

. duftopmenu

Acest cod va seta o margine de 50 de pixeli dedesubtul meniului . Avem deci acest cod:

Salveaza index . php si template_css . css si uploadeaza-le in folderul "template1" . Atentie: index . php merge in "template1" si template_css . css merge in template1/css .

Da un refresh la pagina site-ului si vezi cum arata .

Acum ne vom ocupa de "search box" . Sarcina noastra este sa aducem "search box" in dreapta . O vom muta in top-ul tabelului care o contine (ca si top menu), cu 2 pixeli mai jos de borderul de sub numele site-ului . Ii vom schimba de asemenea culoarea borderului ca sa potriveasca schemei noastre .

Sa incepem .

Mai intai sa o aliniem in top . Editam linia 19 din index . php si adaugam tagurile de aliniere in top, intre tagurile pentru celulele tabelului: <td> .

valign="top"

Codul va arata deci asa:

Salveava index . php si uploadeaz-o pe site, in folderul "template1" . Acum editam template_css . css si adaugam la subsolul paginii:

. search

Acest cod va muta "search box" in dreapta si va adauga o mica distanta de 2 pixeli deasupra . Codul ar trebui sa arate acum asa:

Salveaza fila si uploadeaz-o in /templates/template1/css/

Acum vom schimba culorile borderului folosit de "search box" asa incat ele sa potriveasca schemei noastre de culori . Pentru aceasta trebuie sa editam linia 402 unde vom schimba culoarea in #0055B3, asa incat codul va fi:

Salveaza fila si uploadeaz-o . Acum culorile ar trebui sa potriveasca . De asemenea si "login form" si-a schimbat culoarea in albastru (deoarece am editat valoarea input in css) .

Login box, Popular, Latest News

Va trebui sa facem unele schimbari majore in stil pentru aceste regiuni . Imaginea de background din spatele titlurilor trebuie sa dispara asa incat sa potriveasca stitlului nostru .

Sa incepem cu randul "header" (randul titlului) al fiecarei coloane . In present el foloseste o imagine de fundal pe care o vom indeparta, si vom lasa in schimb un border de un singur pixel dedesubtul fiecarui titlu . Vom edita asadar template_css . css la linia 465, si vom anula stilul "background", vom schimba culoarea textului in #0055B3, vom scoate spatial din stanga si vom schimba fontul la 14 pixeli si in final vom adauga borderul de dedesubt . Sectiunea arata acum asa:

Apoi trebuie sa modificam hiperlinkurile si a le schimbam culoarea . Vom edita linia 336 si vom adauga culoarea #0055B3 . Trebuie de asemenea sa le schimbam culoarea pentru cand se pozitioneaza mouse-ul deasupra lor, si vom seta aceasta culoare la orange (#FF8000) . In plus vom sublinia linkurile la pozitionarea mouse-lui deasupra lor .

Ar trebui deci sa avem acest cod:

Mai departe vom preciza in foaia de stil adresele pentru imaginile folosite ca puncte inaintea linkurilor din modulele ce le tratam aici:

Mai avem de lucru cu casuta de logare, si in special cu butonul de logare . Sa mergem la linia 386 in template_css . css . Aceasta fila seteaza si atributele pentru buton si vom schimba codul dupa cum vezi:

Mai intai am "dezactivat" liniile de la 397 pana la 404, folosind /* si */ apoi am schimbat culoarea stilului in #0055B3 si am adaugat aceste 5 randuri pentru ca crea un buton cu un background alb si un border albastru de un pixel .

border-top: 1px solid #0055B3;

border-right: 1px solid #0055B3;

border-left: 1px solid #0055B3;

border-bottom: 1px solid #0055B3;

background: #fff;

De asemenea am schimbat marginea la 2 pixeli .

Am obtinut un buton ca acesta . Mai trebuie doar sa adaugam ceva spatiu alb dedesubtul lui . Pentru aceasta incadram tagul Joomla intre tagurile <div> si vom crea un nou stil la subsolul paginii in pagina noastra . css

Gaseste linia 26 in index . php :

Trebuie sa schimba codul in ce urmeaza:

Am adaugat deci inainte de tag: <div class='duflogin'> si dupa </div> .

Acum mergi in template_css . css si chiar la subsolul paginii adauga asta:
. duflogin

Acum codul ar trebui sa arate asa:

Salveaza ambele file si uploadeaza-le pe server .

Pathway

Acum ne vom ocupa de Pathway . Dupa cum stim Pathway marcheaza pozitia userului in site, in raport cu pagina principala . Trebuie sa facem cateva schimbari ca aceasta sa potriveasca in designul nostrum . Mai intai trebuie sa editam index . php si sa incadram tagul Joomla intre tagurile <div> .

Mergi la linia 33 si schimba

in aceasta:
<td><div id='pathway_text'><?php mosPathWay(); ?></div></td>

In template_css . css schimba stilul care deja exista pentru pathway . Il vei gasi incepand cu linia 35 . Schimba-l in:

Am schimbat deci "border" in "border-bootom" in linia 42 . Am adaugat liniile 44 si 45 pentru a schimba dimensiunea fontului si culoarea . Salveaza index . php si template_css . css si uploadeaza-le pe server .

Aproape am terminat, mai trebuie doar sa ne ocupam putin de regiunea "main body" .

Regiunea "main body"

Aceasta regiune "poarta" continutul site-ului nostru .

Inainte de toate sa sa schimbam titlul care nu potriveste cu designul nostru . Schimba linia 434 in template_css . css sa arate asa:

Am schimbat de asemenea si culoarea in linia 437 . #FF8000 este codul pentru orange . De asemenea vom schimba culoarea pentru fundalul titlului (inca avem imaginea gri ca fundal) . Asa ca vom modifica linia 417:

Trebuie ajustat si butonul "back" care apare pe fiecare pagina din sectiunile site-ului . Schimbam linia 265:

Mai trebuie schimbate linkurile de navigare pentru noutati si alte continuturi dinamice . Gasim codul ce seteaza acest lucru la linia 280 si il vom schimba asa:

Vom mai schimba tabelul pentru "contents heading" . Aceasta este pe linia 554 si este numit table . contenttoc . Il adaptam dupa cum urmeaza:

Vom schimba de asemenea culoarea ce in inconjoara aceste minitabele de continut, la #0055B3 . Gasim codul correspondent pe linia 543, si il schimbam dupa cum urmeaza:

Salveaza fila si uploadeaz-o pe server . Acum toate culorile potrivesc stilului pe care il vrem . Avem un design simplu, elegant, fara grafice . Dar mai mult decat atat tu ai invatat o gramada de lucruri despre cum functioneaza un template Joomla .

Mai este insa un element de setat, si mai multe lucruri de stiut .

Mai intai elementul de setat: "user menu" . Nu l-am pus nicaieri in designul nostru si daca avem o casuta de logare avem nevoie si de meniul utilizatorului .

Logheaza-te in sectiunea administratorului mergi la "modules site modules" si selecteaza de acolo "user menu", si apoi da click pe Edit . TRebuie sa dezactivezi optiunea "show title" sis a il expui in pozitia "user 3": il va aseza in aceasi casuta ca si "login form", dar va fi vizibil doar cand utilizatorul se logheaza .

Click pe butonul de salvaresi asigura-te ca modulele sunt pozitionate ca in imaginea de mai jos:

Daca te loghezi ca utilizator in site ar trebui sa vezi:

Trebuie sa reparam aceste diferente de stil . Deschide template_css . css si gaseste linia 567 si schimba codul dupa cum urmeaza:

Am dezactivat deci liniile 568, 569, 570, 577, 578, 579 si 584 . Am schimbat apoi culoarea linkurilor in albastru, si orange la hover .

Rezultatul final:

Schimbarile pe care le-am facut se vor aplica de asemenea la "main menu" si "other menu" .

In final sa scapam de acele imagini email, PDF si print care vin cu template-ul standard . Daca le stergi vor fi inlocuite cu altele mai frumoase: Deci mergi pe server la "templates template1 images" si sterge imaginile:

. emailButton . png

. pdf_button . png

. printButton . png

Sterge-le si din folderul "template1" de pe PC-ul tau .

Uploadeaza template_css . css inapoi pe server si verifica site-ul .

Sectiunea "Optional" .

Daca iti aduci aminte am pus si tagul "optional" in layout-ul nostru, in partea de jos a template-ului, chiar deasupra la "footer" . Motivul a fost sa ne pastram un loc pentru eventuale elemente suplimentare, dar de asemenea sa vedem cum putem sa cream sis a configuram un modul standard care contine propriul nostru text .

Mai intai sa vedem cum creemun modul standard . Poti sa faci acest lucru din panoul tau de administrator . Logheaza-te ca administrator si mergi la modules site modules . Click pe butonul "New" din dreapta sus: . Cand vei face asta ti se afisa un formular de completat . Configureaza-l sa arate asa:

Am numit deci modulul "regiunea Optional" . Am setat "show title" la "no" si am pozitionat-o la "user6", cu optiunea de publicare activata . Acum mergi mai jos in sectiunea pentru text si adauga textul care il doresti:

Acest text va aprea afisat in sectiunea "optional" (vezi pozitiile modulelor noastre discutate mai sus), care este chiar deasupra locului unde apar informatiile legate de copyright (footer) . Pentru a arata mai bine si acest modul "optional" ar trebui sa ii adaugam un border albastru, si sa il aliniem putin . Deci modificam linia 39 din index . php si o facem sa arate asa:

Am incadrat tagul Joomla intre <div class='dufoptional'> si </div> . acum vom crea si stilul pentru acel class "dufoptional" . Adaugam la subsolul paginii css codul:
. dufoptional

Ar trebui sa avem acum:

Am adaugat dupa cum vezi un border albastru, ceva spatiu alb deasupra si dedesubt si ceva padding in interior pentru textul pe care l-am fi inserat .

TEMPLATE-UL TAU ESTE GATA! Mai trebuie doar sa il arhivezi .

Validare W3C

Trebuie sa verificam daca template-ul nostru este valid W3C . Accesam pagina https://validator . w3 . org si inseram adresa complete a site-ului nostrum in casuta de acolo:

Vei gasi aceasta eroare:

PHP Designer 2006 a "scris" "center" cu litere mari, asa ca va trebui sa schimbam in litere mici, si sa revalidam pagina . Acum pagina ar trebui sa fie valida V3C XHTML Transitional .

Bun . Sa revenim la arhivarea template-ului . Daca il arhivam vor putea si altii sa il instaleze direct din panoul lor de administrator . Ai nevoie de o aplicatie (program) WIN ZIP sau WinRar . Inainte insa sa trecem la arhivarea efectiva a template-ului trebuie sa facem cateva ultime ajustari in templateDetails . xml, deoarece aceasta fila inca mai contine informatii despre cateva imagini pe care noi nu le mai folosim . Deschide fila cu PHP Designer 2006 si sterge urmatoarele linii:
<filename>images/arrow . png</filename>

<filename>images/button_bg . png</filename>

<filename>images/contenthead . png</filename>

<filename>images/header_short . jpg</filename>

<filename>images/menu_bg . png</filename>

<filename>images/powered_by . png</filename>

<filename>images/spacer . png</filename>

<filename>images/subhead_bg . png</filename>

<filename>images/title_back . png</filename>

Salveaza fila . Avem nevoie si de un screenshot al template-ului nostru care sa il suprapunem peste cel care exista inainte: template_thunmbnail . png . Fa deci un screenshot si salveaza-l peste cel vechi in folderul template1 .

Urmatorul pas: verifica foderul template1 . Ar trebui sa contina filele:

Sa vedem daca avem filele in css:

. si toate imaginile in folderul "images":

Daca toate imaginile sunt la locul lor suntem gata sa arhivam template-ul .

Deschide WIN ZIP:

Click pe "Next" si selecteaza "create new zip file":

Alege folderul cu template-ul de pe computer, si click pe "Zip Now" . Odata arhivat putem sa instalam template-ul ca orice template joomla, din panoul de Administrator .

Template-ul nostru ar trebui sa arate cam asa:

Template joomla pe doua si trei coloane

Crearea unui template joomla nu e, deci, chiar asa de complicate . Crearea unuia pe doua coloane va fi chiar mai usoara, pentru ca deja avem baza pusa, si multe cunostinte despre structura unui template .

Bun, mai departe . Fa o copie a folderului template-ului pe o coloana: "template1" . Copia o vom numi "template2" . Deschide templateDetails . xml si schimba linia 3 in

<name>template2</name>

Salveaz-o si uploadeaza tot folderul nou creat pe server, in directorul "templates" . Acum mergi in panoul de administrator la "site templates site templates si vei vedea ca noul template "template2" este listat sub "template1" . Seteaza-l ca "default" dupa cum am invatat in prima parte a tutorialului .

Acum arata exact ca si primul template, dar se va schimba curand .

Prima modificare: deschide index . php din "template2" folosind PHP Designer 2006 . Cauta linia 36 si ar trebui sa vezi acolo

Trebuie sa indepartam tagul joomla pentru "main body", sa cream un tabel cu doua coloane si un singur rand sis a plasma apoi tagul "main body" in coloana din dreapta si tagul Joomla "left" in coloana din stanga .

Mai intai sa indepartam tagul Joomla:
<td></td>

Acum click pe butonul de creare a unui tabel si creeaza un tabel cu doua coloane si un singur rand . Ar trebui sa arate asa in PHP Designer 2006:

Codul ar trebui sa apara asa, intre cele doua <td> originale:
<td>

<tr>

</tr>

</table>

</td>

Acum sa adaugam cele doua taguri Joomla , una pentru pozitia "left" a modulelor si una pentru "main body" (continutul principal) . Aceste doua taguri arata asa:

<?php mosLoadModules ( 'left' ); ?>

<?php mosMainBody(); ?>

Trebuie sa le plasam in noul tabel creat:

<td>

<tr>

</tr>

</table>

</td>

Sunt colorate ca sa observe exact unde vin . Acum trebuie sa mai facem cateva modificari ca sa ne asiguram ca totul fa fi ok . Primul lucru care il vom face este sa aliniem modulele care vin in stanga in topul celulelor tabelului pe care l-am creat . Vom aduga deci codul:
valign='top'

Si vom seta suplimentar latimea coloanei din stanga, adaugand aceasta:
width='200px'

Acum tabelul ar trebui sa arate asa:
<td>

<tr>

<?php mosLoadModules ( 'left' ); ?></td>

</tr>

</table>

</td>

Am adauga alinierea si la coloana pentru "main body" pentru cazul cand avem doar fragmente scurte de text acolo ( ca sa nu fie aliniate la mijlocul paginii, pe vertical) .

Vom incadra tagul joomla "left" intre tagurile <div>, asa incat sa putem sa aplicam din css anumite formatari .

<td>

<tr>

<?php mosLoadModules ( 'left' ); ?>

</div>

</td>

</tr>

</table>

</td>

Acum index . php ar trebui sa arate cam asa:

Salveaza index . php si uploadeaz-o pe server . Acum deschide template_css . css din folderul "template2/css" . Chiar jos in fila adauga codul:

. dufleft

Ar trebui sa arate asa:

Salveaza fila si uploadeaz-o pe server in folder . Daca dai un refresh la site ar trebui sa ti-l afiseze cam asa:

Acum poti plasa modulele in pozitia "left" si vor aparea pe site-ul tau in coloana din dreapta .

Template-ul Joomla pe trei coloane

Copiaza din nou folderul "template1" si denumete copia "template3" . Deschidem templateDetails . xml si schimbam numele template-ului in "template3" . Apoi deschidem index . php din folderul "template3" si cautam iar linia 36 . Daca iti amintesti arata asa:
<td><?php mosMainBody(); ?></td>

Stergem tagul Joomla si lasam doar cele doua <td> (celula tabelului mare al site-ului):

Si acum in loc sa adaugam un tabel pe doua coloane si un rand vom adauga un tabel pe trei coloane si un rand . Codul va arata deci asa:

<td>

<tr>

</tr>

</table>

</td>

Tagurile ce nu trabuiau sterse sunt colorate, ca sa le observe mai usor . Acum trebuie sa inseram in aceste trei coloane tagurile joomla .

<td>

<tr>

</tr>

</table>

</td>

De asemenea trebuie sa incadram tagurile "left" si "right" intre <div> ca sa fie aliniat contintul lor in top, si vom seta si latimea coloanelor din stanga si dreapta:

Asa va arata codul html dupa aceste modificari . Am setat deci latimea pentru coloana din stanga si din dreapta la 200 de pixeli . Ce ramane din 100% va fi preluat de coloana pentru "main body" .

Dar daca ne amintim latimea tabelului principal al site-ului am setat-o la 700, ceea ce inseamna ca pentru "main body" ramane practice 350, ceea ce e destul de putin . Vom mari deci cu ceva pixeli latimea acestui tabel principal . Pentru aceasta modificam linia 11 din

Ceea ce va mari latimea site-ului cu 150 de pixeli .

O asmenea modificare se impune mai ales cand vrei sa integrezi "wrapped" un forum in site, ca sa ramana sufficient spatiu pentru main body - unde va fi "incorportat" forumul .

Salvam index . php si o punem la locul ei in folderul "template3" . Deschide acum template_css . css din "template3/css" . Vom adauga urmatoarele linii in subsolul paginii:
. dufleft

. dufright

Aceasta va face ca cele trei coloane sa nu se atinga intre ele . Salveaza fila si uploadeaza tot folderul "templates3" in directorul "templates" de pe server . Mergi in panoul de administrator Joomla la "sites templates" si seteaza "template3" ca default pentru site-ul tau .

Daca accesezi acum site-ul in browser ar trebui sa arate cam asa:

Asta e . ai acum un template pe trei coloane .

Ca sa obtii ceva mai profi acum practica, si incearca sa inveti css mai aprofundat .

Cateva amanunte pe care trebuie sa le tii minte:
- foloseste tagurile <div> pentru incadrarea tagurilor Joomla

Nu uita formatarile borderelor, si culorile

Daca vrei ca site-ul tau sa se "muleze" pe latimea monitorului fiecarui vizitator seteaza tabelul principal la o latime de 100% in loc de 700, sau 850 de pixeli .

Cateva tehnici legate de grafica in template-urile Joomla

Sa ne intoarcem putin la primul template: "template1" . Seteaza-l ca default si uploadeaza aceasta imagine in folderul images al acestui template:

Ea seva chema duf_back1 . jpg .

Deschidem acum fila template_css . css din folderul "css", si modificam linia 343 in:
background: #fff url( . . /images/duf_back1 . jpg) repeat-x;

Acel "repeat-x" ne ma repeata imagine ape orizontala .

Codul ar trebui sa arate acum asa:

Salveaza fila si reuploadeaz-o in folderul "css" . Daca accesezi acum site-ul tau vei vedea asa ceva:

Numele site-ului apare inca prea "in imaginea" folosita ca background, asa ca il vom cobora putin . Deschidem iar fila template_css . css, cautam linia 658 si modificam "margin-top" in 50 de pixeli . Codul va arata asa:

Salveaza si uploadeaza .

Sa cream o alta imagine, sa ii zicem duf_back3 . jpg" . o uploadam in "images" si modificam template_css . css:
background: #fff url( . . /images/duf_back3 . jpg) repeat-y;

(y va repeat imagine ape vertical) . Am putea obine ceva de genu:

Putem sa incadram tot continutul site-ului intre imagini . Uploadam o imagine, sa ii spunem duf_back4 . jpg in folderul images si modificam codul din template_css . css (de la linia 343):

background: #0055B3 url( . . /images/duf_back4 . jpg) repeat-y;

background-position : center top;

Rezultatul:

Continutul este incadrat de catre backgroundul de culoare albastra .

Adaugarea unui logo

Sa cream o imagine ca logo, si sa ii zicem duf_back5 . jpg . O inseram unde dorim cu un cod de forma:
<img src='<?php echo $mosConfig_live_site;?>/templates/template1/ images/duf_back5 . jpg' width='309' height='63' alt='logo' />

E important sa adaugi codul colorat pentru cazul ca joomla nu este instalat in directorul radacina al serverului . Acel cod va extrage URL-ul site-ului din fila de configurari a joomla, si va afisa correct imaginile .

Putem folosi si un alt cod:

<img src='<?php echo $mosConfig_live_site;?> /templates/<?php echo '$GLOBALS[cur_template] '; ?>/images/duf_back5 . jpg' width='309' height='63' alt='logo' />

Codul colorat va fi automat inlocuit cu numele template-ului .

Sa inseram acum efectiv logo-ul, folosind una din "tehnicile" de mai sus . Deschidem fila index . php si modificam linia 13:

<td><h1><img src='<?php echo $mosConfig_live_site;?>/templates/<?php echo '$GLOBALS[cur_template] '; ?>/images/duf_back5 . jpg' width='309' height='63' alt='logo' /></h1></td>

Am indepartat deci tagul joomla pentru numele site-ului si am pus imaginea nostra in loc, intre cele doua <h1> . Codul ar trebui sa arate acum asa:

Si site-ul asa:

Pe langa pozitionarile care le putem aplica unor module mai putem sa le adaugam si alte atribute .

De pilda daca avem pozitia "user2" unde vrem sa integram un modul . O modificare de genul acesta:
<?php mosLoadModules ( 'user2', 0 ); ?> deci cu acel 0 adaugat, va afisa modulele puse in pozitia "user2" unul sub altul .

- modulele sunt afisate unul sub altul:

modulele vor fi afisate orizontal, unul dupa altul

Mai multe informatii despre asemenea pozitionari:

Politica de confidentialitate

.com	Copyright © 2024 - Toate drepturile rezervate. Toate documentele au caracter informativ cu scop educational.

Elementele de baza ale unui template Joomla

Comentarii literare

Personaje din literatura

Tehnica si mecanica

Economie

Geografie