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

Úvod

Upozornenie: v predchádzajúcich verziách LimeSurvey sa súbory, ktoré určujú, ako prieskum vyzerá, ako je prezentovaný z hľadiska farieb, písiem, rozloženia a (niektorého) správania, nazývali „šablóna“. Na základe nových poznatkov sa to teraz nazýva „motív“, zatiaľ čo šablóna je vyhradená pre ukážkové prieskumy.

Na tejto stránke sa dozviete, ako:

Používať nový systém motívov LimeSurvey 3.0.
Používať dedenie na správu vlastných motívov.
Pridať obrázok do motívu.
Spravovať možnosti motívu pre vaše prieskumy a skupiny prieskumov.

LimeSurvey 3 prináša úplne nový systém motívov založený na Twig 1.29 a Bootstrap, ktorý umožňuje dedenie motívov a možnosti motívov. Úplne odstraňuje starý systém nahrádzania kľúčových slov. Teraz je možné prispôsobiť 100 % HTML kódu frontendu. Napríklad v starom systéme motívov existovalo kľúčové slovo {ASSESSMENTS}, ktoré sa počas behu nahradilo HTML kódom hodnotenia. Tvorca motívu nemal možnosť tento HTML kód prispôsobiť (okrem použitia JavaScriptu). Teraz existuje súbor assessments.twig, ktorý obsahuje logiku (napísanú v Twig) na generovanie tohto HTML. Na týchto stránkach vám vysvetlíme, ako tento nový systém motívov používať.

Nebudeme tu podrobne popisovať, ako Twig funguje. Je to akýsi veľmi zjednodušený PHP, ktorý ponúka vysokú úroveň bezpečnosti vďaka systému „sandbox“ (podrobnejšie sa mu budeme venovať v časti o jadre systému motívov). Ak už poznáte PHP, bude pre vás extrémne jednoduché ho zvládnuť. Ak PHP nepoznáte, stále by sa ho mal dať pomerne ľahko naučiť. Pozrite si, prosím, dokumentáciu Twig 1.X: https://twig.symfony.com/

Úpravy pomocou administračného rozhrania

Zoznam motívov

Na ovládacom paneli správcu sa teraz nachádza políčko na prístup k zoznamu motívov:

Zoznam je rozdelený do 5 stĺpcov:

náhľad motívu: je to len obrázok s názvom „preview.png“ v koreňovom adresári motívu
„názov“ motívu, ako je uvedený v manifeste (config.xml v koreňovom adresári motívu)
popis motívu: reťazec nastavený v jeho manifeste
typ motívu: Hlavná téma (dodávaná s LimeSurvey), Téma používateľa (pridaná v adresári upload), XML motív (nenačítaný v databáze)
Rozširuje: ak motív rozširuje iný motív, tu sa zobrazí jeho názov
Niektoré akčné tlačidlá:
- Install: načíta manifest motívu, pridá ho do databázy a sprístupní ho na výber na úrovni prieskumu
- Uninstall: odstráni konfiguračné záznamy motívu z databázy
- Editor tém: presmeruje vás do editora tém
- Možnosti témy: prejdete do globálnej konfigurácie možností motívu

Editor tém

Táto dokumentácia predpokladá, že už viete, ako používať editor tém v predchádzajúcej verzii LS.

Editor tém zostal čo najbližšie k pôvodnému. Hlavný motív preto nemôžete upravovať. Namiesto tlačidla „kopírovať“ však teraz máte tlačidlo „Rozšíriť“.

Teraz rozširujete motív — *Teraz **rozširujete** motív*

Stručný prehľad konceptu dedenia motívov

V LS3 môže motív dediť z iného motívu, teda môže „rozširovať“ iný motív. To znamená, že adresár motívu bude prakticky prázdny a bude obsahovať iba súbory (zobrazenia, štýly, skripty, zdroje atď.), ktoré sa líšia od pôvodných. Vďaka tomu môžete jednoducho vytvoriť množstvo motívov pre rôznych používateľov bez nutnosti udržiavať veľa rôznych motívov. Napríklad: môžete mať vlastný motív a potom jeho verziu pre firmu (s jej logom, štýlom, prípadne odkazom na jej webovú stránku v päte atď.), ďalšiu verziu pre inú firmu atď. Ak potom aktualizujete CSS alebo celkové rozloženie svojho vlastného motívu, všetky motívy, ktoré z neho dedia, sa aktualizujú automaticky. Dedenie je rekurzívne: motív môže rozširovať motív, ktorý rozširuje ďalší atď.

Znamená to tiež, že ak rozšírite jeden z hlavných motívov LimeSurvey, budete aj naďalej profitovať z jeho aktualizácií.

Novinky v používateľskom rozhraní

Ak chcete rozšíriť motív Monochrome v LimeSurvey, prejdite do zoznamu motívov a kliknite na tlačidlo „Editor tém“ pri motíve Monochrome. Potom kliknite na „Rozšíriť“ a potvrďte nový názov „extends_monochrome“.

Ak teraz prejdete do adresára upload (pomocou súborového/FTP klienta), uvidíte, že bol vytvorený nový adresár: upload/themes/extends_monochrome Obsahuje súbor XML a adresáre, ale väčšina adresárov je prázdna. Nemá žiadne zobrazenia, CSS ani JS. Tento motív však môžete v prieskume vybrať ako bežný motív a bude vyzerať presne ako motív Monochrome.

