Actions

Editor de teme

From LimeSurvey Manual

This page is a translated version of the page Theme editor and the translation is 100% complete.

Introducere

LimeSurvey are un sistem avansat de temă și stil care oferă dezvoltatorilor o modalitate eficientă de a personaliza aspectul sondajului. De la LS3, termenul "şabloane" a fost înlocuit cu termenul "teme". Temele permit controlul asupra stilului paginilor unui sondaj. Un administrator de sondaj poate selecta o temă implicită care va fi folosită pentru fiecare sondaj pentru a o personaliza în continuare. „Teme” vine cu opțiuni care oferă unui administrator fără abilități de codare o modalitate simplă de a adăuga un logo pe pagina de întâmpinare, de a schimba culorile de fundal, de a selecta un font etc.


LimeSurvey vine cu 3 teme. Aceste teme inițiale sunt definite de directoarele situate în directorul „themes/survey/” de instalare LimeSurvey. Fiecare temă are propriul director. În directorul principal al unei teme veți găsi un fișier de configurare în XML și numeroase directoare care conțin vizualizările themes (.twig), cascading style sheets (.css), 'scripturi, imagini ('.jpg sau .png) și poate altele.


Începând cu LimeSurvey 2.50, motorul de temă folosește Bootstrap 3 ca cadru CSS. Deoarece Bootstrap 3 este un cadru standard, dezvoltatorii vor găsi o mulțime de documentație, tutoriale și fire de discuții despre acesta pe internet.


De la LimeSurvey 3, motorul de teme folosește Twig, astfel încât dezvoltatorii de teme pot schimba logica redării sondajului într-un mod sigur și ușor. Twig înlocuiește vechiul sistem de cuvinte cheie de înlocuire care a fost folosit în versiunile anterioare. Logica care a fost folosită pentru a genera HTML-ul cuvintelor cheie este acum disponibilă în vizualizările temei.


