crearea primei teme complete Moodle

deci, să spargem…

crearea unei noi teme

găsirea unei teme de bază pentru a crea tema Moodle este primul lucru pe care trebuie să-l faceți.Există, totuși, diferite moduri de a face acest lucru; puteți face o copie a temei standardși redenumiți-o așa cum ați făcut-o în parte din acest articol sau puteți utiliza o temă părinte care se bazează și pe tema standard.

punctul important aici este că tema standard care vine cu Moodle este piatra de temelie a procesului de tematică Moodle. Orice altă temă Moodle ar trebui să se bazeze pe această temă și ar descrie în mod normal diferențele față de tema standard. Deși această metodă funcționează și este o modalitate simplă de a începe cu tematica Moodle, aceasta provoacă probleme, deoarece noi funcții ar putea fi adăugate la Moodle, ceea ce ar putea determina afișarea sau funcționarea incorectă a temei dvs. Tema standard va fi întotdeauna actualizată înainte de lansarea unei noi versiuni de Moodle. Deci, dacă alegeți să faceți o copie a temei standard și să îi schimbați stilurile, ar fi mai bine să vă asigurați că utilizați și o temă părinte. În acest fel, tema părinte va fi tema dvs. de bază împreună cu modificările pe care le faceți copiei temei standard.

cu toate acestea, există un alt mod de a crea prima temă, și că este de a crea o copie a unei teme care este foarte aproape de tema standard, cum ar fi standardwhite, și de a folosi acest lucru ca tema. Moodle va folosi apoi tema standard ca temă de bază și va aplica orice modificări pe care le faceți temei standardwhite din partea de sus (părinte). Tot ce facem este să descriem diferențele dintre standard și standardteme albe. Acest lucru este mai bun, deoarece dezvoltatorii Moodle vor face uneori modificări la tema standard pentru a fi la curent cu noile caracteristici Moodle. Aceasta înseamnă că la fiecare actualizare Moodle, tema dvs. standard, folderul va fi actualizat automat, evitând astfel orice probleme de afișare urâte cauzate de actualizările Moodle.

modul în care configurați temele Moodle depinde complet de dvs. Dacă vedeți o temă care este aproape ceea ce doriți și nu sunt foarte multe modificări necesare, atunci utilizarea unei teme părinte are sens, deoarece majoritatea stilurilor de care aveți nevoie au fost deja scrise. Cu toate acestea, dacă doriți să creați o temă care este complet diferită de orice altă temă sau doriți să intrați cu adevărat în temele Moodle, atunci utilizarea unei copii a uneia dintre foile standard ar fi cea mai bună.

deci, să mergem mai departe și să vedem ce diferențele sunt atunci când se utilizează diferite setări tematice, și a vedea ce efect aceste metode diferite au asupra procesului de theming.

• răsfoiți la folderul temă în C:Program FilesApache software FoundationApache 2.2 htdocstheme.
• copiați tema standard făcând clic dreapta pe folderul temei și alegând Copiere.
• lipiți tema copiată în directorul tematic (același director în care vă aflați în prezent).
• redenumiți copia folderului standard în blackandblue sau orice alt nume pe care doriți să îl alegeți (nu uitați să nu folosiți majuscule sau spații).
• Deschideți site-ul Moodle și navigați la aspect Administrare Site | teme | Selector temă| și alegeți tema blackandblue pe care tocmai ați creat-o.

y ou ar fi putut observa că tema prezentată în captura de ecran precedentă are un antet care spune tema negru și albastru. Acest lucru se datorează faptului că am adăugat acest lucru la numele site-ului Complet în pagina de setări prima pagină.

timp pentru acțiune – setarea unei teme părinte

1. deschideți browserul web și navigați la site-ul Moodle și conectați-vă ca administrator.
2. accesați site Administration | Appearance | Themes | Theme Selector și alegeți tema blackandblue dacă nu este deja selectată.
3. navigați la rădăcina folderului blackandblue, faceți clic dreapta pe Configurare.fișier php și alegeți Deschidere cu / WordPad.

