Share
Începeți să creați un Joomla! șablon și confuz despre cum să obțineți într-adevăr un mâner pe modificarea acesteia? Check out aceste sfaturi și trucuri simple care vă vor oferi un control mai bun atunci când vă proiectați site-ul Web Joomla.
Când am început să creez template-uri Joomla, au fost câteva lucruri despre care am fost confuz. Cum ar trebui să modific o singură pagină fără a afecta pe ceilalți? Cum pot modifica structura unui modul astfel încât să fie mai ușor să stil? În acest articol vom trece peste cum să remediem aceste probleme, precum și să analizăm alte soluții rapide pe care le puteți utiliza pentru a vă grăbi lucrarea de dezvoltare a șabloanelor Joomla.
Înainte de a vă putea modifica și dezvolta șablonul, trebuie să aveți o instalare Joomla cu care să lucrați. Folosind WAMP pentru ferestre sau MAMP pentru Mac (vom folosi WAMP pentru acest exemplu), vom crea o instalare simpla Joomla găzduită chiar pe calculatorul tău pentru a putea începe cu modificările șablonului.
În primul rând, vizitați www.wampserver.com/en. În pagina de pornire, faceți clic pe "Descărcați ultima versiune de Wampserver 2".
Faceți clic pe link-ul de descărcare fie pentru versiunea pe 32 de biți, fie pentru versiunea pe 64 de biți a WAMP (în funcție de versiunea Windows pe care o aveți). Dacă nu știți ce versiune aveți, faceți clic pe butonul de început și introduceți "dxdiag" în câmpul de căutare. În interiorul instrumentului de diagnosticare DirectX vă va spune ce versiune se execută alături de sistemul de operare. Descărcați WAMP și rulați .exe pentru a instala programul utilizând directorul implicit al C: \ wamp. Se va întreba, de asemenea, ce browser doriți să utilizați pentru previzualizarea prestabilită, dar nu folosesc acest lucru, așa că alegeți doar explorer.exe. Nu vom folosi SMTP sau e-mail, așa că lăsați-le ca valori implicite și apoi lansați WAMP.
O pictogramă va apărea în tava bara de activități pentru WAMP și ar trebui să fie portocalie. Aceasta înseamnă că serverul localhost este offline. Pentru ao activa online (astfel încât să puteți începe să lucrați cu ea) faceți clic stânga pe pictogramă și selectați "Start All Services". Apoi faceți clic stânga pe pictogramă din nou și selectați "Puneți online". Acesta va porni serverul localhost de pe aparat.
Notă: Dacă aveți lucruri precum Skype sau Teamviewer care rulează pe computerul dvs., acest lucru va împiedica accesul WAMP online, astfel încât asigurați-vă că dezactivați aceste programe înainte de a încerca să porniți localhost.
Acum, când am instalat serverul localhost, putem continua să descărcăm cea mai recentă instalare Joomla cu care să lucrăm. Cea mai recentă versiune a Joomla este în prezent 1,7, dar vom folosi Joomla 1.5 pentru acest tutorial; este mai stabilă și are cele mai multe extensii și șabloane disponibile pentru aceasta.
Accesați www.joomla.org. Odată ce faceți clic pe butonul "Descărcați Joomla" în mijlocul paginii. Derulați în jos și căutați cea mai recentă versiune de Joomla 1.5. În momentul acestei scrieri este 1.5.23 și dorim pachetul complet, deci faceți clic pe link-ul intitulat "ZIP" pentru al descărca. Acum mergeți la directorul C: \ wamp \ www și creați un folder nou numit "joomla". Copiați fișierul Joomla zip pe care tocmai l-ați descărcat în acest folder și extrageți-l cu un instrument cum ar fi 7zip sau WinRAR, care sunt disponibile pentru descărcare de pe download.com. Acest lucru va extrage întregul pachet Joomla în acel director și vă va permite să îl instalați.
Pentru a instala Joomla, intrați în browser și tastați "localhost / joomla / installation". Dacă totul a mers bine, vă va afișa pagina "Alegeți limba". Alegeți limba și faceți clic pe butonul "următor" din colțul din dreapta sus. Pentru verificarea pre-instalare, nu trebuie să modificați nimic, așa că faceți clic pe "Next". Din nou, faceți clic pe "Următorul" pentru a accepta licența publică GNU.
Aici vine partea cea mai importantă a instalării: crearea bazei de date și a utilizatorului. În prezent, nu avem încă o setare, așa că vom crea acum.
Pentru a crea baza de date și utilizatorul bazei de date, vom folosi PHPmyadmin pentru WAMP. Faceți clic stânga pe pictograma WAMP din bara de sarcini și selectați "PHYmyadmin" în partea de sus a ferestrei pop-up. Acest lucru va aduce PHPmyadmin în browserul dvs. Primul ecran este locul în care vom crea baza de date pentru Joomla.
În câmpul "Creați o bază de date nouă", introduceți numele bazei de date dorite. Ceva ca "șablon" va fi suficient. Baza de date este acum creată și vă va arăta că nu există tabele în prezent. Următorul pas este să creați un utilizator cu toate permisiunile, astfel încât baza de date să poată fi accesată de Joomla. Accesați fila "Privilegii" din partea de sus și faceți clic pe "Adăugați un utilizator nou".
Pe acest nou ecran, introduceți numele de utilizator pe care doriți să îl utilizați. Am ales "template_user" drept numele meu de utilizator și "1234" pentru parola mea. Evident, pe un server real doriți să utilizați ceva mai sigur decât acest lucru pentru utilizatorul și parola dvs., dar pentru localhost nu este foarte relevant. Pentru câmpul gazdă, completați "localhost". Acum, dedesubt, în cazul în care se spune baza de date pentru utilizator, implicit ar trebui să fie ultimul buton radio. Dacă nu faceți clic pe ultimul buton radio care spune ceva de genul "Acordați toate privilegiile în șablonul de bază de date" ". Drept de dedesubt, în dreptul privilegiilor globale, faceți clic pe linkul "Verificați toate" și apoi faceți clic pe butonul "Du-te" din colțul din dreapta jos.
Mai jos este un exemplu care arată cum ar trebui să arate.
Acum, că utilizatorul și baza de date sunt create, puteți să vă întoarceți la ecranul de instalare Joomla și să puneți aceste elemente în câmpurile pentru baza de date: în primul rând, tipul bazei de date este "mysql" și apoi introduceți "localhost" pentru gazdă Nume. Introduceți numele de utilizator pe care l-ați creat și parola. Pentru a termina, tastați numele din baza de date care a fost "șablon" și faceți clic pe următorul. În ecranul de configurare FTP, lăsați totul ca atare și faceți clic pe "Next" fără a activa stratul sistemului de fișiere FTP.
Ultimul ecran este Configurația principală pentru instalare. Introduceți numele site-ului pe care o voi numi "Sfaturi pentru șabloane". Introduceți adresa dvs. de e-mail, parola de administrator (pentru exemplul de mai sus, puteți folosi doar 1234) și apoi confirmați parola de administrator. Când începeți să creați șabloane, aș recomanda instalarea eșantionului de date, deoarece acesta oferă site-ului o senzație "completă" atunci când încercați să proiectați, mai degrabă decât să începeți cu un șablon gol. Dacă nu ați instalat date de probă, atunci când mergeți la site-ul dvs. Joomla după ce am terminat aici, acesta va fi destul de necompletat, fără niciun conținut la stil cu.
Notă: Odată ce deveniți mai avansată cu modificarea șabloanelor, nu veți mai dori să instalați date de probă. Va dura mai mult timp pentru tine ONUinstalați tot conținutul acelui manechin, pentru a vă ajuta să vizualizați modul în care arată șablonul.
Deci, faceți clic pe butonul "Instalați exemple de date" și apoi faceți clic pe butonul "următor".
Ultimul și ultimul pas pentru instalarea lui Joomla (am promis) este eliminarea directorului "instalare" din folderul "joomla" pe care l-ați creat în WAMP. Accesați C: \ wamp \ joomla și ștergeți complet directorul de instalare. Acum du-te la localhost / joomla și veți vedea că Joomla a fost instalat și suntem gata să mergem cu instalarea șablonului cu care vom lucra.
În ultima vreme în framework-urile șablonului Joomla au fost toate rave, deoarece acestea vă permit să completați un șablon mai repede și o mulțime de lucru a fost deja făcut pe șablon în sine. Unele dintre cele mai populare cadre includ cadrul YooTheme Warp și cadrul Rockettheme Gantry. Ambele cadre au fost construite de la bază până la remedierea nevoilor de a efectua sarcini repetate repetitive pe fiecare șablon și includ, de asemenea, caracteristici extraordinare cum ar fi un șablon mobil încorporat și caracteristici backend care vă permit să schimbați modul în care șablonul arată fără a modifica chiar nimic folosind parametrii backend. Pentru restul acestor sfaturi și exemple, voi folosi un șablon YooTheme care utilizează cadrul Warp 6.
Notă: Trebuie să cumpărați un abonament pentru șabloane YooTheme pentru a utiliza un șablon pe site-ul dvs. și pentru al modifica, dar merită banii suplimentari cheltuiți pentru a vă salva mult timp pe termen lung.
Unii furnizori de cadre și teme includ:
Simțiți-vă liber să vă uitați în jurul fiecărui site și să vedeți ce șabloane vă plac cel mai bine și care cadru va funcționa mai bine pentru dvs. Fiecare furnizor de șabloane are propriile standarde pe care le-au configurat pentru cadrul lor, astfel încât acesta este de gust personal și lista de caracteristici cu care doriți să mergeți. Din moment ce am ales să merg cu frameworkul YooTheme Warp 6, voi începe prin instalarea unui șablon Warp 6 pe serverul localhost.
După descărcarea șablonului, accesați localhost / joomla / administrator. Introduceți "admin" pentru numele de utilizator și "1234" pentru ca parola să se conecteze la backend. În bara de sus plasați mouse-ul peste extensii, apoi faceți clic pe "Install / Uninstall". În câmpul de încărcare a pachetului de fișiere, faceți clic pe "Răsfoiți" și găsiți pachetul de șabloane pe care l-ați descărcat pe computer. Faceți clic pe butonul "Încărcați fișierul amp; Instalare". Șablonul dvs. este acum instalat, dar pentru a-l activa efectiv ca șablon trebuie să faceți încă un pas.
Mergeți la "Extensii" din bara superioară a backend-ului Joomla și apoi faceți clic pe "Template Manager". Șablonul pe care l-am instalat este intitulat "yoo_nano", așa că căutați șablonul în lista șabloanelor și apoi faceți clic pe butonul radio din partea stângă a acestuia. Apoi faceți clic pe pictograma stea care este butonul "Implicit" din colțul din dreapta sus. Acum, noul dvs. șablon este setat ca cel pe care Joomla îl va folosi. Actualizați pagina dvs. de pornire și ar trebui să vedeți modificările!
Acesta este probabil sfatul cel mai util pe care l-am învățat vreodată în Joomla și funcționează utilizând parametrii URL din adresa browserului pentru a specifica stiluri pentru anumite pagini. În primul rând, trebuie să inserăm codul care trage variabilele din adresa URL. Mai jos este codul PHP necesar pentru a utiliza cele mai comune variabile în Joomla, cum ar fi itemid, id, view, opțiune etc. Copiați și inserați codul de mai jos în din documentul dvs..
Acum, a doua parte a acestui lucru pune de fapt aceste variabile să funcționeze ca clase CSS pe etichetă astfel încât să puteți profita de ele. Copiați și inserați codul de mai jos în class = "" a elementului corpului din șablonul dvs..
cid- id- sarcină- CatID- opțiune- ID-ul itemului- vedere- opțiune-
Rezultatul final ar trebui să arate astfel:
Acum, să aruncăm o privire asupra parametrilor URL ai site-ului nostru Joomla. Pentru a începe, faceți clic pe unul dintre legăturile de pe prima pagină care se îndreaptă către o altă pagină de pe site. De exemplu, în pagina mea am făcut clic pe "Continuați citirea" după cum se arată mai jos. Unele dintre link-uri pot fi hardcoded așa că căutați doar o legătură care are variabile care arată că nu este prietenos cu motorul de căutare.
Acum, dacă vă uitați la bara de adrese a browserului dvs., veți vedea parametrii asociați cu această adresă URL așa cum se arată aici:
http: //localhost/joomla/index.php option = com_content & vizualizare = articol & id = 44: joomla-securitate-greva-team & CatID = 1: ultimele-stiri & Itemid = 50
După cum puteți vedea mai sus, opțiunea pentru această pagină este "com_content". Vizualizarea pentru această pagină este "articol", iar elementul pentru această pagină este "50". Itemid se referă la elementul de meniu al fiecărui articol asociat. Rețineți că în Joomla totul trebuie să aibă un element de meniu asociat cu acesta, în caz contrar nu puteți aloca module la acesta. Prin utilizarea acestor informații din URL, aceste informații sunt acum disponibile pentru a fi utilizate prin intermediul variabilelor create în a documentului.
Să aruncăm o privire la pagina pe care suntem acum. Mai jos este un grafic care arată ce părți vreau să modific exclusiv pentru această pagină și niciun altul.
Cea mai ușoară modalitate de a afla unde este codul CSS pentru aceste două elemente este să utilizați un instrument de dezvoltare precum Firebug (pentru Firefox) sau instrumentele Webkit Developer (pentru Chrome). Folosind Firebug, voi trece peste aceste elemente și căut să văd unde este CSS pentru fiecare element individual.
După cum puteți vedea, lucrăm cu o etichetă H1 cu clasa "titlu". Să presupunem că vrem să schimbăm această culoare a textului în roșu. Privind în partea dreaptă a panoului Firebug, pot vedea că există stiluri asociate cu acest element în system.css, trebuchet.css, base.css etc. De obicei, doriți să utilizați șablonul CSS principal pentru șablonul dvs. pentru a efectua modificări ca asta pentru acest șablon se numește layout.css. Pentru șablonul dvs. se poate numi ceva de genul template_css. sau template.css sau chiar base.css. Indiferent de asta, intrați într-unul din aceste fișiere CSS navigând la C: \ wamp \ joomla \ templates \ [template name] \ css \ layout.css. (Această cale ar putea fi diferită pentru șablonul dvs.). Odată ce ați intrat, derulați până la capăt (pentru a vă asigura că este stilul cel mai specific din acest fișier) și adăugați un cod ca acesta.
.itemid-50 #system.title culoare: roșu;
Salvați fișierul CSS și actualizați pagina. Dacă ați făcut-o corect, ar trebui să schimbați titlul de pe această pagină pe roșu. Dacă navigați la o altă pagină, veți observa că nu sa schimbat în restul acestora. Dacă urmați să modificați acest stil global, acesta ar afecta întregul site. Mai jos este rezultatul acestei schimbări de stil:
Pentru a face cea de-a doua schimbare a textului "Scris de", aș dori să subliniez elementul cu Firebug în același mod, să-mi dau seama ce este numele acestuia și unde este stilizat în fișierele CSS și apoi să folosească variabilele PHP de la URL-ul din nou pentru al modela. Deci, pentru a inscripționa textul "scris de" numai pentru această pagină, o voi face mai mare și va fi albastră.
.itemid-50.view-article #system .meta culoare: albastru; font-size: 15px;
Notă de mai sus Am folosit o combinație interesantă atât a variabilei $ itemid cât și a variabilei de vizualizare $. Puteți utiliza CSS pentru a concatena două clase împreună pentru ao face mai specifică. Ceea ce spune acest cod de mai sus este: articolul trebuie să fie de 50 pentru această pagină și trebuie să fie punctul de vedere al articolului, altfel acest CSS nu se aplică. Vă permite să vă orientați chiar și mai precis.
Folosind aceeași idee, dar cu PHP dacă declarațiile în loc: Folosind aceeași idee putem rula și PHP dacă instrucțiuni din index.php sau template.php din șablonul site-ului dvs. pentru a efectua modificări pe baza acestor variabile de adresă URL. De exemplu, să presupunem că avem o pozitie de modul creată cu o clasă div numită "slideshow". Iată un exemplu:
aici este poziția mea de prezentare
Vreau doar ca această prezentare să apară pe pagină cu un articol de 50 - nicăieri altundeva. Acest lucru va suprascrie chiar setările pe care le specificați pentru modulul din backend-ul unde îi spuneți ce elemente de meniu doriți să apară. Deci, pentru a face asta, am înfășurat un dacă declarație în jurul div div, după cum se arată mai jos:
aici este poziția mea de prezentare
Acum, acest div va apărea doar pe această pagină și va fi eliminat din cod dacă nu suntem pe itemid 50. Folosesc aceste tehnici tot timpul cu șabloane și sunt extrem de la îndemână, așa că recomand să fiu foarte obișnuit să utilizez lor.
Folosirea pozițiilor modulului pliabil în Joomla este o necesitate destul de mare dacă nu doriți ca pozițiile să apară chiar și pentru modulele goale. De exemplu, să presupunem că aveți un modul în coloana din dreapta a site-ului dvs. într-un div numit "right_col". Pe o anumită pagină, nu doriți ca coloana din dreapta să apară dacă nu există nimic în ea. Dacă nu aveți o colaps dacă declarația în jurul acelei anumite poziții a modulului, chiar dacă nu există nimic activat pe acea pagină pentru poziția respectivă, va apărea în continuare. Veți ajunge cu o coloană dreaptă, fără nimic în ea.
Pentru a vă asigura că coloana din dreapta colapsează atunci când este goală, puteți fie să localizați o poziție existentă a modulului, fie să creați propria poziție. Șabloanele diferite au moduri diferite de a crea modulele de contorizare dacă declarație (countModules este colapsul dacă afirmație). Pentru șablonul Warp 6, este scris astfel:
Accentsconagua
// acesta este stilul warp 6 pentru afișarea unei poziții a modulului și înfășurarea unei instrucțiuni countModules if în jurul acestuia numărați ("breadcrumbs")):?> render ( 'pesmet'); ?> Dar pentru alte șabloane, ar putea fi mai simplistă ca aceasta: (codul de mai jos este cel mai frecvent mod de a scrie countModules dacă afirmație)
// acesta este stilul warp 5 pentru afișarea unei poziții a modulului și înfășurarea unei instrucțiuni countModules if în jurul acestuia countModules ('right')):?> Notă: Pentru ca numărul de module să funcționeze, trebuie să existe o poziție a modulului între dacă astfel încât să poată vedea dacă ceva este publicat în această poziție sau nu. De exemplu, în codul de mai sus countModules caută să vadă dacă ceva este publicat în poziția "dreapta". Dacă nu, întreaga clasă div right_column nu va fi afișată. Dacă există ceva publicat în această poziție, acesta va arăta totul între începutul dacă declarația și încheierea endif.
În esență, este un concept simplu care permite paginii dvs. să fie mai dinamică, așadar dacă doriți ca paginile variate să aibă layout-uri diferite, aceasta vă permite să faceți acest lucru. Încercați să combinați numerele de calcul dacă declarația cu sfaturile de variație a adresei URL de mai sus pentru a face șablonul mai flexibil. Deoarece Joomla este un sistem de management al conținutului, întreaga idee din spatele ei este să fie dinamică și flexibilă.
Să presupunem că doriți să afișați un anumit element pe pagină numai dacă utilizatorul este conectat. Acest lucru ar putea fi util dacă doriți ca utilizatorii să se înregistreze pentru site-ul dvs. înainte de a putea accesa conținutul. Există modalități mult mai robuste de utilizare a controalelor de acces în Joomla pe lângă aceasta, dar ca o modalitate rapidă de a schimba ceva pe baza faptului că utilizatorul este conectat în acest sfat funcționează perfect. Mai jos este codul de care veți avea nevoie:
id) echo ""; altceva ?> id) echo ""; altceva ?>
Ambele bucăți de coduri sunt identice, cu excepția cazului în care se deschide diviziunea de membri și apoi cea de-a doua bucată de cod închide div. Ce faci este să iei prima piesă de cod și să o pui chiar sub deschiderea ta etichetă. Luați a doua piesă de cod și puneți-o chiar înainte de a vă închide etichetă. Salvați pagina și actualizați. Acum, dacă te duci la site-ul tău, uita-te la firebug și defilați prin DOM (modul de obiect document) în panoul din stânga veți observa că div id de "membri" este acum înfășurarea întregului site. Acest div va apărea numai dacă persoana sa logat.
Să ne uităm la un exemplu simplu despre ceea ce ați putea face cu acest cod. Să presupunem că, din anumite motive, vreau culoarea fundalului antetului de pe pagina mea diferită pentru utilizatorii înregistrați. Acest lucru este foarte ușor de făcut acum, deoarece pot folosi id-ul #members pentru ao specifica.
#members #header fundal: albastru;
Asta e destul de mult pentru tot. Acest lucru ar putea fi util pentru schimbarea unui fundal pe un modul sau a altor poziții pe întreg site-ul dvs. (pentru a reflecta o promovare sau orice vă puteți gândi).
Poate veni un moment în care dezvolți un șablon în care vrei să faci un modul specific să te uiți la simt că nu mai împărtășesc alții. De exemplu, să presupunem că aveți un modul de forumuri pe care cineva dorește să-l sponsorizeze și că ar dori ca sigla lor lângă titlul modulului să spună "Powered by XYZ" sau ceva în acest sens. Acestea sunt posibile prin ceea ce se numesc sufixe de clase de module. Un sufix de clasă a modulelor este o clasă suplimentară adăugată prin parametrii backend al modulului propriu-zis. De exemplu, să aruncăm o privire mai întâi la modul de adăugare a unui sufix de clasă a modulelor.
Din nou, diferite cadre lucrează în diferite moduri, dar în acest caz, modul de a adăuga un sufix de clasă a modulelor este prin punerea stilului [oricare ar fi sufixul]. Alte șabloane pot avea nevoie doar de [numele sufixului] fără stilul din fața lui. Vă recomandăm să vă uitați la clarificarea documentației cadrului dvs. special.
Du-te în backend a localhost Joomla instala la localhost / joomla / administrator. Apoi navigați la bara de sus, mergeți la "Extensii" și apoi faceți clic pe Module Manager. Găsiți modulul specific cu care doriți să lucrați sau chiar creați unul nou, dacă doriți. Pentru acest exemplu, am creat un modul numit "Module Suffix Class" și l-am pus în coloana din dreapta a șablonului meu. Iată mai jos un grafic cu privire la aspectul paginii:
Observați că pe partea dreaptă există un câmp numit "Suita de clasă a modulelor" și am pus în stil apă ca sufixul meu, deoarece acesta este un șablon Warp. Aplicați aceste modificări modulului și apoi mergeți la interfață. Dacă utilizați firebug și treceți peste modulul pe care l-ați creat, ar trebui să arătați că sufixul de clasă este acum o clasă CSS pe modulul în sine.
Acum puteți folosi acest mod pentru a modela modulul dorit și va afecta numai acest modul (sau orice altul pe care îl alocați acestui sufix de clasă a modulului). Iată un exemplu de cod pe care l-am folosit pentru a crea un stil simplu al acestui modul:
.stil-apă h3.module-titlu culoare: albastru; . stil-apă background: # ecf9ff; padding: 10px;
Iată o imagine de ansamblu a modificărilor:
Dacă nu vreau ca acest modul să mai arate așa, am înlăturat sufixul clasei de module din parametrul din managerul de module și revine la valorile implicite. Apoi vom analiza modul de modificare a șablonului real al modulului, astfel încât să aveți un control mai bun al producției și stilului.
Succesele de clasă pentru module sunt excelente pentru modelarea modulelor individuale, dar ce se întâmplă atunci când doriți să modificați șablonul actual al modulului? Ori de câte ori fac un șablon, unul dintre lucrurile pe care îmi place să fac este să fac modulul mai ușor de stil, creând o structură div ca aceasta:
Acest lucru este atât de bun pentru a avea ca un șablon modul, deoarece puteți obține o tona de diferite arată pentru un modul doar cu aceste trei divs. Decuparea din Photoshop și transformarea acestuia în șablon este mult mai ușoară în acest fel. Uitați-vă la aspectul original al modulului din șablonul pe care îl folosesc:
Avem o etichetă h3, o etichetă de paragraf și asta e. Nu se poate face prea mult stil cu acest modul numai cu aceste două elemente, astfel încât, pentru a face mai ușor acest stil, trebuie să modificăm șablonul modulului propriu-zis. Din nou, aceasta variază în funcție de șablon, dar, în general, căutați aceleași fișiere - acestea ar putea fi doar în locuri diferite.
Pentru acest șablon special, caut aceste fișiere:
default-1.php este fișierul șablonului modulului actual și modulele.php controlează care șabloane de module sunt asociate cu ce poziții. De unde știam că implicit-1.php a fost șablonul modulului folosit pentru coloana din dreapta? Prin utilizarea module.php pot vedea care șablon este asociat cu coloana din dreapta prin acest cod:
// setați modulele implicite dacă ($ style == ") if ($ module-> position == 'top-a') $ style = 'line'; '$' = 'line', dacă ($ modul-> position == 'bottom-b') $ stil = ' ($ module-> position == 'innerbottom') $ style = 'line', dacă ($ module-> position == 'bara laterală-a') $ style = 'line'; dacă ($ module-> position == 'sidebar-b') $ style = 'line';
După cum puteți vedea mai sus, fiecare poziție a modulului are un stil $ asociat cu acesta. În acest caz, toți se numesc "linie". Pentru acest șablon, coloana din dreapta este de fapt numită bara laterală - o, așa că am căutat sidebar-a și am aflat că stilul $ a fost egal cu "line". Derulând mai jos în jos acest fișier pot vedea ce șablon de modul este asociat cu stilul $ de "linie".
comutator ($ stil) case 'linie': $ template = 'default-1'; $ stil = 'mod -' $ stil; $ stil = ($ culoare)? 'mod-line -'. $ culoare: "; $ split_color = 1; $ subtitle = 1; $ title_template = '% s
„; pauză; caz "dropdown": $ template = 'dropdown'; $ subtitlu = 1; pauză; caz "brut": $ template = 'brut'; pauză; implicit: $ template = 'default-1'; $ style = $ suffix; $ title_template = '% s
„;
În acest caz de comutare puteți vedea că "linia" cazului are șablonul $ "default-1". Modul implicit pentru toate pozițiile este și cel implicit-1, cu excepția cazului în care se specifică altfel. Acum că știu ce șablon de modul este asociat cu această poziție a modulului, îl pot edita la nevoile mele.
Deschiderea default-1.php acum, putem vedea codul arata astfel:
După cum puteți vedea, este destul de clar. Nu este o mulțime de lucruri pe care să le comporți. Vrem să adăugăm diviziile pe care le-am arătat mai sus pentru a face acest modul mai ușor de controlat. Schimbați codul de mai sus pentru a arăta astfel:
Am eliminat insigna, pentru că nu am vrut să apară în șablonul modulului meu, dar ați putea să îl păstrați dacă doriți. Insigna este doar un stil, temele de Warp au fost asociate cu sufixele clasei de module. Acum, când avem acest aspect, este mult mai ușor să modelezi modulul. Mai jos este un exemplu de flexibilitate mai mare:
Și aici este codul pentru a realiza acest stil (știu că acestea sunt combinații de culori foarte urâte, dar ele sunt folosite pentru ilustrare:
.stil-apă fundal: # ecf9ff; padding: 10px; . stil-apă .module_header font-size: 18px; font-weight: bold; fundal: albastru; culoare albă; padding: 10px; . stil-apă .module_header h3 margine: 0; . stil-apă .module_middle fundal: alb; padding: 10px; . stil-apă .module_bottom height: 15px; fundal: roșu;
Știm cu toții că Internet Explorer este blestemul existenței noastre, așa că nu pot completa acest tutorial fără a include condiționalitățile IE de bază care vă permit să modelați elemente pe pagină pe baza versiunii IE pe care o vizați. Acesta nu este un sfat specific Joomla, dar vă voi arăta cum să îl aplicați în Joomla.
Notă: Această metodă este pentru remedierile rapide și nu ar trebui utilizată pentru a repara toate erorile de IE. Dacă aveți o mulțime de erori care trebuie rezolvate, ar trebui să utilizați o foaie de stil numai pentru IE care se încarcă numai atunci când utilizatorii utilizează browserul respectiv.
Este destul de simplu să includeți aceste condiționări în șablonul dvs. Joomla. Folosind modul în care funcționează sistemele de gestionare a conținutului, puteți plasa condiționalitățile în fișierul principal de șablon și va funcționa la nivel de site-ul, ceea ce economisește mult timp. Mai jos este un exemplu de condiționalități IE:
După cum puteți vedea mai sus, vizez Internet Explorer 7 cu aceste condiționări. De asemenea, ați putea viza cu ușurință alte versiuni IE doar prin modificarea celor 7 la 6 sau 8. Puneți primul drept condițional sub deschidere și apoi puneți al doilea drept condiționat deasupra închiderii etichetați exact a