*Strom motívu (adresáre a súbory) hneď po vytvorení. Je prakticky prázdny*

Zdroje (jpg, png atď.) z pôvodného motívu sa pri rozšírení motívu skopírujú. Dôvodom je, že ak lokálne skopírujete súbor CSS z pôvodného motívu a ten sa odkazuje na tieto súbory (napríklad v príkaze background-image), bude musieť tieto obrázky nájsť v ceste aktuálneho motívu.

Editor tém pre motív extends_monochrome vyzerá takto:

Oproti starému editoru tém nie je veľký rozdiel. Vymenujme tie hlavné:

Kľúčové slovo zdedené v zozname súborov. Znamená, že súbor nie je prítomný v adresári motívu a použije sa súbor z pôvodného motívu.

Hlavný editor ( editor ACE ) zobrazuje obsah vybraného súboru. Súbory neobsahujú iba HTML, CSS alebo JS, ale aj príkazy Twig. Tieto príkazy Twig nám umožňujú presunúť časť logiky do zobrazení motívu, ktorá bola predtým hlboko v jadre a teraz sa dá prispôsobiť.

Preto je teraz v rozbaľovacom zozname v hornej ponuke k dispozícii viac typov obrazoviek. Všimnete si stránky ako ‘Zoznam prieskumov’, ‘Načítať’, ‘Uložiť’, ‘Chyba’, ‘Registrácia’, ‘Hodnotenia’, ‘Vytlačiť odpovede’, ktoré predtým neboli dostupné alebo sa nedali skutočne prispôsobiť.

*Teraz môžete prispôsobiť všetky obrazovky*

Odkaz ‘tip’ v dolnej časti zoznamu súborov vám ukáže spôsob v Twig, ako pridať obrázok do HTML

Tlačidlo ‘Uložiť zmeny’ sa mení na tlačidlo Skopírovať do lokálného motívu a uložiť zmeny

Rýchly príklad: pridanie obrázka

Tlačidlo Skopírovať do lokálného motívu a uložiť zmeny robí presne to, čo hovorí: ak niečo vo súbore upravíte a potom kliknete na toto tlačidlo, súbor sa skopíruje do motívu, ktorý upravujete, a vaše zmeny sa uložia.
Napríklad: kliknite na súbor layout_global.twig, potom tesne pred blok content ( {% block content %}) pridajte text „TEST“ a kliknite na tlačidlo. Uvidíte, že označenie súboru sa zmenilo zo „zdedené“ na „lokálne“ a tlačidlo je teraz jednoduché tlačidlo Uložiť zmeny.

Ak otvoríte správcu súborov a prejdete do adresára upload/themes/extends_monochrome/views/, uvidíte, že obsahuje iba jeden súbor, a to layout_global.twig, a že sa v ňom nachádza reťazec „TEST“.