Fragment din Tema Vanilie:

 <div class="{{ aSurveyInfo.class.answercontainer }} col-xs-12" {{ aSurveyInfo.attr.answercontainer }}> 
 {# NOTĂ: Dacă doriți să personalizați redarea întrebării, utilizați o temă de întrebare #}
 {{ aQuestion.answer | crud }}
</div>

Temele, fiind codul HTML și Twig, tind să definească poziționarea și tipul de text de afișat și caracteristicile structurale similare ale paginii. Ele fac referire sau includ adesea alte fișiere. Cele mai multe dintre ele fac referire la un fișier comun de foi de stil în cascadă (CSS) care definește stilul fontului, culoarea, dimensiunea, fundalul și parametrii similari comuni tuturor paginilor din sondaj. Foile de stil fac referire la parametrii HTML „’’clasă’’’ care sunt asociați cu diferitele tipuri de obiecte din codul HTML. Acest lucru permite foii de stil să definească modul de afișare a fiecăruia dintre numeroasele tipuri de text sau alte obiecte care pot apărea în mai multe locuri. Există clase unice pentru fiecare tip de întrebare în LimeSurvey, oferind astfel control detaliat asupra aspectului fiecăruia. Fișierele imagine, cum ar fi logo-urile sau constructorii speciali de bare de progres, pot fi de asemenea menționate în fișierul Theme. În cele din urmă, cuvintele cheie speciale din acolade sunt înlocuite cu text definit în sondaj pentru fiecare corespondent de traducere a limbii (de exemplu, „Titlul sondajului” sau „Textul întrebării” pentru fiecare limbă definită).

Dacă creați o nouă temă personalizată, vă rugăm să o contribuiți înapoi la comunitatea LimeSurvey și să o puneți la dispoziție altora. Cu ajutorul tău, putem crește depozitul nostru de teme, sondaje și alte suplimente pentru a face LimeSurvey și mai bun! Consultați depozitul de șabloane LimeSurvey unde vă puteți partaja șabloanele.

Crearea unei noi teme

Pentru a putea crea o temă nouă (sau edita o temă existentă), aveți nevoie de Modificarea șablonului permisiunea utilizatorului în LimeSurvey, precum și permisiunea de a manipula fișierele din operațiunea de bază. sistem care găzduiește instalarea dvs. LimeSurvey.

Notă de avertizare: Dacă schimbați teme, puteți afecta și toate sondajele preexistente din instalarea dvs. LimeSurvey. Temele sunt o caracteristică avansată care necesită experiență și cunoștințe HTML.

Modul preferat de a crea o temă nouă este prin „Editorul de teme” (vezi mai jos), care se află sub „Configurare” din bara de instrumente de sus. Unii utilizatori preferă să lucreze direct cu fișierele tematice, astfel încât să poată folosi editorul de text preferat în locul interfeței web. În acest caz, utilizați în continuare Editorul de teme pentru a crea mai întâi noua temă. Aceasta va crea o nouă temă de bază cu toate fișierele de care aveți nevoie în directorul LimeSurvey_web_root/upload/themes/survey/your_new_template. De acolo puteți utiliza editorul de text pentru a ajusta manual fișierele șablon.

Notă privind permisiunile: pe sistemele unix/linux, aceste fișiere cu teme vor fi deținute de grupul și utilizatorul pe care rulează serverul web (poate fi „www” pentru unele sisteme). Deci, asigurați-vă că aveți permisiunile corespunzătoare pentru a edita aceste fișiere. Când le salvați, asigurați-vă că nu își schimbă proprietarul! În acest fel, puteți utiliza în continuare interfața de editare a temei web, dacă este necesar.


O serie de elemente „publice” ale LimeSurvey pot fi ajustate printr-o serie de teme. Următoarea secțiune oferă o explicație foarte scurtă a acestor șabloane.

Template:Notă

Editorul de teme LimeSurvey

Editor de teme: Configurare > Teme> Editor de teme Editorul de teme este disponibil numai pentru utilizatori cu permisiunea Templates și pentru superadministratori.


  Atenție : O temă care nu este construită corect poate face ca un sondaj (care folosește șablonul respectiv) să devină inoperabil.



Editorul de teme LimeSurvey vă permite să editați conținutul temelor dvs. online. Pentru a porni Editorul de teme: faceți clic pe „Teme” în meniul „Configurare”, apoi faceți clic pe butonul „Editor de teme” de lângă tema pe care doriți să o editați sau să extindeți.


Butonul pentru a accesa editorul de teme pentru tema Bootswatch


Pagina editorului de șabloane vă permite să selectați șablonul pe care doriți să îl editați/vizualizați.



Sunt disponibile următoarele opțiuni:


  • Creare: Vă permite să creați un șablon nou. Pentru a nu începe de la zero, șablonul „implicit” este copiat.
  • Import: Vă permite să importați un șablon dintr-un fișier ZIP.
  • Export : Vă permite să exportați șablonul curent într-un fișier ZIP.
  • Copy: Vă permite să creați un șablon nou prin copierea celui actual.
  • Redenumiți: Vă permite să schimbați numele șablonului. Este folosit în general după copierea sau importul unui șablon.
  • Șablon: o listă derulantă care arată toate șabloanele disponibile care se află în instalarea dvs. LimeSurvey.
  • Ecran: o listă derulantă care vă permite să alegeți ce pagină de sondaj din acel șablon doriți să o vizualizați.
  • Reveniți la panoul de administrare.

Importați/Exportați/Copiați un șablon

Când exportați un șablon, va fi creată o arhivă de fișier ZIP cu toate fișierele șablon (fișiere .pstpl, imagini, fișiere css, ...). Puteți „importa” fișierul zip exportat într-o altă instalare LimeSurvey utilizând caracteristica de import sau puteți copia manual arhiva într-o altă instalare LimeSurvey și o puteți extrage în șablon corespunzător director acolo.

Cu toate acestea, cel mai bine este să utilizați funcțiile de import/export/copiere a șablonului LimeSurvey în editorul de șabloane.

Structura paginii/Utilizarea șablonului

  • Pagina de bun venit: startpage.pstpl, welcome.pstpl, privacy.pstpl, navigator.pstpl, endpage.pstpl
  • 'Paginile de întrebări:' startpage.pstpl, survey.pstpl, startgroup.pstpl, groupdescription.pstpl, question.pstpl, endgroup.pstpl, endpage.pstpl
  • Pagina finală: pagina de pornire .pstpl, evaluare.pstpl, completat.pstpl, endpage.pstpl

Fișiere șablon

Următoarele fișiere șablon sunt folosite pentru a produce sondajul dvs. public și trebuie să existe în orice folder de șablon nou creat de dvs.:

  • startpage.pstpl: Produce începutul fiecărei pagini html. Începe la "<head> " eticheta și nu trebuie să conțină "<html> „. Acest „început” al unei pagini html standard este scris de scripturi. Asigurați-vă că fișierele dvs. startpage.pstpl conțin un<body> etichetă. Chiar dacă multe browsere nu necesită respectarea strictă a standardelor HTML W3, scriptul LimeSurvey trebuie să găsească o etichetă pentru a rula anumite elemente javascript. Nu este obișnuit să vedeți multe „cuvinte cheie” utilizate în fișierul startpage.pstpl. Cu toate acestea, poate doriți să adăugați {SURVEYNAME} în titlu. Fișierul startpage.pstpl poate conține cod care se termină în fișierul endpage.pstpl corespunzător. De exemplu, puteți începe un tabel din acest fișier și puteți închide tabelul din fișierul endpage.pstpl. Fișierele startpage.pstpl și endpage.pstpl înconjoară fiecare pagină posibilă utilizată de LimeSurvey.
  • survey.pstpl: Acest șablon este al doilea folosit în majoritatea paginilor și oferă un spațiu pentru a pune numele sondajului si descriere. Acest șablon nu are un șablon de „închidere” corespunzător și, ulterior, ar trebui să închideți toate etichetele deschise în acest fișier șablon (adică: nu lăsați un tabel deschis aici deoarece nu există niciun alt loc unde să-l închideți).
  • ' welcome.pstpl:' Acest șablon este folosit doar în ecranul de întâmpinare (care se află și pe pagina principală pentru sondajele „tot într-unul”). Puteți utiliza acest lucru pentru a tipări textul de bun venit și alte informații care ar trebui furnizate în introducere. La fel ca fișierul „survey.pstpl”, nu există un șablon de „închidere” corespunzător, așa că toate etichetele deschise în acest fișier șablon ar trebui să fie și ele închise.
  • startgroup.pstpl: Acest șablon poate oferi un „rezumat” pentru întrebările din cadrul unui grup. Are un șablon „endgroup.pstpl” potrivit care poate fi folosit pentru a închide orice etichete deschise în acest fișier, astfel încât să puteți deschide un tabel în cadrul acestuia.
  • groupdescription.pstpl: Acest fișier șablon este folosit pentru a afișa o descriere a unui grup. Vă rugăm să rețineți că în setările sondajului (accesați „Setări de prezentare și navigare” făcând clic pe fila „Prezentare”) puteți seta dacă descrierea grupului trebuie afișată sau nu. Dacă nu, atunci acest fișier nu este inclus deloc.
  • question.pstpl: Acest fișier conține secțiunile de întrebare, răspuns și text de ajutor ale sondajului dvs. În sondajele „grup cu grup” și „tot într-unul”, acest șablon este ciclic în mod repetat cu fiecare întrebare. Nu există niciun fișier de închidere corespunzător pentru aceasta și toate etichetele ar trebui închise.
  • question_start.pstpl: Acest fișier conține elementele individuale găsite la începutul unei întrebări. Este inclus în „question.pstpl” prin intermediul cuvântului cheie {QUESTION}. Este destinat să permită designerilor de șabloane mai mult control asupra aspectului unei întrebări. Acest șablon se află în afara sistemului normal de șabloane și „a fost înlocuit (începând cu LimeSurvey 1.87)”. Toate cuvintele cheie din acest șablon sunt acum disponibile direct în question.pstpl.
  • completed.pstpl: Această pagină este afișată ca pagină finală când răspunsurile la sondaj au fost salvate și sondajul sa încheiat. Poate fi folosit pentru a afișa un „link de redirecționare” așa cum este setat în configurarea sondajului.
  • endgroup.pstpl: Acest fișier închide grupul și poate fi folosit pentru a închide orice etichete deschise în fișier startgroup.pstpl
  • navigator.pstpl: Acest fișier conține butoanele care navighează prin sondaj, „următorul”, „prev”, „ultimul”, „trimitere”, „salvare până acum” și linkul „șterge tot”. Este folosit în toate paginile, cu excepția paginii completate.
  • printanswers.pstpl: Acest fișier are pachetul HTML necesar pentru versiunea tipărită a sondajului.
  • print_group.pstpl : Acest fișier este același cu startgroup.pstpl și endgroup.pstpl, dar pentru versiunea tipărită a sondajului.
  • print_question.pstpl: Acest fișier este același cu question.pstpl , dar pentru versiunea tipărită a sondajului.
  • print_survey.pstpl: Acest fișier este același cu survey.pstpl, dar pentru versiunea tipărită a sondajului.

CSS și Javascript

Două fișiere care sunt întotdeauna utilizate într-un șablon sunt template.css (pentru CSS) și template.js (pentru Javascript).

  • {TEMPLATECSS}: Adăugați linii pentru CSS implicit, template.css, și template-rtl.css pentru limbajul rtl.
  • {TEMPLATEJS}: Adăugați linii pentru fișierele javascript implicite, template.js și toate fișierele js necesare pentru LimeSurvey.

Folosind Bootstrap

LimeSurvey are Bootstrap 3 încorporat, astfel încât să vă puteți stila toate șabloanele cu clasele Bootstrap bine documentate. Pentru mai multe informații, consultați Bootstrap documentație.

Pluginul Awesome-Bootstrap-Checkbox este de asemenea inclus. Cu acesta, puteți utiliza clasele de culoare tipice Bootstrap (informații, avertisment, pericol, etc.) și cu sufixul „-checkbox” sau „-radio”, deși stilând casetele de selectare și radiourile după cum preferi.

Înlocuirea implicită a CSS sau Javascript

Unele întrebări folosesc fișiere specifice pentru Javascript sau CSS. Dacă trebuie să înlocuiți o funcție, utilizați un sistem în cascadă. Pentru funcția javascript, ultima funcție citită este funcția utilizată.

Alte fișiere șablon

privacy.pstpl, invitationemail.pstpl, reminderemail.pstpl și confirmationemail.pstpl nu mai sunt folosite de LimeSurvey, iar valorile implicite sunt setați în schimb în fișierele de limbă aplicabile. Mesajele de e-mail pot fi acum editate în funcție de sondaj.

Pagini standard

Există zece pagini standard pe care un participant la sondaj le poate vedea în timpul accesării sau accesării aplicației LimeSurvey. Fiecare este construit dintr-un număr de fișiere „Șablon” comune din „Șablonul” specificat în setările sondajului. Tabelul de mai jos indică ce fișiere șablon sunt folosite la construirea fiecărei pagini.

Pagini de sondaj/
Fișiere șablon
Sondaj
Lista
Bine ați venit Întrebare Finalizată Ștergeți totul Înregistrați Încărcați Salvați Imprimați
Răspunsuri
Tipărește
Survey
SurveyList Fișier:check.gif
Bine ați venit Fișier:check.gif
Confidențialitate Fișier:check.gif
Navigator Fișier:check.gif
Sondaj Fișier:check.gif Fișier:check.gif
StartGroup Fișier:check.gif
Descrierea grupului Fișier:check.gif
Întrebarea * Fișier:check.gif
EndGroup Fișier:check.gif
Evaluare Fișier:check.gif
Finalizat Fișier:check.gif
ClearAll Fișier:check.gif
Înregistrare Fișier:check.gif
Încărcare Fișier:check.gif
Salvare Fișier:check.gif
PrintAnswers
Print Survey
Grup de tipărire
Tipărește întrebarea
Pagina de pornire
EndPage
Template.css
Fișier:check.gif

* NOTĂ: În versiunea 1.90+, aceasta înlocuiește question.pstpl ȘI question_start.pstpl. Dacă utilizați un șablon personalizat vechi, trebuie să adăugați următoarea linie la începutul lui question.pstpl:

<div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}">