4. trebuie să faceți patru modificări la acest fișier, astfel încât să puteți utiliza această temă și o temă părinte, asigurându-vă în același timp că utilizați în continuare tema standard implicită ca bază. Iată modificările:

   $THEME- > sheets = array ('user_styles');
    $THEME - >standardsheets = true;
   $THEME->parent = 'autumn';
   $THEME-> parentsheets = array('styles');

   să ne uităm la fiecare dintre aceste afirmații, la rândul său.

   $tema- >sheets = array ('user_styles');

   aceasta conține numele tuturor fișierelor foaie de stil pe care doriți să le includeți în acest pentru tema blackandblue, și anume user_styles.

   $THEME->standardsheets = true; 

   acest parametru este utilizat pentru a include foile de stil ale temei standard. Dacă este setat la True, va folosi toate foile de stil din tema standard. Alternativ, poate fi setat ca o matrice pentru a încărca foi de stil individuale în orice ordine este necesară. Am setat acest lucru la Adevărat, așa că vom folosi toate foile de stil ale temei standard.

   $tema - >părinte = 'toamna';

   această variabilă poate fi setată să utilizeze o temă ca temă părinte, care este inclusă înainte de tema curentă. Acest lucru va facilita modificarea unei alte teme fără a fi nevoie să schimbați fișierele reale.

   $THEME-> parentsheets = array('styles'); 

   această variabilă poate fi utilizată pentru a alege fie toate foile de stil ale temei părinte, fie fișierele individuale. Acesta a fost setat pentru a include stilurile.fișier css din tema părinte, și anume toamna. Deoarece există o singură foaie de stil în tema de toamnă, puteți seta această variabilă la True. Oricum, veți avea același rezultat.

5. Salveazănegru șiblueconfig.php și reîmprospătați fereastra browserului web. Ar trebui să vedeți ceva similar cu următoarea captură de ecran. Rețineți că blocurile dvs. pot fi diferite de cele de mai jos, dar puteți ignora acest lucru.

ce sa întâmplat?

bine, deci acum aveți o copie a temei standard care folosește tema de toamnă (de Patrick Malley) ca părinte. Este posibil să fi observat că antetul nu este corect și că antetul temei de toamnă corespunzătoare nu se afișează. Ei bine, acest lucru se datorează faptului că utilizați în esență copia temei standard și că antetul din această temă este cel pe care îl vedeți mai sus. Este doar fișierele CSS care sunt incluse în această ierarhie, astfel încât orice modificări HTML nu vor fi văzute până când editați antetul temei standard.fișier html.

Have a go hero-alege o altă temă părinte

du-te înapoi și au o privire prin unele dintre temele de pe Moodle.org și descărcați unul care vă place. Adăugați această temă ca temă părinte la config tema blackandblue lui.fișier php, dar de data aceasta alegeți ce foi de stil doriți să utilizați din acea temă. Tema Back to School este una bună pentru acest exercițiu, deoarece foile sale de stil sunt clar etichetate. Deci tu

copierea antet și subsol fișiere

pentru a arăta că utilizați fișierele CSS tema Toamna și fișiere HTML tema standard, puteți merge doar și copiați antetul.html și subsol.fișiere html din tema de toamnă Patrick Malley și lipiți-le în dosarul tema blackandblue lui. Nu vă faceți griji cu privire la suprascrierea fișierelor antet și subsol, deoarece puteți oricând să le copiați din nou din folderul tematic standard curent.

timp pentru acțiune – copierea antetului.html și subsol.fișiere html

1. navigați la folderul temei de toamnă și evidențiați atât antetul.html și subsol.fișiere html ținând apăsată tasta Ctrl și făcând clic pe ambele. Faceți clic dreapta pe fișierele selectate și alegeți Copiere.
2. navigați la folderul temei blackandblue și faceți clic dreapta și alegeți lipire.
3. reveniți la fereastra browserului și apăsați butonul F5 pentru a reîmprospăta pagina. Veți vedea acum tema completă de toamnă.

ce sa întâmplat?

ați copiat antetul temei de toamnă.html și subsol.blackandblue, astfel încât să puteți vedea tema Toamna complet de lucru. Probabil că nu veți folosi de fapt antetul.html și subsol.fișiere html pe care tocmai le-ați copiat, deoarece acesta a fost doar un exemplu al modului în care funcționează procesul de tematică Moodle.

