This page is a translated version of the page New Template System in LS3.x and the translation is 100% complete.

Uvod

Imajte na umu: u prethodnim verzijama programa LimeSurvey datoteke koje određuju kako upitnik izgleda, kako je prikazan u smislu boja, fontova, rasporeda i (nekih) ponašanja nazivale su se „predložak”. Zbog novih spoznaja to se sada naziva „tema”, dok je predložak rezerviran za primjere upitnika.

Na ovoj stranici naučit ćete kako:

Koristiti novi sustav tema programa LimeSurvey 3.0.
Koristiti nasljeđivanje za upravljanje vlastitim temama.
Dodati sliku u svoju temu
Upravljati opcijama teme za svoje upitnike i skupine upitnika

LimeSurvey 3 uvodi potpuno novi sustav za obradu tema, temeljen na Twigu 1.29 i Bootstrapu, koji omogućuje nasljeđivanje tema i opcije tema. Potpuno uklanja stari sustav zamjenskih ključnih riječi. Tako se sada 100 % frontend HTML-a može prilagoditi. Na primjer, u starom sustavu tema postojala je ključna riječ {ASSESSMENTS} koju je u trenutku izvođenja zamjenjivao HTML procjena. Dizajner teme nije imao načina da prilagodi taj HTML (osim korištenjem JavaScripta). Sada postoji datoteka assessments.twig koja sadrži logiku (napisanu u Twigu) za generiranje tog HTML-a. Na ovim stranicama objasnit ćemo vam kako koristiti ovaj novi sustav tema.

Ovdje nećemo detaljno objašnjavati kako Twig radi. To je neka vrsta vrlo pojednostavljenog PHP-a koji nudi visoku razinu sigurnosti zahvaljujući sustavu „sandbox” (o tome ćemo detaljnije u dijelu o jezgrenom kodu sustava tema). Ako već poznajete PHP, bit će vam iznimno lako svladati ga. Ako ne poznajete PHP, i dalje bi ga trebalo biti prilično lako naučiti. Pogledajte dokumentaciju za Twig 1.X: https://twig.symfony.com/

Uređivanje putem administratorskog sučelja

Popis tema

Na nadzornoj ploči administratora sada postoji okvir za pristup popisu tema:

Popis je podijeljen u 5 stupaca:

pregled teme: to je samo slikovna datoteka pod nazivom „preview.png” u korijenu teme
„naslov” teme kako je navedeno u manifestu (config.xml u korijenu teme)
opis teme: tekst postavljen u njezinu manifestu
vrsta teme: Osnovna tema (isporučuje se s programom LimeSurvey), Korisnička tema (dodana u direktorij upload), XML tema (nije učitana u bazu podataka)
Proširi: ako tema proširuje drugu temu, ovdje će biti navedeno njezino ime
Neki gumbi za radnje:
- Instaliraj: učitat će manifest teme kako bi je dodao u bazu podataka i omogućio njezin odabir na razini upitnika
- Deinstaliraj: izbrisat će konfiguracijske zapise teme u bazi podataka
- Uređivač teme: preusmjerit će vas na uređivač teme
- Opcije teme: odvest će vas na globalnu konfiguraciju opcija teme

Uređivač teme

Ova dokumentacija pretpostavlja da već znate koristiti uređivač teme u prethodnoj verziji LS-a.

Uređivač teme ostao je što sličniji izvornom. Dakle, kada otvorite osnovnu temu, ne možete je uređivati. No sada umjesto gumba „kopiraj” imate gumb „proširi”.

Sada proširujete temu — *Sada **proširujete** temu*

Kratki pregled koncepta nasljeđivanja tema

U LS3 tema sada može naslijediti drugu temu, tj. može „proširiti” drugu temu. To znači da će direktorij teme biti praktički prazan i sadržavat će samo datoteke (prikaze, stilove, skripte, resurse itd.) koje se razlikuju od izvornih. Tako ćete lako moći izraditi niz tema za svoje različite korisnike bez potrebe za održavanjem mnogo različitih tema. Na primjer: možete imati vlastitu temu, zatim verziju za jednu tvrtku (s njezinim logotipom, stilom, možda poveznicom na njezinu web-stranicu u podnožju itd.), drugu verziju za drugu tvrtku itd. Ako zatim ažurirate CSS ili globalni raspored svoje prilagođene teme, sve teme koje je nasljeđuju ažurirat će se automatski. Imajte na umu da je nasljeđivanje rekurzivno: tema može proširiti temu koja proširuje drugu temu itd.

To također znači da ćete, ako proširite jednu od osnovnih tema programa LimeSurvey, i dalje imati koristi od njezinih ažuriranja.

Novosti u korisničkom sučelju

Da biste proširili temu Monochrome programa LimeSurvey, idite na popis tema i kliknite gumb „Uređivač teme” uz temu Monochrome. Zatim kliknite „proširi” i potvrdite novo ime „extends_monochrome”.

Ako sada otvorite direktorij upload (svojim klijentom za datoteke/FTP), vidjet ćete da je stvoren novi direktorij: upload/themes/extends_monochrome Sadrži XML datoteku i direktorije, ali je većina direktorija prazna. Nema ni prikaza, ni CSS-a, ni JS-a. No tu temu i dalje možete odabrati u upitniku kao običnu temu i izgledat će potpuno isto kao tema Monochrome.

*Stablo teme (direktoriji i datoteke) neposredno nakon izrade. Praktički je prazno*

Resursi (jpg, png itd.) izvorne teme kopiraju se prilikom proširivanja teme. To je zato što, ako lokalno kopirate CSS datoteku iz izvorne teme i ona se poziva na te datoteke (npr. u naredbi background-image), te će slike morati pronaći u putanji trenutne teme.

Uređivač teme za temu extends_monochrome izgleda ovako:

Nema velike razlike u odnosu na stari uređivač tema. Navedimo glavne:

Ključna riječ naslijeđeno na popisu datoteka. Znači da datoteka nije prisutna u direktoriju teme i da će se koristiti datoteka iz izvorne teme.