Și apoi adăugați eticheta de închidere corespunzătoare la sfârșitul question.pstpl:

</div>

* NOTĂ: În versiunea 1.91 și anterioară, fișierele LimeSurvey js nu sunt incluse în șablon. În versiunea 2, trebuie să utilizați {TEMPLATEJS} într-unul dintre fișierele șablon pentru a adăuga linkul la fișierul js. Îl puteți adăuga în startpage.pstpl sau în endpage.pstpl. Puteți elimina linia {TEMPLATEURL}/template.js și trebuie să o înlocuiți cu {TEMPLATEJS} pentru a actualiza un șablon personal.

Secțiunea de control al fișierelor

În fereastra „control fișiere” din stânga, puteți face clic pe unul dintre fișierele șablon care este utilizat pentru a compila pagina. Puteți vedea „partea ecranului”, fișierele JavaScript și CSS. Codul HTML pentru acel fișier va apărea apoi în fereastra „Editare acum” din centru. Dacă șablonul este editabil (determinat de permisiunile directorului), apoi puteți face orice modificări și le puteți salva.


Fereastra „Alte fișiere” arată o listă cu toate celelalte fișiere din directorul șablonului. Puteți folosi partea dreaptă pentru a „încărca și selecta fișiere imagine (fotografiile, logo-urile,...) sau alte fișiere necesare pentru a vă crea șablonul”.