deci, aveți acum o copie nemodificată a temei standard numită blackandblue, care folosește tema de toamnă ca temă părinte. Tot ce trebuie să faceți acum pentru a face modificări la această temă este de a edita fișierul CSS în folderul tema blackandblue.

dosar temă gospodărie

cu toate acestea, există câteva lucruri pe care trebuie să le faceți mai întâi, deoarece aveți o copie exactă a temei standard în afară de antet.html și subsol.fișiere html. Acest folder copiat are fișiere de care nu aveți nevoie, deoarece singurul fișier pe care l-ați setat pentru tema dvs. de utilizat a fost user_styles.fișier css în config.fișier php mai devreme. Aceasta a fost prima modificare pe care ați făcut-o:

$THEME - >sheets = array('user_styles');

user_style.fișierul css nu există în folderul temei blackandblue, deci va trebui să îl creați. De asemenea, va trebui să ștergeți orice alte fișiere CSS care sunt prezente, deoarece noua dvs. temă blackandblue va folosi o singură foaie de stil, și anume user_styles.fișier css pe care îl veți crea în secțiunile următoare.

timp pentru acțiune – crearea foii noastre de stil

1. faceți clic dreapta oriunde în folderul blackandblue și Alegeți Document Text nou|.
2. redenumiți acest document text în user_styles.css făcând clic dreapta din nou și alegând Redenumire.

timp pentru acțiune-ștergerea fișierelor CSS de care nu avem nevoie

1. ștergeți următoarele fișiere CSS selectându-le și apoi făcând clic dreapta pe fișierele selectate și alegând ștergere.
   • styles_color.css
   • stiluri_ie6.css
   • stiluri_ie6.css
   • stiluri_ie7.css
   • styles_layout.css
   • styles_moz.css

   {context: #000000;}

   

ce s-a întâmplat?

în ultimele două sarcini, ați creat un fișier CSS gol numit user_style.css în dosarul tema blackandblue lui. Apoi ați șters toate fișierele CSS din folderul temei blackandblue, deoarece nu veți mai avea nevoie de ele. Amintiți-vă, acestea sunt doar copii ale fișierelor CSS din folderul temei standard și ați setat tema să utilizeze tema standard ca bază în configurația temei blackandblue.fișier php.

să facem câteva modificări

acum ați configurat tema așa cum doriți, adică utilizați propria temă blackandblue utilizând tema standard ca bază și tema de toamnă ca părinte. Mergeți mai departe și faceți câteva modificări stilului dvs. de utilizator.fișier css, astfel încât să puteți vedea ce efect acest lucru are pe tema, și verificați că toate config dumneavoastră.setările fișierului php sunt corecte. Amintiți-vă că toate stilurile actuale sunt moștenite din tema toamnei.

timp de acțiune – verificarea setup nostru

1. Deschideți site-ul Moodle cu tema curentă (care ar trebui să fie blackandblue, dar arata ca tema de toamnă).
2. navigați la folderul temei blackandblue, faceți clic dreapta pe user_style.fișier css și alegeți Deschis. Acest fișier ar trebui să fie complet gol.

3. tastați următoarea linie de CSS pentru elementul corp, apoi salvați fi le:

   corp {
    fundal: #000000;
   }

   

4. acum reîmprospătați fereastra browserului. Veți vedea că fundalul este acum negru.

   

Notă: Când utilizați Firebug pentru a identifica stilurile care sunt utilizate, este posibil să nu fie întotdeauna evident unde se află sau ce stil controlează acel element al paginii. Un exemplu în acest sens este codul body {background: #000000;}pe care tocmai l-am lipit în user_style.fișier css. Dacă am fi folosit Firebug pentru a identifica acel stil, nu l-am fi găsit. În schimb, am aruncat o privire la fișierul CSS din tema toamnei. Ceea ce am încercat să spun aici este că va exista întotdeauna un element de poking în jurul și încercare și eroare.

ce s-a întâmplat?

totul pare bine acolo, nu-i așa? Ați adăugat o declarație de stil la user_style gol.fișier css pentru a schimba culoarea de fundal, și au verificat modificările în browser-ul dumneavoastră. Acum știți cum funcționează temele părinte și știți că trebuie doar să copiați stilurile din Firebug în stilul dvs. de utilizator.fișier css și editați declarațiile de stil care trebuie schimbate.