Glavni uređivač ( ACE uređivač ) prikazuje sadržaj odabrane datoteke. Datoteke ne sadrže samo HTML, CSS ili JS, nego i Twig naredbe. Te Twig naredbe daju nam mogućnost da dio logike koja je prije bila skrivena duboko u jezgri prenesemo u prikaze teme, gdje ju je sada moguće prilagoditi.

Zbog toga sada u padajućem izborniku gornjeg izbornika imate dostupno više vrsta zaslona. Primijetit ćete stranice kao što su ‘Popis upitnika’, ‘Učitaj’, ‘Spremi’, ‘Pogreška’, ‘Registracija’, ‘Procjene’, ‘Ispiši odgovore’ koje prije nisu bile dostupne ili ih zapravo nije bilo moguće prilagoditi.

Poveznica ‘tip’ na dnu popisa datoteka daje vam Twig način za dodavanje slike u vaš HTML

Gumb ‘spremi promjene’ postaje gumb Kopirajte u lokalnu temu i spremite promjene

Brzi primjer: dodavanje slike

Gumb Kopirajte u lokalnu temu i spremite promjene radi upravo ono što piše: ako bilo što izmijenite u datoteci i zatim kliknete taj gumb, datoteka će se kopirati u temu koju uređujete, a vaše promjene bit će spremljene.
Na primjer: kliknite datoteku layout_global.twig, zatim neposredno prije bloka content ( {% block content %}) dodajte tekst „TEST” i kliknite gumb. Vidjet ćete da se oznaka datoteke promijenila iz „naslijeđeno” u „lokalno”, a gumb je sada običan gumb spremi promjene.

Ako otvorite upravitelj datoteka i odete u direktorij upload/themes/extends_monochrome/views/, vidjet ćete da sadrži samo jednu datoteku, layout_global.twig, te da se u njoj nalazi tekst „TEST”.