În loc să utilizați un link pentru fiecare imagine, utilizați șirul de câmp {TEMPLATEURL}. Deci, în loc de:

img src='/limesurvey/templates/yourtemplate/files/mypicture.jpg'

Puteți folosi (New in 2.50 ):

 img src='{TEMPLATEURL}fișiere/mypicture.jpg'

În versiunile LimeSurvey înainte de 2.50 utilizați:

 img src='{TEMPLATEURL}mypicture.jpg'

O „probă” a paginii șablon pe care o editați va fi vizibilă în partea de jos a ecranului. Nu există nicio modalitate de a șterge un șablon din editorul de șabloane. Acest lucru trebuie făcut prin accesarea directorului de bază și ștergerea manuală a fișierelor de acolo. Aveți, de asemenea, posibilitatea de a selecta diferite rezoluții de ecran pentru a evalua mai bine aspectul și aspectul șablonului.

Notă: Șabloanele livrate nu pot fi editate folosind editorul de șabloane. Dacă doriți să le modificați, creați mai întâi o copie și editați copia.

Locația fișierelor șablon

LimeSurvey stochează fiecare dintre șabloanele „standard” în propriul lor subdirector distinct în directorul „/templates” care este păstrat în directorul public împreună cu celelalte fișiere publice LimeSurvey. Șabloanele de utilizator personalizate sunt stocate în directorul /upload/templates.