Teraz namiesto pridania náhodného textu pridáme obrázok. Ak kliknete na odkaz tip, zobrazí sa:
Použiť obrázok v súbore .twig: {{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
Ak ste čítali dokumentáciu Twig (a v tomto bode ste ju už mali prečítať), viete, že {{ function( ) }} vypíše na obrazovku výsledok funkcie. Tu je touto funkciou image( ).

Ak vás zaujíma, čo funkcia robí, nájdete ju v kóde tu (verzia RC3): funkcia image() v RC3

Ak kódu nerozumiete, nebojte sa, nemusíte vedieť, ako funguje, ale prečo a ako ju používať.

Funkciu image() by ste mali používať z dvoch dôvodov:

Funkcia image prehľadáva motív, aby našla obrázok. Ak motív, na ktorom pracujete, rozširuje iný motív, a skopírujete súbor na miesto, kde ste vložili obrázok lokálne, ale samotný obrázok sa do lokálneho motívu neskopíroval, funkcia prejde stromom dedenia motívov a nájde, kde sa obrázok nachádza.
Používa správcu zdrojov (asset manager), takže zlepší výkon vášho motívu. Viac informácií nájdete v dokumentácii Yii Asset Manager: http://www.yiiframework.com/wiki/148/understanding-assets/

Takže ak chcete do motívu pridať obrázok:

jednoducho ho nahrajte obvyklým spôsobom pomocou nástroja na nahrávanie súborov vpravo a potom ho pridajte na požadované miesto v ľubovoľnom súbore twig:

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

Ak chcete k obrázku pridať alternatívny text (pre čítačky obrazovky a validáciu HTML), pridajte:

Ak chcete pridať atribút class a id:

{{ image('./files/myfile.png'), ‘my alternative text’, {“class”: “a_nice_css_class”, “id”: “any_id”} }}

Niektoré veci v našom zozname úloh

Dať používateľom možnosť nahrať vlastný súbor náhľadu priamo z editora
Pridať tlačidlo na odstránenie lokálneho súboru a návrat k zdedenému stavu
Kopírovať iba obrázky použité v súboroch CSS (uvedením v manifeste ako súbory na skopírovanie)
Pripomenúť, ktorý motív aktuálny motív rozširuje (ak nejaký)

Možnosti motívu

Ďalšou novinkou LS3 je stránka možností motívu. Ako uvidíme neskôr, tvorcovia motívov môžu vytvárať vlastné možnosti a dokonca aj vlastnú administračnú stránku možností. Tu si stručne ukážeme, ako funguje stránka možností hlavných motívov. Ak chcete získať prístup k možnostiam motívu na globálnej úrovni, kliknite v zozname motívov na „Možnosti témy“.

Pokročilé nastavenia

Keď otvoríte kartu Možnosti témy, môžete si vybrať úpravu buď Jednoduchých možností, alebo Pokročilých nastavení. „Pokročilé nastavenia“ sú len holý formulár, ktorý vám poskytuje prístup k hlavným konfiguračným poliam motívu z databázy. Aby ste pochopili, ako to funguje, mali by ste si prečítať aj o súbore XML a o vytvorení motívu od základu. Je to teda pomerne zložité a určené pre pokročilých používateľov.

Ak však chcete upravovať pokročilé nastavenia, kliknite na kartu Pokročilé nastavenia

Súbory CSS: CSS súbory, ktoré by sa mali pridať do šablóny;
Súbory JS: súbory JS, ktoré by sa mali pridať do šablóny;
Súbory CSS tlače: CSS súbory, ktoré sa načítajú pri tlači šablóny;
Možnosti: Toto pole obsahuje možnosti (a ich hodnoty), ktoré sa majú odovzdať do zobrazenia šablóny;
CssFramework Name: Názov CSS frameworku na načítanie. Zatiaľ len Bootstrap alebo nič;
Cssframework Css: V tomto poli môžete nahradiť základný súbor bootstrap.css inou, vlastnou verziou;
Cssframework Js: Základný súbor boostrap.js môžete odtiaľto nahradiť inou, vlastnou verziou;
Balíky na načítanie: Pomocou tohto nastavenia môžete načítať niektoré základné balíky prostriedkov z LimeSurvey.

Hore si všimnete pole na nahrávanie, ktoré vám umožňuje nahrať súbor do adresára súborov motívu. Tieto parametre možno použiť na zmenu celého vzhľadu motívu.

Upozornenie! : Nemeňte hodnoty, pokiaľ neviete, čo robíte!

Jednoduché možnosti

Stránka jednoduchých možností pochádza zo samotnej šablóny. Je vytvorená pomocou súboru twig a nejakého JavaScriptu v adresári /options motívu: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (nefunkčný odkaz)

Táto stránka môže byť v každom motíve úplne iná a poskytovateľom motívov sa dôrazne odporúča vytvoriť si vlastný vzhľad a ovládanie (look & feel).

Stránka jednoduchých možností iba vypĺňa vstupné polia pokročilého formulára. Môžete to vidieť tak, že zapnete alebo vypnete nastavenie na jednoduchej stránke a sledujete, ako sa príslušné pole v pokročilom formulári zodpovedajúco zmení. Napríklad v jednoduchých možnostiach predvolenej šablóny, ak zmeníte motív Bootswatch na „Darkly“ a potom kliknete na kartu pokročilých možností (aj bez uloženia), uvidíte, že pole „Cssframework Css“ sa zmenilo z

{"replace": [["css/bootstrap.css","css/flatly.css"]]}
na
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
Tu sú jednotlivé jednoduché možnosti pre hlavné témy:

Ajax mode: Určuje, či sa ďalšia stránka načíta cez ajax (rýchlejšie) alebo opätovným načítaním stránky (lepšie na ladenie)
Obrázok na pozadí: ak je nastavené na Áno, načíta sa obrázok s názvom pattern.png (v Master verzii bude nahradený výberom súboru)
Box container: ak je nastavené na Nie, otázky nebudú uzavreté v rámčeku (takže môžete používať veľké polia širšie ako šírka obrazovky)
Brandlogo: ak je nastavené na Nie, v hornej lište sa zobrazí názov prieskumu, inak môžete vybrať jeden z obrázkov v adresári so súbormi, ktorý sa použije ako logo.
Animované telo: ak je nastavené na Áno, môžete vybrať jednu z animácií, ktorá sa použije pri načítaní tela prieskumu
Animovaná otázka: to isté pre otázky
Animate alerts: to isté pre výstrahy
Bootstrap theme: tu môžete vybrať motív Bootstrap, ktorý sa načíta. Pochádzajú z Bootswatch https://bootswatch.com/3/

Knižnica použitá na animácie je animate.css: https://daneden.github.io/animate.css/ Poskytovateľ témy samozrejme môže pridať vlastnú knižnicu animácií alebo žiadnu knižnicu animácií.

Monochromatické témy používajú rovnaký farebný motív Bootstrap ako administračné rozhranie. Nepoužívajú systém nahrádzania CSS frameworku, ale jednoducho pridávajú súbor CSS. Ilustruje to teda ďalší spôsob, ako môžu poskytovatelia tém pracovať s vlastnými témami.

Systém dedenia

V predchádzajúcej časti sme videli, že téma môže rozširovať inú tému. Konfigurácia témy môže tiež dediť z inej konfigurácie témy. Znamená to, že pre danú tému môžete mať konfiguráciu na

globálnej úrovni (tú, ktorú sme práve videli, dostupnú zo zoznamu tém)
úrovni skupiny prieskumov
a poslednú na úrovni prieskumu.

Každý parameter na určitej úrovni môže dediť z vyššej úrovne: dedenie zo skupiny prieskumov. Najprv sa pozrime na úroveň skupiny prieskumov.

Na úrovni skupiny prieskumov

Jednou z ďalších veľkých noviniek v LS3 je systém skupín prieskumov. Teraz môžete vytvárať rôzne skupiny na usporiadanie svojich prieskumov. Prejdite do zoznamu prieskumov a potom kliknite na kartu skupín prieskumov:

V tomto zozname máte dve akčné tlačidlá. Ak je skupina prázdna, môžete ju odstrániť. Inak ju môžete vždy upraviť. Kliknutím na tlačidlo úpravy sa dostanete na konfiguračnú stránku skupiny prieskumov:

Tretia karta tejto stránky sa volá „Možnosti šablóny pre túto skupinu prieskumov“. Ak na ňu kliknete, uvidíte rovnaký zoznam tém ako v zozname tém, s tým rozdielom, že tu je viditeľné iba tlačidlo možností (editor tém je dostupný iba z hlavného zoznamu).
Ak teraz kliknete na možnosti predvolenej šablóny, uvidíte toto:

Zdediť všetko znamená, že celá konfigurácia sa zdedí z globálnej úrovne konfigurácie.
Ak prejdete na stránku pokročilých nastavení, uvidíte, že všetky polia sú nastavené na zdedenie.
Ak v jednoduchých možnostiach kliknete pri „Zdediť všetko“ na „Nie“, opäť uvidíte stránku veľmi podobnú stránke globálnych možností. Jediný rozdiel je v tom, že každé pole môžete nastaviť na áno, nie alebo zdedené; a každý rozbaľovací zoznam má hodnotu zdedené'.

Skupina prieskumov môže byť podriadenou skupinou inej skupiny. V takom prípade bude dediť zo svojej nadradenej skupiny.

Na úrovni prieskumu

Pri úprave prieskumu uvidíte v ľavej bočnej ponuke novú položku „Možnosti témy“. Povedie vás na stránku možností témy vybranej pre aktuálny prieskum. Nájdete tu rovnaký systém dedenia ako v skupine prieskumov, ale tentoraz zdedené znamená, že nastavenie sa zdedí zo skupiny prieskumov, do ktorej prieskum patrí.

Príklad použitia

Predpokladajme, že používate jednu tému pre rôzne spoločnosti (A a B). Svoje obľúbené možnosti nastavíte na globálnej úrovni (napr. ajax zapnutý, animované telo s vsunutím, výstrahy s pulzovaním). Potom vytvoríte skupinu prieskumov pre každú spoločnosť: skupinu prieskumov pre spoločnosť A, ktorá bude obsahovať všetky prieskumy tejto spoločnosti, a skupinu pre spoločnosť B, ktorá bude obsahovať všetky prieskumy spoločnosti B. Na tejto úrovni nastavíte iba logo a pozadie a ostatné možnosti necháte zdediť. Všetky prieskumy v skupine A teda budú používať logo spoločnosti A a všetky prieskumy zo skupiny B logo spoločnosti B. Pre jeden z prieskumov spoločnosti A môžete použiť iné pozadie podľa témy prieskumu: pozadie jednoducho zmeníte v možnostiach na úrovni prieskumu. Ak vám niekto zo spoločnosti B povie, že pulzujúca výstraha je príliš agresívna a uprednostnil by niečo jemnejšie, napríklad postupné zobrazenie, jednoducho zmeníte animáciu výstrahy na úrovni skupiny prieskumov B a všetky prieskumy tejto skupiny budú odteraz používať túto animáciu. Ak spoločnosť A zmení svoje logo, môžete ho zmeniť na úrovni skupiny prieskumov A a všetky prieskumy tejto skupiny budú používať nové logo.

Tieto príklady vychádzajú zo súčasných možností hlavnej témy. Ak ste však poskytovateľ tém alebo dokážete trochu programovať v twig, môžete pridať vlastné možnosti. Môžete napríklad pridať možnosť „info v päte“, kde by ste mohli uviesť údaje ako webová stránka spoločnosti alebo telefónne číslo pomoci. Ak má spoločnosť A rôzne oddelenia s rôznymi telefónnymi číslami, môžete jednoducho vytvoriť jednu podskupinu pre každé oddelenie v skupine prieskumov A. Každá podskupina bude mať v týchto možnostiach vlastné telefónne číslo.

Často kladené otázky o prispôsobení témy

Nájdete tu odpovede na otázky, ktoré boli položené vo fóre a ktoré vám môžu pomôcť pri prispôsobení vašej témy.

Prispôsobenie CSS/JS: práca so správcom prostriedkov („prečo sa moje zmeny neprejavia?“)

Ak sa pokúšate aktualizovať CSS/JS témy priamou úpravou kódu vo svojom obľúbenom editore, môže vás prekvapiť, že sa vaše zmeny neprejavia.

Od verzie 2.50 LS používa správcu prostriedkov (asset manager) frameworku Yii: Dokumentácia Yii o prostriedkoch

Súbory CSS/JS témy sa presunú do podadresára tmp/ s náhodným reťazcom (napr. „tmp/1ef64ml/“). Ak teda zmeníte súbor css/js a oznámite to správcovi prostriedkov, súbory sa skopírujú do nového podadresára s novým názvom, takže sa aktualizuje cache prehliadača používateľa a uvidí nové css/js. Inak by si musel vyčistiť cache prehliadača.

Tu sú odkazy na CSS v hlavičke, keď je správca prostriedkov zapnutý:

Ako vidíte, všetky odkazujú na podpriečinky tmp/.

Tu sú odkazy na CSS v hlavičke, keď je správca prostriedkov vypnutý:

Ako vidíte, ukazujú na skutočné súbory témy.

Ak správca prostriedkov nevie, že ste súbor zmenili, starý súbor zo starého adresára tmp/ zostane nezmenený a vaše zmeny sa nikdy neprejavia.

Pri úprave CSS/JS témy teda máte niekoľko možností:

Môžete použiť Editor tém LS: stará sa o správcu prostriedkov a nemusíte sa o nič starať
Môžete zapnúť režim ladenia: vypne správcu prostriedkov, takže sa volajú skutočné súbory css/js vašich tém (ale potom musíte pri každom načítaní obnoviť cache prehliadača)
Môžete obnoviť cache prostriedkov: v Globálne nastavenia -> General -> Clear asset cache

Použitie editora tém na úpravu vlastného CSS je zďaleka najlepšie riešenie.

Používanie editora tém vám pomôže pochopiť architektúru nového systému tém. Ak navyše prispôsobujete tému fruity, dávajte pozor na špecifickosť CSS: väčšina definícií používa selektor ".fruity" (jednu z tried prvku body).

Pridanie vlastných písem do mojej témy

Jednoduchý spôsob: použitie Google Font CDN

Téma prieskumu Bootswatch používa Google Font CDN. Pozrime sa, ako to funguje: 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");

Potom sa písmo Lato používa pomocou pravidiel CSS: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72

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

Týmto spôsobom môžete vo svojej vlastnej téme použiť akékoľvek písmo Google. Samozrejme by ste mali z možností svojej témy odstrániť výber písma. Odstráňte tieto riadky v options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

Použitie lokálneho písma

Samozrejme môžete súbory písma aj stiahnuť a používať ich z lokálneho servera namiesto Google CDN (lepšie pre súkromie). Ako príklad, ako na to, tu je naša lokálna verzia písma 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');
}
...

Môžete použiť veľmi podobnú definíciu vo svojom súbore CSS témy a potom skopírovať súbor NotoSans-Regular.ttf do priečinka css/font-src/ vašej témy.

Potom použite toto písmo na body (alebo akýkoľvek iný prvok) ako vyššie a odstráňte predvolený výber písma v možnostiach.

Vytvorenie vlastného výberu písma v možnostiach

Zatiaľ nemôžete jednoducho použiť základný výber písma na pridanie vlastného písma do možností. Najprv musíme umožniť koncovému používateľovi nahrať vlastné balíky (pozrite si nasledujúci odsek: Pohľad na výber písma Fruity)
Postup:

Pridajte do svojej témy dve písma (my_custom_font a my_custom_other_font) pomocou CDN alebo lokálneho servera
Potom do svojho súboru css pridajte dve nové triedy:

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

Do súboru XML svojej témy pridajte možnosť písma (predvolené bude my_custom_font) :

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

V súbore option.twig pridajte výber písma pridaním týchto riadkov (zatiaľ netestované, takže ak to nefunguje, napíšte nám na fórum):

            
            <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>

Teraz by si vaši používatelia mali môcť vybrať jedno z týchto dvoch písiem.

Pohľad na výber písma Fruity

V budúcnosti umožníme koncovým používateľom nahrať vlastné balíky zdrojov vrátane balíkov písiem. Vďaka tomu bude akákoľvek úprava písiem veľmi jednoduchá.
Ako porozumieť balíkom Yii:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

Balíky LimeSurvey sú definované v rôznych súboroch. Balíky písiem sú definované tu: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Napríklad balík písma Noto je definovaný tu: 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',
        ),
    ),