Umjesto dodavanja nasumičnog teksta, sada ćemo dodati sliku. Ako kliknete poveznicu tip, prikazat će vam:
Za korištenje slike u .twig datoteci: {{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
Ako ste pročitali dokumentaciju za Twig (a do ove točke trebali ste), znate da {{ function( ) }} ispisuje rezultat funkcije na zaslon. Ovdje je funkcija image( ).

Ako vas zanima što radi, možete je pronaći u kodu ovdje (verzija RC3): funkcija image() u RC3

Ako ne razumijete kod, ne brinite: ne trebate znati kako radi, nego zašto i kako ga koristiti.

Funkciju image() trebali biste koristiti iz dva razloga:

Funkcija image pretražuje temu kako bi pronašla sliku. Ako je tema na kojoj radite proširenje druge teme i ako lokalno kopirate datoteku u koju ste umetnuli sliku, a ta slika nije kopirana u lokalnu temu, funkcija će proći kroz stablo nasljeđivanja tema kako bi pronašla gdje se slika nalazi.
Koristit će upravitelj resursa (asset manager), što poboljšava performanse vaše teme. Više informacija potražite u dokumentaciji za Yii Asset Manager: http://www.yiiframework.com/wiki/148/understanding-assets/

Dakle, da biste dodali sliku u svoju temu:

jednostavno je učitajte kao i obično pomoću alata za učitavanje datoteka s desne strane, a zatim je dodajte na željeno mjesto u bilo kojoj twig datoteci:

{{ image('./files/myfile.png') }}

Ako želite dodati alternativni tekst za svoju sliku (za čitače zaslona i HTML provjeru), dodajte:

Ako želite dodati atribut class i id:

{{ image('./files/myfile.png'), ‘moj alternativni tekst’, {“class”: “a_nice_css_class”, “id”: “any_id”} }}

Neke stvari s našeg popisa zadataka

Korisnicima omogućiti učitavanje prilagođene datoteke pregleda izravno iz uređivača
Dodati gumb za brisanje lokalne datoteke i povratak na naslijeđeno stanje
Kopirati samo slike korištene u CSS datotekama (navođenjem u manifestu kao datoteke za kopiranje)
Podsjetiti koju temu trenutna tema proširuje (ako je proširuje)

Opcije teme

Još jedna novost u LS3 je stranica s opcijama teme. Kao što ćemo kasnije vidjeti, autori tema mogu izraditi vlastite opcije, pa čak i vlastitu administratorsku stranicu s opcijama. Ovdje ćemo ukratko vidjeti kako radi stranica s opcijama osnovnih tema. Za pristup opcijama teme na globalnoj razini: kliknite „opcije teme” na popisu tema

Napredne opcije

Kada otvorite karticu Opcije teme, možete odabrati uređivanje jednostavnih opcija ili naprednih opcija. „Napredne opcije” samo su goli obrazac koji vam omogućuje pristup glavnim poljima konfiguracije teme iz baze podataka. Da biste razumjeli kako to funkcionira, trebali biste pročitati i o XML datoteci i izradi teme od nule. Stoga je prilično složeno i namijenjeno naprednim korisnicima.

Ako ipak želite urediti napredne postavke, kliknite na karticu Napredne opcije

CSS datoteke: CSS datoteke koje treba dodati predlošku;
JS datoteke: JS datoteke koje treba dodati predlošku;
Print CSS datoteke: CSS datoteke koje se učitavaju pri ispisu predloška;
Opcije: Ovo polje sadrži opcije (i njihove vrijednosti) koje treba proslijediti prikazu predloška;
CssFramework Name: Naziv CSS okvira koji se učitava. Za sada samo Bootstrap ili ništa;
Cssframework Css: U ovom polju možete zamijeniti osnovni bootstrap.css drugom prilagođenom verzijom;
Cssframework Js: Ovdje se osnovna datoteka boostrap.js može zamijeniti drugom prilagođenom verzijom;
Paketi za učitavanje: Ovom postavkom možete učitati neke osnovne pakete resursa iz LimeSurveya.

Na vrhu ćete primijetiti polje za učitavanje, koje vam omogućuje da učitate datoteku u direktorij datoteka teme. Ovi se parametri mogu koristiti za promjenu cjelokupnog izgleda teme.

Upozorenje! : Ne mijenjajte vrijednosti osim ako znate što radite!

Jednostavne opcije

Stranica s jednostavnim opcijama dolazi iz samog predloška. Izrađena je pomoću twig datoteke i nešto JavaScripta unutar direktorija /options teme: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Neispravna poveznica)

Ova stranica može biti potpuno drukčija od teme do teme, a autore tema snažno potičemo da izrade vlastiti izgled i dojam.

Stranica s jednostavnim opcijama samo popunjava polja napredenog obrasca. To možete vidjeti uključivanjem ili isključivanjem postavke na jednostavnoj stranici i promatranjem kako se povezano polje u naprednom obrascu mijenja. Na primjer, u jednostavnim opcijama zadanog predloška, ako promijenite Bootswatch temu u „Darkly” i zatim kliknete karticu naprednih opcija (čak i bez spremanja), vidjet ćete da se polje „Cssframework Css” promijenilo iz

{"replace": [["css/bootstrap.css","css/flatly.css"]]}
u
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
Evo različitih jednostavnih opcija za osnovne teme:

Ajax mode: Treba li sljedeću stranicu učitati putem ajaxa (brže) ili ponovnim učitavanjem stranice (bolje za potrebe otklanjanja pogrešaka)
Pozadinska slika: ako je postavljeno na Da, učitat će se slika pod nazivom pattern.png (u verziji Master bit će zamijenjena odabirom datoteke)
Box container: ako je postavljeno na Ne, pitanja neće biti smještena u okvir (tako možete koristiti velike tablice šire od širine zaslona)
Brandlogo: ako je postavljeno na ne, naziv upitnika prikazat će se u gornjoj traci, a u suprotnom možete odabrati jednu od slika iz direktorija datoteka koja će se koristiti kao logotip.
Animacija tijela stranice: ako je postavljeno na da, možete odabrati jednu od animacija koja će se primijeniti kada se učita tijelo upitnika
Animiraj pitanje: isto vrijedi za pitanja
Animate alerts: isto vrijedi za upozorenja
Bootstrap theme: ovdje možete odabrati Bootstrap temu koja će se učitati. Dolaze iz Bootswatcha https://bootswatch.com/3/

Biblioteka koja se koristi za animacije je animate.css: https://daneden.github.io/animate.css/ Naravno, pružatelj teme može dodati vlastitu biblioteku animacija ili uopće ne koristiti biblioteku animacija.

Monochrome teme koriste istu bootstrap temu boja kao i administratorsko korisničko sučelje. Ne koriste sustav zamjene CSS okvira, nego jednostavno dodaju CSS datoteku. Tako ilustriraju još jedan način rada s prilagođenim temama za pružatelje tema.

Sustav nasljeđivanja

U prethodnom dijelu vidjeli smo da tema može proširiti drugu temu. Konfiguracija teme također može naslijediti konfiguraciju druge teme. To znači da za određenu temu možete imati konfiguraciju na

globalnoj razini (onoj koju smo upravo vidjeli, dostupnoj s popisa tema)
razini skupine upitnika
i posljednju na razini upitnika.

Svaki parametar na određenoj razini može naslijediti vrijednost s više razine: nasljeđivanje skupine upitnika. Prvo pogledajmo razinu skupine upitnika.

Na razini skupine upitnika

Jedna od drugih velikih novosti LS3 zaista je sustav skupina upitnika. Sada možete stvoriti različite grupe za organizaciju svojih upitnika. Za pristup otvorite popis upitnika, a zatim kliknite na karticu skupina upitnika:

U ovom popisu imate dva gumba za radnje. Ako je skupina prazna, možete je izbrisati. U suprotnom je uvijek možete urediti. Klikom na gumb za uređivanje otvorit će se stranica za konfiguraciju skupine upitnika:

Treća kartica ove stranice zove se „Opcije predloška za ovu skupinu upitnika”. Ako kliknete na nju, vidjet ćete isti popis tema kao na popisu tema, osim što je ovdje vidljiv samo gumb za opcije (uređivač tema dostupan je samo s glavnog popisa).
Ako sada kliknete na opcije za zadani predložak, vidjet ćete ovo:

Naslijedi sve znači da će se cijela konfiguracija naslijediti s globalne razine konfiguracije.
Ako otvorite stranicu naprednih opcija, vidjet ćete da su sva polja postavljena na nasljeđivanje.
Ako u jednostavnim opcijama kliknete na „ne” za „Naslijedi sve”, ponovno ćete vidjeti stranicu vrlo sličnu stranici globalnih opcija. Jedina je razlika u tome što za svako polje možete odabrati da, ne ili naslijedi; a svaki padajući izbornik ima vrijednost naslijedi'.

Skupina upitnika može biti podređena drugoj skupini. U tom slučaju naslijedit će postavke od nadređene skupine.

Na razini upitnika

Prilikom uređivanja upitnika u lijevom izborniku vidjet ćete novu stavku „Opcije teme”. Ona vodi na stranicu s opcijama teme odabrane za trenutni upitnik. Naći ćete isti sustav nasljeđivanja kao i kod skupine upitnika, ali ovaj put naslijedi znači da će se postavka naslijediti od skupine upitnika kojoj upitnik pripada.

Primjer upotrebe

Pretpostavimo da koristite jednu temu za različite tvrtke (A i B). Svoje omiljene opcije postavljate na globalnoj razini (npr. ajax uključen, animacija tijela stranice klizanjem, upozorenja s pulsiranjem). Zatim za svaku tvrtku stvarate skupinu upitnika: skupinu upitnika za tvrtku A koja će sadržavati sve upitnike te tvrtke i skupinu za tvrtku B koja će sadržavati sve upitnike tvrtke B. Na toj razini postavit ćete samo logotip i pozadinu, a ostale opcije prepustit ćete nasljeđivanju. Tako će svi upitnici u skupini A koristiti logotip tvrtke A, a svi upitnici iz skupine B logotip tvrtke B. Za jedan od upitnika tvrtke A mogli biste koristiti drugačiju pozadinu u skladu s temom upitnika: pozadinu jednostavno promijenite u opcijama na razini upitnika. Ako vam netko iz tvrtke B kaže da je upozorenje s pulsiranjem previše agresivno i da bi radije nešto blaže, poput postupnog pojavljivanja, jednostavno promijenite animaciju upozorenja na razini skupine upitnika B i svi upitnici te skupine koristit će tu animaciju. Ako tvrtka A promijeni logotip, možete ga promijeniti na razini skupine upitnika A i svi upitnici te skupine koristit će novi logotip.

Ovi se primjeri temelje na trenutnim opcijama osnovne teme. No naravno, ako ste pružatelj tema ili ako se znate malo služiti skriptama u Twigu, možete dodati vlastite opcije. Na primjer, mogli biste dodati opciju „info footer” u koju biste mogli upisati podatke poput web-mjesta tvrtke ili telefonskog broja za pomoć. Zatim, ako tvrtka A ima različite odjele s različitim telefonskim brojevima, u skupini upitnika A možete jednostavno stvoriti jednu podskupinu za svaki odjel. Svaka podskupina imat će vlastiti telefonski broj u tim opcijama.

Česta pitanja o prilagodbi tema

Ovdje ćete pronaći odgovore na pitanja postavljena na forumu koja vam mogu pomoći pri prilagodbi teme.

Prilagodba CSS-a/JS-a: upravitelj resursa (asset manager) („zašto se moje promjene ne primjenjuju?”)

Ako pokušavate ažurirati CSS/JS teme izravnim uređivanjem koda u omiljenom uredniku, mogli biste se iznenaditi što se vaše promjene ne primjenjuju.

Od verzije 2.50 LS koristi Yii upravitelj resursa (asset manager): Yii dokumentacija o resursima

On premješta CSS/JS datoteke teme u podmapu tmp/ s nasumičnim nizom znakova (npr. „tmp/1ef64ml/”). Dakle, ako promijenite CSS/JS datoteku i to javite upravitelju resursa, datoteke se kopiraju u novu podmapu s novim nazivom pa se predmemorija korisničkog preglednika ažurira i korisnici vide novi CSS/JS. Inače bi morali očistiti predmemoriju preglednika.

Ovdje su CSS poveznice u zaglavlju kada je upravitelj resursa uključen:

Kao što vidite, sve upućuju na podmape tmp/.

Ovdje su CSS poveznice u zaglavlju kada je upravitelj resursa isključen:

Kao što vidite, upućuju na stvarne datoteke teme.

Naravno, ako upravitelj resursa ne zna da ste promijenili datoteku, stara datoteka iz stare tmp/ mape ostaje nepromijenjena i vaše se promjene nikada neće primijeniti.

Dakle, pri uređivanju CSS-a/JS-a teme imate nekoliko mogućnosti:

Možete koristiti LS uređivač teme: on se brine za upravitelj resursa i ne morate brinuti ni o čemu
Možete uključiti način otklanjanja pogrešaka (debug): time će se isključiti upravitelj resursa pa se pozivaju stvarne css/js datoteke vaših tema (ali tada morate osvježiti predmemoriju preglednika pri svakom učitavanju)
Možete osvježiti predmemoriju resursa: u Globalne postavke -> Općenito -> Očisti predmemoriju resursa

Korištenje uređivača teme za uređivanje prilagođenog CSS-a daleko je najbolje rješenje.

Korištenje uređivača teme pomoći će vam da razumijete arhitekturu novog mehanizma tema. Također, ako prilagođavate temu fruity, budite oprezni sa specifičnošću CSS-a: većina definicija koristi selektor ".fruity" (jednu od klasa elementa body)

Dodavanje prilagođenih fontova u moju temu

Jednostavan način: korištenje Google Font CDN-a

Tema upitnika Bootswatch koristi Google Font CDN. Pogledajmo kako to funkcionira: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");

Zatim se font Lato koristi putem CSS pravila: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72

body {
  ...
 font-family: "Lato";
 ...
}

Na taj način u svojoj prilagođenoj temi možete koristiti bilo koji Google font. Naravno, trebali biste ukloniti odabir fonta iz opcija svoje teme. Izbrišite ove retke u options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

Korištenje lokalnog fonta

Naravno, datoteke fontova možete i preuzeti te ih koristiti s lokalnog poslužitelja umjesto s Google CDN-a (bolje za privatnost). Kao primjer kako to učiniti, evo naše lokalne verzije fonta noto: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css

@font-face {
  font-family: 'Noto Sans';
  font-weight: 300;
  font-style: normal;
  src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...

U CSS datoteci svoje teme možete koristiti vrlo sličnu definiciju, a zatim kopirati datoteku NotoSans-Regular.ttf u mapu css/font-src/ svoje teme.

Zatim primijenite taj font na body (ili bilo koji drugi element) kao gore i uklonite zadani odabir fonta u opcijama.

Izrada vlastitog odabira fonta u opcijama

Za sada ne možete jednostavno koristiti osnovni odabir fonta za dodavanje vlastitog fonta u opcijama. Prvo moramo omogućiti krajnjem korisniku da učita vlastite pakete (pogledajte sljedeći odlomak: Pogled na odabir fonta u temi Fruity).
Evo kako postupiti:

Dodajte dva fonta (my_custom_font i my_custom_other_font) u svoju temu, koristeći CDN ili lokalni poslužitelj
Zatim u svoju css datoteku dodajte dvije nove klase:

.font-my_custom_font {
 font-family: 'my_custom_font ';
}
.font-my_custom_other_font {
 font-family: 'my_custom_other_font';
}

U XML datoteku svoje teme dodajte opciju fonta (zadani će biti my_custom_font) :

    <options>
        ....
        <font>my_custom_font</font>
    </options>

u option.twig dodajte odabir fonta dodavanjem sljedećih redaka (za sada neprovjereno, pa se požalite na forumu ako ne radi):

            
            <div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'>
                <hr/>
            </div>
            <div class='row action_hide_on_inherit'>
                <div class='col-sm-12'>
                    <div class='panel panel-default'>
                        <div class='panel-heading'>{{ "My custom fonts" | t }}</div>
                        <div class='panel-body'>
                            <div class='form-group row'>
                                <label for='simple_edit_font' class='control-label'>{{ "Select font:" | t }}</label>
                                <div class='col-sm-12'>
                                    <select class='form-control selector_option_value_field' id='simple_edit_font' name='font'>
                                    {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %} //Shouldn't this be "theme" in stead of "template"?
                                        {% set fontOptions = fontOptions ~ '<option value = "inherit" > Inherit</option>' %}
                                    {% endif %}
                                   <optgroup  label="{{ "My Custom fonts" | t }}">
                                   <option class="font-my_custom_font"     value="custom_font"   data-font-package=""  >Custom</option>
                                  <option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package=""  >Other</option>
                                  </optgroup>
                                   
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Sada bi vaši korisnici trebali moći birati između ta dva fonta.

Pogled na odabir fonta u temi Fruity

U budućnosti ćemo krajnjim korisnicima omogućiti učitavanje vlastitih paketa resursa, uključujući pakete fontova. Time će prilagodba fontova biti vrlo jednostavna.
Za razumijevanje Yii paketa:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

LimeSurvey paketi definirani su u različitim datotekama. Paketi fontova definirani su ovdje: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Na primjer, paket fonta Noto definiran je ovdje: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53

    'font-noto' => array(
        'devBaseUrl' => 'assets/fonts/',
        'basePath' => 'fonts',
        'css' => array(
            'noto.css',
        ),
    ),

Datoteka noto.css koju paket sadrži nalazi se ovdje: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Obratite pozornost na definiciju css klase ".font-noto" na njezinu kraju:

@font-face {
  font-family: 'Noto Sans';
  ...
}
...
.font-noto{
    font-family: 'Noto Sans';
}

Zatim se u temi Vanilla font Noto koristi dodavanjem paketa noto i postavljanjem opcije fonta na noto:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79

        <packages>
             ....
            <add>font-noto</add>
        </packages>

https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58

    <options>
        ....
        <font>noto</font>
    </options>

Zatim se klasa fonta elementa body definira pomoću te vrijednosti: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76

<body class=" ...  font-{{  aSurveyInfo.options.font }} ... " ... >

Naravno, XML datoteka sadrži samo zadane vrijednosti konfiguracije vaše teme. No te se vrijednosti zapravo definiraju i čitaju iz baze podataka (tablica "template_configuration" (Pitanje: "template_" ili "theme_"?) kao json nizovi znakova. Datoteka option.js samo koristi vrijednost odabira fonta iz jednostavnih opcija kako bi promijenila vrijednost unutar obrasca na kartici naprednih opcija: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

Kada funkcionalnost "učitavanja paketa resursa" postane dostupna, bit će lako dodati skriptu koja pretražuje sve postojeće pakete fontova i dodaje ih u odabir.

Dodavanje opcija teme za kontrolu položaja i prikaza elemenata upitnika

Ovaj vodič prikazuje kako proširenoj temi dodati opcije za prikaz elemenata upitnika na različitim mjestima. U ovom slučaju izradit ćemo opcije teme za prikaz naslova upitnika na dva različita mjesta.

Radi jednostavnosti, vodič ćemo temeljiti na proširenju teme "bootswatch" u LimeSurvey verziji 3.4.3.

Izrada vlastite teme

Proširite temu "bootswatch" kako je gore opisano.
Kopirajte custom.css u lokalnu temu kako je gore opisano.

Izrada novih opcija teme

Kopirajte sadržaj direktorija /themes/survey/bootswatch/options/ u /upload/themes/survey/yourThemeName/options/.

Otvorite /upload/themes/survey/yourThemeName/options/options.twig u uređivaču i pronađite "{# Bootstrap Bootswatch theme #}". Neposredno prije njegovog nadređenog elementa <div class='row'> dodajte sljedeće:

		{# Custom survey name in navbar #}
		<div class='row'>
			<div class='col-sm-12 col-md-6'>

				<div class='form-group row'>
					<label for='simple_edit_options_surveyname1' class='control-label'>Survey name in navbar</label>
					<div class='col-sm-12'>
						<div class="btn-group" data-toggle="buttons">
							<label class="btn btn-default">
								<input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
								Yes
							</label>
							<label class="btn btn-default">
								<input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
								No
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div>

		{# Custom survey name below progress bar #}
		<div class='row'>
			<div class='col-sm-12 col-md-6'>

				<div class='form-group row'>
					<label for='simple_edit_options_surveyname2' class='control-label'>Survey name below progress bar</label>
					<div class='col-sm-12'>
						<div class="btn-group" data-toggle="buttons">
							<label class="btn btn-default">
								<input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
								Yes
							</label>
							<label class="btn btn-default">
								<input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
								No
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div>

Otvorite /upload/themes/survey/yourThemeName/config.xml i dodajte dvije stavke u blok "options" tako da izgleda ovako:

    <options>
        <ajaxmode>on</ajaxmode>
        ...
        <surveyname1>on</surveyname1>
        <surveyname2>on</surveyname2>
    </options>

Time biste na zaslonu Opcije teme trebali dobiti dvije nove opcije, kao ovdje:

Izmijenjeni prikaz naslova upitnika u navigacijskoj traci

Izradite novi direktorij /upload/themes/survey/yourThemeName/views/subviews/header/.
Kopirajte /themes/survey/vanilla/views/subviews/header/nav_bar.twig u taj novi direktorij.

Otvorite /themes/survey/vanilla/views/subviews/header/nav_bar.twig i pronađite "{# Logo option #}". Ispod toga izmijenite naredbu IF za logotip/naziv upitnika tako da izgleda ovako:

		{# Logo option #}
        {% if( aSurveyInfo.options.brandlogo == "on") %}
            <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container"  {{ aSurveyInfo.attr.navbarbrand }}  >
                {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }}
            </div>
        {% endif %}
        {% if( aSurveyInfo.options.surveyname1 == "on") %}
            <div class="{{ aSurveyInfo.class.navbarbrand }}"  {{ aSurveyInfo.attr.navbarbrand }} >
                {{ aSurveyInfo.name }}
            </div>
        {% endif %}

Dodajte nešto slično ovome u /upload/themes/survey/yourThemeName/css/custom.css:
```
.navbar-brand {
    line-height: 60px;
    font-size: 32px;
}
```
Postavite opciju teme "Naziv upitnika u navigacijskoj traci" na "Da"
Trebali biste vidjeti ovo:

Izmijenjeni prikaz naslova upitnika ispod trake napretka

Izradite novi direktorij /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews.
Kopirajte /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig u taj novi direktorij.

Otvorite /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig i dodajte element <h1> za naziv upitnika. Neka izgleda ovako:

<div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}>
 
    {# Custom survey name #}
    {% if( aSurveyInfo.options.surveyname2 == "on") %}
    	<h1 class="custom-survey-name">{{ aSurveyInfo.name }}</h1>
    {% endif %}
 
    {# Group Name #}
    {{ include('./subviews/survey/group_subviews/group_name.twig') }}
 
    {# Group Description #}
    {{ include('./subviews/survey/group_subviews/group_desc.twig') }}
 
    {#
        PRESENT THE QUESTIONS
 
        This is the main part. It will render each question for this group
     #}
 
    <!-- PRESENT THE QUESTIONS -->
    {% for  aQuestion in aGroup.aQuestions %}
         {{ include('./subviews/survey/question_container.twig') }}
    {% endfor %}
 
    <!-- Hidden inputs -->
    {% if aGroup.show_last_group == true %}
        <input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' />
    {% endif %}
 
    {% if aGroup.show_last_answer == true %}
        <input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' />
    {% endif %}
</div>

Dodajte nešto slično ovome u /upload/themes/survey/yourThemeName/css/custom.css:

.navbar-brand {
    line-height: 60ph1.custom-survey-name {
	margin: 0;
	text-align: center;
}

Postavite opciju teme "Naziv upitnika ispod trake napretka" na "Da"
Trebali biste vidjeti ovo:

Preuzimanja

Primjer proširene teme: Test_survey_names.zip

Izrada teme od nule

Dokumentacija uskoro.

Za sada donosimo samo nekoliko savjeta.

Struktura teme

Datoteke i direktoriji

Kada izrađujete temu od nule, ne morate poštovati strukturu datoteka/direktorija/css/js teme Vanilla. Obavezni css/js dodaje jezgra sustava (ako je potrebno, možete ga i ukloniti).

Jedine datoteke koje vaša tema mora imati su datoteke rasporeda (layout):

layout_global.twig : prikazuje stranice za ispunjavanje upitnika
layout_survey_list.twig : prikazuje popis upitnika (ako je ova tema postavljena kao zadana)
layout_errors.twig : koristi se za prikaz pogrešaka koje onemogućuju prikaz upitnika (pogrešan ID upitnika, prazna grupa u pregledu grupe itd.)
layout_user_forms.twig: prikazuje korisničke obrasce kao što su token (ispitanik) i registracija.
layout_print.twig : koristi se za ispis upitnika u PDF
layout_printanswers.twig: ispis odgovora

Sadržaj tih datoteka, kao i datoteke koje uključuju ili ne uključuju, u potpunosti ovisi o vama. Sve ostale datoteke i direktoriji koje pronađete u temi Vanilla potpuno su neobavezni, kod slobodno organizirajte kako želite.

Ako pročitate kod za prikaz korisničkog sučelja (frontend), vidjet ćete da se nazivi tih datoteka izravno pojavljuju u njemu. Zato su obavezne.

Npr.: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462

Sadržaj

U datoteci layout_global.twig teme Vanilla vidjet ćete da koristimo varijablu "include_content" kako bismo odlučili što prikazati: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/layout_global.twig#L114-L115

                    {% set sViewContent =  './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
                    {% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %}

aSurveyInfo.include_content govori vam koja se radnja trenutno odvija: prikaz pitanja? prikaz rezultata slanja? prikaz opcije Očistite sve? itd. Kao što vidite, u temi Vanilla za svaku radnju izrađujemo jednu datoteku koja se uključuje. Ako dakle želite saznati popis radnji, jednostavno pogledajte direktorij teme Vanilla views/subviews/content i uklonite ekstenziju "twig": https://github.com/LimeSurvey/LimeSurvey/tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content

clearall.twig
firstpage.twig
load.twig
mainrow.twig
main.twig
optin.twig
optout.twig
outerframe.twig
printanswers.twig
quotas.twig
register.twig
save.twig
submit_preview.twig
submit.twig
userforms.twig

Ako ste već izradili temu za verzije LimeSurveya 2.x, primijetit ćete da većina njih odgovara starim pstpl datotekama za LimeSurvey 2.x. Opet, vaša tema nije obvezna izraditi te datoteke s tim nazivima u ovom direktoriju. Primjerice, u layout_global.twig mogli biste jednostavno dodati golemi switch sa željenim HTML-om za svaku radnju.

Manifest config.xml

Manifest teme sadrži glavne informacije o vašoj temi. Kada instalirate temu, sadržaj manifesta učitava se u bazu podataka, u dvije različite tablice: template i template_configuration. Zato svaki put kada izmijenite manifest teme, morate je deinstalirati i ponovno instalirati (ili je samo poništiti). Budući da je taj postupak naporan tijekom razvoja teme, možete prisiliti izravno korištenje XML datoteke umjesto zapisa iz baze podataka. Da biste to učinili, u config.php uključite način rada za otklanjanje pogrešaka (debug) i postavite 'force_xmlsettings_for_survey_rendering' na true.

Odjeljak metadata

Ništa složeno: samo osnovne informacije o vašoj temi. Bit će upisane u tablicu templates_configuration.

    <metadata>
        <name>the_name_of_your_theme</name>
        <title>The Title of your theme</title>
        <creationDate>16/10/2017</creationDate>
        <author>Your Name</author>
        <authorEmail>your@email.org</authorEmail>
        <authorUrl>http://www.yourwebsite.org</authorUrl>
        <copyright>Your Copyright </copyright>
        <license>Licence of your theme</license>
        <version>version of your theme</version>
        <apiVersion>3</apiVersion>
        <description>Description of your theme</description>
        <extends>parent_theme</extends>
    </metadata>

Nekoliko napomena:

name: koristi se kao ključ u bazi podataka. Zato mora biti jedinstven i ne smije sadržavati posebne znakove (ni razmake). Imajte na umu da se velika i mala slova ne uzimaju u obzir
Title: koristi se za prikaz naziva vaše teme na različitim popisima. Može sadržavati posebne znakove
description: koristi se na glavnom popisu tema upitnika. Može sadržavati posebne znakove, pa čak i HTML kod korištenjem
extends: neobavezno, definira roditeljske teme. Ako neka datoteka (twig/js/css/jpg itd.) ne postoji u ovoj temi, tražit će se u roditeljskoj temi

Ako ste proširili jednu od 3 temeljne teme (Vanilla, Bootswatch, Fruity), možete promijeniti vrijednost "extends" s jedne roditeljske teme na drugu. Naravno, tada ćete morati poništiti temu.

Odjeljak files

Ovaj je odjeljak važan. Bit će upisan u tablicu template_configuration, u polja files_css, files_js, files_print_css kao JSON nizovi.

Npr.: odjeljak files teme Material Premium:

    <files>
        <css>
            <add>css/bootstrap-material-design.css</add>
            <add>css/ripples.min.css</add>
            <replace>css/ajaxify.css</replace>
            <replace>css/theme.css</replace>
            <replace>css/custom.css</replace>
            <remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
        </css>
        <js>
            <replace>scripts/theme.js</replace>
            <replace>scripts/ajaxify.js</replace>
            <add>scripts/material.js</add>
            <add>scripts/ripples.min.js</add>
            <replace>scripts/custom.js</replace>
        </js>
        <print_css>
            <add>css/print_theme.css</add>
        </print_css>
    </files>

Sve CSS/JS datoteke navedene u ovom odjeljku učitat će se pri pokretanju upitnika (u AJAX načinu rada. Ako je AJAX način isključen, sve se datoteke naravno ponovno učitavaju na svakoj stranici).

Bit će dodane u Yii paket resursa (Asset Packet) nazvan prema nazivu teme. Kada je upravitelj resursa (Asset Manager) uključen (a način za otklanjanje pogrešaka isključen), te će se datoteke kopirati u direktorij tmp zajedno s ostatkom teme (tako da u CSS-u i JS-u možete koristiti relativne putanje do slikovnih datoteka). O upravitelju resursa u Yiiju: https://www.yiiframework.com/wiki/148/understanding-assets O paketima u Yiiju: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

Koristit će sustav nasljeđivanja. To znači da ako dodate CSS/JS datoteku temi, a ona ne postoji u toj temi, sustav će pretražiti sve matične teme te teme i koristiti prvu koju pronađe. Ako dakle korisnik proširi vašu temu putem uređivača tema, sve će se te datoteke naslijediti u njegovoj temi. Ključne riječi odnose se na taj sustav nasljeđivanja.

add : doda datoteku temi i svim temama koje je nasljeđuju
replace: zamijeni datoteku matične teme
remove: ukloni datoteku iz bilo kojeg paketa, čak i iz temeljnog paketa (od verzije 3.14)

Zapamtite da u config.php možete postaviti 'force_xmlsettings_for_survey_rendering' kako bi se konfiguracija čitala iz XML-a umjesto iz baze podataka (poništavanje nije potrebno). Tako ćete lakše testirati izmjene XML datoteka i nećete morati deinstalirati/ponovno instalirati temu nakon svake izmjene XML-a.

Nekoliko napomena o tim ključnim riječima:

Savjeti o nasljeđivanju

Kao što je ranije objašnjeno, ključna riječ "add" može se odnositi na datoteku koja se nalazi u jednoj od nadređenih tema. Dakle, u ovom odjeljku možete "dodati" datoteku, a da te datoteke nema u vašoj temi, već u jednoj od njezinih nadređenih tema. Sustav će pretražiti sve nadređene teme i upotrijebiti prvu datoteku koju pronađe. Ako datoteku ne može pronaći, a u konfiguraciji je uključen način rada za otklanjanje pogrešaka (debug) i u globalnim postavkama je uključen JS debug način rada za frontend, upozorit će vas poruka u konzoli. Npr. ako u temu my_theme dodamo: <add>css/unexisting.css</add>, u konzoli ćemo vidjeti:

 (¯`·._.·(¯`·._.· Theme Configuration Error  ·._.·´¯)·._.·´¯) 

Can't find file 'css/unexisting.css' defined in theme 'my_theme'

Ako je način rada za otklanjanje pogrešaka isključen, pogreška se uopće neće prikazati. Sustav će jednostavno zanemariti neispravne naredbe add.

Kada koristiti add, kada replace, a kada to mogu jednostavno prepustiti nadređenoj temi?

Prvo: add i replace su potpuno ista ključna riječ. Možete koristiti jednu ili drugu, sustav će učiniti isto. Razlikuju se samo radi čitatelja, kako bi razumjeli što ste htjeli postići.

Ne možete dodati datoteku s istim imenom kao u nadređenoj temi: ona će je uvijek zamijeniti. Npr. ako imate datoteku "my_mother_theme/foo.css" i u podređenu temu dodate datoteku "foo.css", u temu će se dodati samo "daughter_theme/foo.css". Ako želite zadržati "my_mother_theme/foo.css", jednostavno odaberite drugo ime za "daughter_theme/foo.css", npr. "daughter_theme/bar.css". Dakle, ključna riječ "add" može se koristiti kao ključna riječ "replace".

Ako se pitate zašto: to znatno olakšava automatsko stvaranje naslijeđene teme jer kopiranje odjeljka datoteka radi odmah (nije potrebno preimenovati "add" u "replace" prilikom proširenja datoteke).

Radi jasnoće, uzmimo primjer teme Fruity. Ovdje je njezin odjeljak s CSS datotekama:

        <css>
            <add>css/variations/sea_green.css</add>
            <replace>css/animate.css</replace>
            <replace>css/theme.css</replace>
            <replace>css/custom.css</replace>
        </css>

Ako pogledate datoteku custom.css u temi Fruity, ona je potpuno ista kao u temi Vanilla. Mogli bismo izbrisati datoteku custom.css unutar teme Fruity i učitala bi se ona iz teme Vanilla. Mogli bismo ukloniti naredbu <replace>custom.css</replace> iz manifesta teme Fruity, koristila bi se naredba iz teme Vanilla i učitala bi se datoteka custom.css teme Vanilla.

Zašto onda koristimo naredbu <replace>custom.css</replace> u manifestu teme Fruity? Odgovor je jednostavan: želimo da krajnji korisnik može proširiti temu Fruity, izmijeniti datoteku u svojoj lokalnoj temi i učitati tu izmijenjenu datoteku iz svoje naslijeđene teme. Da biste to razumjeli, jednostavno proširite temu Fruity i pogledajte proširenu temu. Proširena tema nema čak ni datoteku custom.css, pa će se koristiti ona iz teme Fruity. No ako korisnik stvori tu datoteku u proširenoj temi (klikom na "Proširi" u uređivaču teme), tada će se ta datoteka učitati iz njegove teme.

Dakle, općenito: ako stvarate temu od nule koja ne proširuje nijednu temu, jednostavno koristite naredbu add za dodavanje svojih CSS/JS datoteka. Jednostavno. ako stvarate temu koja proširuje drugu temu i ne želite da korisnici mogu proširiti CSS/JS datoteku nadređene teme: nemojte koristiti naredbu add u svom manifestu. Datoteke će se i dalje učitavati iz konfiguracije nadređene teme. ako stvarate temu koja proširuje drugu temu i želite zamijeniti datoteku nadređene teme: koristite ključnu riječ replace (ključna riječ add imat će isti rezultat). ako stvarate temu koja proširuje drugu temu, ne zamjenjujete određenu CSS/JS datoteku, ali želite da je korisnici mogu proširiti: tada za tu datoteku u manifestu koristite naredbu "replace". Čak i ako datoteku ne zamjenjujete, korištenjem ključne riječi replace u manifestu korisniku omogućujete da to učini ako želi.

Samo posljednji slučaj zahtijeva malo mentalne gimnastike da bi se razumio, svi ostali slučajevi su trivijalni.

CSS i JS datoteke možete registrirati i izravno iz twig koda. Te će se datoteke učitati samo kada se zatraži twig datoteka. Ako želite da korisnici mogu naslijediti te JS/CSS datoteke iz uređivača teme, ne zaboravite koristiti funkcije Template:RegisterTemplateCssFile('my style.css') i Template:RegisterTemplateScript('my script.js'). Ako ne koristite te funkcije, vaša tema možda će raditi, ali nasljeđivanje na njoj neće funkcionirati. Ista je logika kao i kod funkcije Template:Image('my picture.jpg')

Ključna riječ remove

Ključna riječ remove dostupna je tek od verzije 3.14. Pomoću nje možete ukloniti bilo koju CSS/JS datoteku iz bilo kojeg paketa, čak i iz osnovnih paketa. Koristi se u temi Material Premium za uklanjanje datoteka Awesome Bootstrap Checkboxa:

<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>

stoga biste trebali koristiti potpuno istu sintaksu kao i datoteka u paketu (npr. "awesome-bootstrap-checkbox.css" samo po sebi, bez putanje mape, ne bi radilo). Potpuni popis osnovnih paketa i njihovih datoteka pronaći ćete u /application/config/packages.php i config/third_party.php. Na primjer, za awesome-bootstrap-checkbox.css: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56

        'css'=> array(
            'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
        ),

Drugi način za pronalaženje točnog naziva koji treba koristiti u oznaci remove jest uključiti upravitelj resursa (asset manager), isključivanjem načina rada za otklanjanje pogrešaka ili postavljanjem 'use_asset_manager'=>true u konfiguraciji. Tada će putanja koju trebate koristiti biti ona odmah iza nasumičnog direktorija u direktoriju tmp. Na primjer, za awesome-bootstrap-checkbox.css:

<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />

Datoteke koje ne biste trebali ukloniti:

jquery-3.1.1.min.js : potrebna

jquery-migrate-3.0.0.min.js : potrebna

survey.js : potrebna

moment-with-locales.min.js : potrebna za vrstu pitanja datum (i za još neke, čini mi se)

em_javascript.js : potrebna za sav JavaScript ExpressionScripta

Odjeljak opcija

Ovaj odjeljak odnosi se na opcije vaše teme. Koristit će se za popunjavanje polja "options" tablice template_configuration kao JSON niza.

Dodatne informacije

Dostupne funkcije teme

Neke napomene

NAPOMENA: ako uredite XML datoteku teme, morate deinstalirati i ponovno instalirati temu kako bi se promjena uzela u obzir.

NAPOMENA: kako biste to izbjegli, možete prisiliti korištenje XML datoteke umjesto baze podataka. U datoteci config.php uključite način rada za otklanjanje pogrešaka (debug) i uklonite komentar sa sljedećeg retka:

'force_xmlsettings_for_survey_rendering' => true, // Uncomment if you want to force the use of the XML file rather than DB (for easy theme development)

Budite oprezni: sve će se učitavati iz XML datoteke (uključujući opcije itd.)

NAPOMENA: ako ručno uređujete CSS/JS datoteke (bez korištenja uređivača teme) i ako je način rada za otklanjanje pogrešaka isključen, sada možete prisiliti pražnjenje resursa (assets). U odjeljku "Globalne postavke", na kartici "Općenito", kliknite gumb "Očisti predmemoriju resursa".

NAPOMENA: ako uklonite odjeljak

Glavna poglavlja

Novi sustav predložaka u LS3.x

From LimeSurvey Manual