Ar trebui să existe „ÎNTOTDEAUNA” un director „implicit” în directorul de șabloane. Acest șablon este utilizat în mod implicit și ca alternativă dacă un folder de șablon nu există sau nu poate fi găsit. Vine instalat implicit.

Puteți utiliza orice fișiere imagine pe care le încărcați în zona de gestionare a șablonului cu ajutorul acestei sintaxe:

{TEMPLATEURL}filename.xyz

Stilizarea întrebărilor cu CSS

Stilizarea întrebărilor în CSS a devenit mult mai ușoară. Fiecare tip de întrebare are acum o clasă unică. Întrebările obligatorii au o clasă suplimentară obligatorie. De exemplu, pentru o întrebare neobligatorie:

<div id="question5" class="gender">
...
</div>

și dacă întrebarea este obligatorie:

<div id="question5" class="gender mandatory">
...
</div>

și dacă întrebarea este obligatorie, dar utilizatorul nu a răspuns sau dacă există validare la o întrebare:

<div id="question5" class="gender mandatory input-error">
...
</div>

și dacă întrebarea are validarea aplicată, dar utilizatorul nu a răspuns corect:

<div id="question6" class="text-short input-error">
...
</div>

Clasuri globale pentru partea cu întrebări

Aceste clase sunt folosite pentru fiecare tip de întrebare. Unele tipuri de întrebări folosesc doar una sau două clase, în timp ce altele pot folosi mult mai multe.