Súbor noto.css, ktorý obsahuje, je tu: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Všimnite si definíciu css triedy ".font-noto" na jeho konci:

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

Potom sa v téme Vanilla používa písmo Noto pridaním balíka noto a nastavením možnosti písma 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>

Potom sa trieda písma pre body definuje pomocou tejto hodnoty: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76

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

Súbor XML samozrejme obsahuje iba predvolené hodnoty konfigurácie vašej témy. Tieto hodnoty sú však skutočne definované a čítané v databáze (tabuľka "template_configuration" (Otázka: "template_" alebo "theme_"?) ako reťazce json. Súbor option.js iba používa hodnotu výberu písma z jednoduchých možností na zmenu hodnoty vo formulári na karte pokročilých možností: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

Keď bude k dispozícii funkcia "nahrať balík zdrojov", bude jednoduché pridať skript, ktorý prehľadá všetky existujúce balíky písiem a pridá ich do výberu.

Pridanie možností témy na ovládanie umiestnenia a zobrazenia prvkov prieskumu

Tento návod ukazuje, ako pridať do rozšírenej témy možnosti na zobrazenie prvkov prieskumu na rôznych miestach. V tomto prípade vytvoríme možnosti témy na zobrazenie názvu prieskumu na dvoch rôznych miestach.

Pre jednoduchosť budeme návod zakladať na rozšírení témy "bootswatch" vo verzii LimeSurvey 3.4.3.

Vytvorenie vlastnej témy

Rozšírte tému "bootswatch" podľa vyššie uvedeného postupu.
Skopírujte custom.css do lokálnej témy podľa vyššie uvedeného postupu.

Vytvorenie nových možností témy

Skopírujte obsah /themes/survey/bootswatch/options/ do /upload/themes/survey/yourThemeName/options/.

Otvorte /upload/themes/survey/yourThemeName/options/options.twig v editore a nájdite "{# Bootstrap Bootswatch theme #}". Priamo pred jeho nadradený prvok <div class='row'> pridajte toto:

		{# 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>

Otvorte /upload/themes/survey/yourThemeName/config.xml a pridajte dve položky do bloku "options", aby vyzeral takto:

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

Na obrazovke Možnosti témy by ste mali vidieť dve nové možnosti, napríklad takto:

Upravené zobrazenie názvu prieskumu v navigačnom paneli

Vytvorte nový adresár /upload/themes/survey/yourThemeName/views/subviews/header/.
Skopírujte súbor /themes/survey/vanilla/views/subviews/header/nav_bar.twig do tohto nového adresára.

Otvorte súbor /themes/survey/vanilla/views/subviews/header/nav_bar.twig a nájdite "{# Logo option #}". Pod ním upravte príkaz IF pre logo/názov prieskumu tak, aby vyzeral takto:

		{# 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 %}

Pridajte niečo podobné do súboru /upload/themes/survey/yourThemeName/css/custom.css:
```
.navbar-brand {
    line-height: 60px;
    font-size: 32px;
}
```
Prepnite možnosť motívu "Survey name in navbar" na "Yes"
Mali by ste vidieť toto:

Upravené zobrazenie názvu prieskumu pod indikátorom priebehu

Vytvorte nový adresár /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews.
Skopírujte súbor /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig do tohto nového adresára.

Otvorte súbor /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig a pridajte prvok <h1> pre názov prieskumu. Súbor bude vyzerať takto:

<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>

Pridajte niečo podobné do súboru /upload/themes/survey/yourThemeName/css/custom.css:

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

Prepnite možnosť motívu "Survey name below progress bar" na "Yes"
Mali by ste vidieť toto:

Na stiahnutie

Ukážkový rozšírený motív: Media:Test_survey_names.zip

Vytvorenie motívu od nuly

Dokumentácia už čoskoro.

Zatiaľ len niekoľko tipov.

Štruktúra motívu

Súbory a adresáre

Keď vytvárate motív od nuly, nemusíte dodržiavať štruktúru súborov a adresárov ani css/js z motívu Vanilla. Povinné css/js pridáva jadro (ak je to potrebné, môžete ich aj odstrániť).

Jediné súbory, ktoré váš motív musí obsahovať, sú súbory rozloženia:

layout_global.twig : vykresľuje stránky pri vypĺňaní prieskumu
layout_survey_list.twig : vykresľuje zoznam prieskumov (ak je tento motív nastavený ako predvolený)
layout_errors.twig : používa sa na vykreslenie chýb, ktoré bránia zobrazeniu prieskumu (nesprávne ID prieskumu, prázdna skupina v náhľade skupiny a pod.)
layout_user_forms.twig: vykresľuje formuláre pre používateľov, napríklad prístupový kód (respondent prieskumu) a registráciu.
layout_print.twig : používa sa na tlač prieskumu do PDF
layout_printanswers.twig: tlač odpovedí

Obsah týchto súborov a to, ktoré ďalšie súbory zahŕňajú, je úplne na vás. Všetky ostatné súbory a adresáre, ktoré nájdete vo Vanilla, sú čisto voliteľné, kód si môžete usporiadať podľa vlastných predstáv.

Ak si prečítate kód vykresľovania frontendu, uvidíte, že názvy týchto súborov sa v ňom objavujú priamo. Preto sú povinné.

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

Obsah

V súbore layout_global.twig motívu Vanilla uvidíte, že na rozhodnutie, čo sa má zobraziť, používame premennú s názvom "include_content" 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 vám povie, aká akcia práve prebieha: zobrazujú sa otázky? zobrazuje sa výsledok odoslania? zobrazuje sa zmazanie všetkého? atď. Ako vidíte, vo Vanilla vytvárame pre každú akciu jeden súbor na zahrnutie. Ak teda chcete poznať zoznam akcií, pozrite si adresár Vanilla views/subviews/content a odstráňte príponu "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

Ak ste už vytvorili motív pre verzie LimeSurvey 2.x, všimnete si, že väčšina z nich zodpovedá starým súborom pstpl z LimeSurvey 2.x. Opäť platí, že vo svojom motíve nemáte povinnosť vytvárať tieto súbory s týmito názvami v tomto adresári. Mohli by ste napríklad v layout_global.twig jednoducho použiť jeden veľký príkaz switch s požadovaným HTML pre každú akciu.

Manifest config.xml

Manifest motívu obsahuje hlavné informácie o vašom motíve. Pri inštalácii motívu sa obsah manifestu načíta do databázy, do dvoch rôznych tabuliek: template a template_configuration. Preto pri každej zmene manifestu motívu musíte motív odinštalovať a znova nainštalovať (alebo ho len resetovať). Keďže tento proces je pri vývoji motívu otravný, môžete vynútiť priame používanie súboru XML namiesto záznamov v databáze. Za týmto účelom v súbore config.php zapnite režim ladenia a nastavte 'force_xmlsettings_for_survey_rendering' na true.

Sekcia metadata

Nič zložité: len základné informácie o vašom motíve. Budú vložené do tabuľky 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>

Niekoľko poznámok:

name: použije sa ako kľúč v databáze. Musí byť preto jedinečný a nemal by obsahovať žiadne špeciálne znaky (ani medzery). Veľkosť písmen sa neberie do úvahy
Title: použije sa na zobrazenie názvu vášho motívu v rôznych zoznamoch. Môže obsahovať špeciálne znaky
description: použije sa v hlavnom zozname motívov prieskumu. Môže obsahovať špeciálne znaky a dokonca aj kód HTML pomocou
extends: voliteľné, definuje rodičovské motívy. Ak teda niektorý súbor (twig/js/css/jpg atď.) nie je v tomto motíve prítomný, hľadá sa v rodičovskom motíve

Ak ste rozšírili jeden z 3 základných motívov (Vanilla, Bootswatch, Fruity), môžete hodnotu "extends" zmeniť z jedného rodičovského motívu na druhý. Samozrejme, motív budete musieť resetovať.

Sekcia files

Táto sekcia je dôležitá. Bude vložená do tabuľky template_configuration, do polí files_css, files_js, files_print_css ako polia JSON.

Napr.: sekcia files motívu 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>

Všetky súbory CSS/JS uvedené v tejto sekcii sa načítajú pri spustení prieskumu (v režime ajax. Ak je režim ajax vypnutý, všetky súbory sa samozrejme načítajú znova na každej stránke).

Budú pridané do balíka Yii Asset Packet pomenovaného podľa názvu motívu. Keď je teda správca assetov zapnutý (režim ladenia je vypnutý), tieto súbory sa skopírujú do adresára tmp spolu so zvyškom motívu (takže v CSS a JS môžete používať relatívne cesty na dosiahnutie obrázkov). O správcovi assetov v Yii: https://www.yiiframework.com/wiki/148/understanding-assets O balíkoch v Yii: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

Využívajú systém dedenia. Znamená to, že ak pridáte súbor CSS/JS do motívu, ale v tomto motíve nie je prítomný, engine prehľadá všetky nadradené motívy tohto motívu a použije prvý, ktorý nájde. Ak teda používateľ rozšíri váš motív pomocou editora motívov, všetky tieto súbory sa zdedia do jeho motívu. Kľúčové slová sa vzťahujú na tento systém dedenia.

add : pridá súbor do motívu a do všetkých motívov, ktoré ho dedia
replace: nahradí súbor nadradeného motívu
remove: odstráni súbor z ktoréhokoľvek balíka, dokonca aj zo základného balíka (od verzie 3.14)

Nezabudnite, že v súbore config.php môžete nastaviť 'force_xmlsettings_for_survey_rendering', aby sa konfigurácia čítala z XML namiesto databázy (resetovanie nie je potrebné). Uľahčí to testovanie úprav súborov XML a ušetrí vám odinštalovanie a opätovnú inštaláciu motívu pri každej zmene XML.

Niekoľko poznámok k týmto kľúčovým slovám:

Tipy k dedeniu

Ako už bolo vysvetlené, kľúčové slovo "add" sa môže odkazovať na súbor, ktorý sa nachádza v niektorom z nadradených motívov. Súbor teda môžete v tejto sekcii pridať ("add"), hoci sa nenachádza vo vašom motíve, ale v jednom z jeho rodičovských motívov. Systém prehľadá všetky rodičovské motívy a použije prvý nájdený súbor. Ak súbor nenájde, v konfigurácii je zapnutý režim ladenia a v globálnych nastaveniach je zapnutý režim ladenia JavaScriptu na frontende, v konzole sa zobrazí upozornenie. Napr. ak do motívu my_theme pridáme: <add>css/unexisting.css</add>, v konzole uvidíme:

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

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

Ak je režim ladenia vypnutý, nezobrazí sa žiadna chyba. Systém jednoducho ignoruje chybné príkazy add.

Kedy použiť add, kedy replace a kedy môžem všetko ponechať na rodičovský motív?

Najprv: add a replace sú v skutočnosti to isté kľúčové slovo. Môžete použiť ktorékoľvek, systém urobí to isté. Líšia sa len pre ľudských čitateľov, aby pochopili váš zámer.

Nemôžete pridať súbor s rovnakým názvom, aký má súbor v rodičovskom motíve: vždy ho nahradí. Napr. ak máte súbor "my_mother_theme/foo.css" a v dcérskom motíve pridáte súbor "foo.css", do motívu sa pridá iba "daughter_theme/foo.css". Ak chcete zachovať "my_mother_theme/foo.css", zvoľte pre "daughter_theme/foo.css" iný názov, napríklad "daughter_theme/bar.css". Kľúčové slovo "add" sa teda dá použiť ako kľúčové slovo "replace".

Ak vás zaujíma prečo: výrazne to uľahčuje automatické vytváranie zdedených motívov, pretože kopírovanie sekcie so súbormi funguje hneď bez úprav (pri rozširovaní súboru nie je potrebné premenovať "add" na "replace").

Aby to bolo jasné, zoberme si príklad motívu Fruity. Tu je jeho sekcia so súbormi CSS:

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

Ak si pozriete súbor custom.css vo Fruity, je úplne rovnaký ako ten vo Vanilla. Mohli by sme súbor custom.css vo Fruity odstrániť a načítal by sa ten z Vanilla. Mohli by sme tiež odstrániť príkaz <replace>custom.css</replace> z manifestu motívu Fruity, použil by sa príkaz z Vanilla a načítal by sa súbor custom.css z Vanilla.

Prečo teda v manifeste motívu Fruity používame príkaz <replace>custom.css</replace>? Odpoveď je jednoduchá: chceme, aby koncový používateľ mohol rozšíriť motív Fruity, upraviť súbor vo svojom lokálnom motíve a načítať tento upravený súbor zo svojho zdedeného motívu. Aby ste to pochopili, jednoducho rozšírte Fruity a pozrite sa na rozšírený motív. Rozšírený motív dokonca ani nemá súbor custom.css, takže sa použije ten z Fruity. Ak však používateľ tento súbor v rozšírenom motíve vytvorí (kliknutím na "extend" v editore tém), súbor sa načíta z jeho motívu.

Všeobecne teda platí: ak vytvárate motív od nuly a žiadny motív nerozširujete, na pridanie súborov CSS/JS jednoducho použite príkaz add. Ľahké ako facka. ak vytvárate motív rozširujúci iný motív a nechcete, aby používatelia mohli rozširovať súbory CSS/JS z rodičovského motívu: nepoužívajte vo svojom manifeste príkaz add. Súbory sa budú naďalej načítavať z konfigurácie rodičovského motívu. ak vytvárate motív rozširujúci iný motív a chcete nahradiť súbor z rodičovského motívu: použite kľúčové slovo replace (kľúčové slovo add bude mať rovnaký výsledok). ak vytvárate motív rozširujúci iný motív, daný súbor CSS/JS nenahrádzate, ale chcete, aby ho používatelia mohli rozšíriť: použite pre tento súbor vo svojom manifeste príkaz "replace". Aj keď súbor nenahrádzate, použitím kľúčového slova replace v manifeste umožníte používateľovi to urobiť, ak bude chcieť.

Iba tento posledný prípad vyžaduje trochu mentálnej gymnastiky, aby ste ho pochopili, všetky ostatné prípady sú triviálne.

Súbory CSS a JS môžete registrovať aj priamo z kódu Twig. Tieto súbory sa načítajú iba vtedy, keď sa daný súbor Twig vyžiada. Ak chcete, aby používatelia mohli tieto súbory JS/CSS dediť z editora tém, nezabudnite použiť funkcie Template:RegisterTemplateCssFile('my style.css') a Template:RegisterTemplateScript('my script.js'). Ak tieto funkcie nepoužijete, váš motív môže fungovať, ale dedenie v ňom bude narušené. Je to rovnaká logika ako pri funkcii Template:Image('my picture.jpg')

Kľúčové slovo remove

Kľúčové slovo remove je dostupné až od verzie 3.14. Pomocou neho môžete odstrániť akýkoľvek súbor CSS/JS z ľubovoľného balíka, dokonca aj z hlavných balíkov. V motíve Material Premium sa používa na odstránenie súborov Awesome Bootstrap Checkbox:

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

preto musíte použiť presne rovnakú syntax ako v súbore balíka (napr. samotný "awesome-bootstrap-checkbox.css" bez cesty k priečinku by nefungoval). Kompletný zoznam hlavných balíkov a ich súborov nájdete v /application/config/packages.php a config/third_party.php. Napríklad pre 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',
        ),

Ďalší spôsob, ako zistiť presný názov na použitie v značke remove, je zapnúť správcu assetov (vypnutím režimu ladenia alebo nastavením 'use_asset_manager'=>true v konfigurácii). Potom je cesta, ktorú treba použiť, tá, ktorá nasleduje hneď za náhodným adresárom v adresári tmp. Napríklad pre awesome-bootstrap-checkbox.css:

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

Súbory, ktoré by ste nemali odstraňovať:

jquery-3.1.1.min.js : potrebný

jquery-migrate-3.0.0.min.js : potrebný

survey.js : potrebný

moment-with-locales.min.js : potrebný pre typ otázky dátum (a pravdepodobne aj niektoré ďalšie)

em_javascript.js : potrebný pre všetok JavaScript ExpressionScript

Sekcia možností

Táto sekcia sa týka možností vášho motívu. Použije sa na naplnenie poľa "options" tabuľky template_configuration ako JSON poľa.

Ďalšie informácie

Theme:Available function

Niekoľko poznámok

POZNÁMKA: ak upravíte súbor XML motívu, musíte motív odinštalovať a znova nainštalovať, aby sa zmeny zohľadnili.

POZNÁMKA: Aby ste tomu predišli, môžete vynútiť používanie XML namiesto databázy. V súbore config.php zapnite režim ladenia a odkomentujte:

'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)

Pozor: všetko sa bude načítavať z XML (vrátane možností a pod.)

POZNÁMKA: Ak súbory CSS/JS upravujete ručne (bez použitia Editora tém) a režim ladenia je vypnutý, môžete teraz vynútiť vyprázdnenie assetov. V časti „Globálne nastavenia“ na karte „General“ kliknite na tlačidlo „Clear assets cache“.

POZNÁMKA: Ak odstránite sekciu

Hlavné kapitoly

Nový systém šablón v LS3.x

From LimeSurvey Manual