Clase globale
Nume clasa Partea Tip întrebare Exemple Notă
.întrebarea (Obsolete since 3.0) Toate blocurile de întrebări Toate tipurile de întrebare

,

    ,
    .ls-răspuns (New in 3.0 ) Toate blocurile de întrebări Toate tipurile de întrebare
    ,
      ,
      .lista-subîntrebări Lista subîntrebărilor Întrebare cu variante multiple, tip de întrebare matrice
        ,
        Se folosește și .questions-list
        .listă-răspunsuri Lista de răspunsuri Întrebare cu o singură alegere, tip de întrebare matrice, întrebare text cu introducere multiplă
          ,
          .răspuns-articol Partea de răspuns: un singur răspuns Întrebare cu o singură alegere, tip de întrebare matrice, întrebare text cu introducere multiplă
        • ,
        • .noanswer-item Partea de răspuns pentru niciun răspuns Întrebare cu o singură alegere, tip de întrebare matrice
        • ,
        • Niciun răspuns este de asemenea un răspuns, apoi au clasa dublă fără răspuns și item-răspuns
          .intrebare-articol Partea de întrebare: o întrebare Întrebare cu mai multe text, tip de întrebare matrice
        • ,
        • Unele răspunsuri sunt și întrebări. Apoi avem o mulțime de class="question-item answer-item"
          .lista de butoane O listă de butoane Da nu și întrebarea de gen
          .buton-articol Partea de răspuns cu un buton Da nu și întrebarea de gen
        • .checkbox-list O listă de casete de selectare Întrebare cu alegere multiplă, număr de matrice (căsuță de selectare) tip întrebare
            ,
          Unele tipuri de întrebări folosesc clasa multi-listă, cum ar fi caseta de selectare cu comentariu: class="checkbox-list text-list"
          .checkbox-array (New in 3.0 ) O serie de casete de selectare Matrice (numere) cu opțiunea casetă de selectare
          .checkbox-item Partea de răspuns cu o casetă de selectare Întrebare cu alegere multiplă, număr de matrice (căsuță de selectare) tip întrebare
        • ,
        • .radio-list O listă de articole radio Întrebare cu o singură alegere, tip de întrebare matrice (fiecare rând)
            ,
          .radio-array (New in 3.0 ) O serie de articole radio Tip întrebare matrice
          .articol radio Partea de răspuns cu un radio Întrebare cu o singură alegere, tip de întrebare matrice
        • ,
        • .text-list O listă cu introducerea textului Tip de întrebare cu mai multe text, matrice de text
            ,
          .articol-text Partea de răspuns a unei introduceri de text Tip de întrebare cu mai multe text, matrice de text
        • ,
        • .numeric-list O listă de introducere a textului cu răspuns numai numeric Tip de întrebare cu mai multe cifre, matrice de numere
            ,
          .lista de numere O listă de introducere a textului cu răspuns numai numeric (fiecare rând) Tip de întrebare cu mai multe cifre, matrice de numere
            ,
          .number-array (New in 3.0 ) Partea de răspuns a unei intrări numerice Matrice de număr
          .select-list (Obsolete since 2.50) O listă de select Numere matrice, matrice dual scale (selectați)
          .lista dropdown (New in 2.50 ) O listă de select Numere matrice, matrice dual scale (selectați) (fiecare rând)