x

Hlavní kapitoly

  1. LimeSurvey Cloud vs LimeSurvey CE
  2. Rychlý průvodce - LimeSurvey 3.0+
  3. Instalace - LimeSurvey CE
  4. Jak vytvořit dobrý průzkum (návod)
  5. Začínáme
  6. Správa LimeSurvey
  7. Průzkumy - úvod
  8. Nastavení průzkumu
  9. Menu průzkumu
  10. Struktura průzkumu
  11. Otázky - úvod
  12. Skupiny otázek - úvod
  13. Průzkumy - správa
  14. Možnosti panelu nástrojů průzkumu
  15. Vícejazyčný průzkum
  16. ExpressionScript Engine - Rychlý průvodce
  17. Nezařazené a pokročilé funkce
  18. Obecné FAQ
  19. Řešení potíží
  20. Řešení a obejití problémů
  21. Licence
  22. Záznam změn verzí
  23. Zásuvné moduly
 Actions

Nový systém šablon v LS3.x

From LimeSurvey Manual

Tato stránka mohla být přeložena strojově a může obsahovat chyby. Zobrazit anglický originál · Vylepšit tento překlad
This page is a translated version of the page New Template System in LS3.x and the translation is 100% complete.

Úvod

Pozor: v předchozích verzích LimeSurvey se soubory, které určují, jak průzkum vypadá a jak je prezentován z hlediska barev, písem, rozvržení a (částečně) chování, nazývaly „šablona“. Na základě nových poznatků se nyní nazývají „motiv“, zatímco šablona je vyhrazena pro ukázkové průzkumy.

Na této stránce se dozvíte, jak:

  • Používat nový systém motivů LimeSurvey 3.0.
  • Využít dědičnost ke správě vlastních motivů.
  • Přidat obrázek do motivu.
  • Spravovat možnosti motivu pro vaše průzkumy a skupiny průzkumů.

LimeSurvey 3 přináší zcela nový systém motivů založený na Twig 1.29 a Bootstrapu, který umožňuje dědičnost motivů a možnosti motivů. Zcela odstraňuje starý systém náhradních klíčových slov. Nyní lze tedy upravit 100 % HTML kódu frontendu. Například ve starém systému motivů existovalo klíčové slovo {ASSESSMENTS}, které bylo za běhu nahrazeno HTML kódem hodnocení. Tvůrce motivu neměl možnost tento HTML kód upravit (kromě použití JavaScriptu). Nyní existuje soubor assessments.twig, který obsahuje logiku (napsanou v Twigu) pro generování tohoto HTML. Na těchto stránkách vám vysvětlíme, jak tento nový systém motivů používat.

Zde nebudeme podrobně popisovat, jak Twig funguje. Je to jakýsi velmi zjednodušený PHP, který nabízí vysokou úroveň zabezpečení díky systému „sandbox“ (podrobněji se mu budeme věnovat v části o jádru systému motivů). Pokud už PHP znáte, bude pro Vás jeho zvládnutí extrémně snadné. Pokud PHP neznáte, mělo by být stále docela snadné se jej naučit. Prostudujte si prosím dokumentaci k Twigu 1.X: https://twig.symfony.com/

Úpravy pomocí administračního rozhraní

Seznam motivů

Na administračním panelu je nyní box pro přístup k seznamu motivů:

Seznam motivů po čerstvé instalaci RC3


Seznam je rozdělen do 5 sloupců:

  • náhled motivu: jde pouze o obrázek s názvem „preview.png“ v kořenovém adresáři motivu
  • „název“ motivu, jak je uveden v manifestu (config.xml v kořenovém adresáři motivu)
  • popis motivu: řetězec nastavený v jeho manifestu
  • typ motivu: Základní motiv (dodávaný s LimeSurvey), Uživatelský motiv (přidaný do adresáře upload), XML motiv (nenačtený v databázi)
  • Rozšiřuje: pokud motiv rozšiřuje jiný motiv, bude zde uveden jeho název
  • Některá akční tlačítka:
    • Instalovat: načte manifest motivu, přidá jej do databáze a zpřístupní jej k výběru na úrovni průzkumu
    • Odinstalovat: odstraní konfigurační záznamy motivu v databázi
    • Editor motivu: přesměruje Vás do editoru motivu
    • Možnosti motivu: zavede Vás do globální konfigurace možností motivu

Editor motivu

Tato dokumentace předpokládá, že již víte, jak používat editor motivu v předchozí verzi LS.


Editor motivu zůstal co nejblíže původnímu. Když tedy otevřete základní motiv, nemůžete jej upravovat. Místo tlačítka „kopírovat“ však nyní máte tlačítko „Rozšířit“.

Nyní motiv rozšiřujete
Nyní motiv rozšiřujete

Stručný přehled konceptu dědičnosti motivů

V LS3 může motiv nově dědit z jiného motivu, tedy může jiný motiv „rozšiřovat“. To znamená, že adresář motivu bude prakticky prázdný a bude obsahovat pouze soubory (pohledy, styly, skripty, zdroje atd.), které se liší od původních. Díky tomu bude snadné vytvořit celou sadu motivů pro různé uživatele, aniž byste museli udržovat velké množství různých motivů. Například: můžete mít vlastní motiv a k němu verzi pro jednu firmu (s jejím logem, stylem, případně odkazem na její web v zápatí atd.), další verzi pro jinou firmu atd. Pokud pak aktualizujete CSS nebo celkové rozvržení svého vlastního motivu, všechny motivy, které z něj dědí, se aktualizují automaticky. Všimněte si, že dědičnost je rekurzivní: motiv může rozšiřovat motiv, který rozšiřuje další motiv atd.

Znamená to také, že pokud rozšíříte jeden ze základních motivů LimeSurvey, budete nadále těžit z jeho aktualizací.

Novinky v uživatelském rozhraní

Chcete-li rozšířit motiv Monochrome v LimeSurvey, přejděte do seznamu motivů a klikněte na tlačítko „Editor motivu“ u motivu Monochrome. Poté klikněte na „Rozšířit“ a potvrďte nový název „extends_monochrome“.

Pokud nyní přejdete do adresáře upload (pomocí správce souborů nebo FTP klienta), uvidíte, že byl vytvořen nový adresář: upload/themes/extends_monochrome Obsahuje soubor XML a adresáře, ale většina adresářů je prázdná. Neobsahuje žádné pohledy, CSS ani JS. Přesto můžete tento motiv vybrat v průzkumu jako běžný motiv a bude vypadat přesně jako motiv Monochrome.

Strom motivu (adresáře a soubory) těsně po vytvoření. Je prakticky prázdný
Strom motivu (adresáře a soubory) těsně po vytvoření. Je prakticky prázdný
Zdroje (jpg, png atd.) z původního motivu se při rozšíření motivu zkopírují. Důvodem je, že pokud lokálně zkopírujete soubor CSS z původního motivu a ten se na tyto soubory odkazuje (například v příkazu background-image), bude potřebovat najít tyto obrázky v cestě aktuálního motivu.

Editor motivu pro motiv extends_monochrome vypadá takto:

Úprava motivu extends_monochrome
Úprava motivu extends_monochrome



Oproti starému editoru motivu není velký rozdíl. Uveďme ty hlavní:


  • Klíčové slovo zděděno v seznamu souborů. Znamená, že soubor není v adresáři motivu přítomen a bude použit soubor z původního motivu.


  • Hlavní editor ( ACE editor ) zobrazuje obsah vybraného souboru. Soubory neobsahují pouze HTML, CSS nebo JS, ale také příkazy Twig. Tyto příkazy Twig nám umožňují přenést určitou logiku do pohledů motivu, které se dříve nacházely hluboko v jádru a nyní je lze upravovat.
Nějaký kód Twig pro Seznam průzkumů
Nějaký kód Twig pro Seznam průzkumů


  • Proto je nyní v rozbalovacím seznamu v horním menu dostupných více typů obrazovek. Všimnete si stránek jako ‚Seznam průzkumů‘, ‚Načtení‘, ‚Uložení‘, ‚Chyba‘, ‚Registrace‘, ‚Hodnocení‘, ‚Tisk odpovědí‘, které dříve nebyly dostupné nebo je nebylo možné skutečně přizpůsobit.
Nyní můžete přizpůsobit všechny obrazovky
Nyní můžete přizpůsobit všechny obrazovky


  • Odkaz ‚tip‘ ve spodní části seznamu souborů Vám ukáže, jak přidat obrázek do HTML pomocí Twigu


  • Tlačítko ‚Uložit změny‘ se mění na tlačítko Kopírovat do lokálního motivu a uložit změny

Rychlý příklad: přidání obrázku

Tlačítko Kopírovat do lokálního motivu a uložit změny dělá přesně to, co říká: pokud v souboru cokoli upravíte a poté kliknete na toto tlačítko, soubor se zkopíruje do motivu, který upravujete, a Vaše změny se uloží.
Například: klikněte na soubor layout_global.twig, těsně před blok content ( {% block content %}) přidejte text „TEST“ a klikněte na tlačítko. Uvidíte, že popisek souboru se změnil ze „zděděno“ na „lokální“ a tlačítko je nyní jednoduché tlačítko Uložit změny.

těsně po kliknutí na tlačítko
těsně po kliknutí na tlačítko


Pokud otevřete správce souborů a přejdete do adresáře upload/themes/extends_monochrome/views/, uvidíte, že obsahuje pouze jeden soubor, soubor layout_global.twig, a že se v něm nachází řetězec „TEST“.

Nyní je soubor přítomen ve Vašem motivu
Nyní je soubor přítomen ve Vašem motivu



Místo přidání náhodného textu nyní přidáme obrázek. Pokud kliknete na odkaz tip, zobrazí se:
Použít obrázek v souboru .twig: {{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
Pokud jste si přečetli dokumentaci k Twigu (a v tuto chvíli byste ji již měli mít přečtenou), víte, že {{ function( ) }} vypíše na obrazovku výsledek funkce. Zde je touto funkcí image( ).

Pokud Vás zajímá, co funkce dělá, najdete ji v kódu zde (verze RC3): funkce image() v RC3

Pokud kódu nerozumíte, nelamte si s tím hlavu. Nepotřebujete vědět, jak funguje, ale proč a jak ji používat.


Funkci image() byste měli používat ze dvou důvodů:

  • Funkce image prochází motiv a hledá obrázek. Pokud je motiv, na kterém pracujete, rozšířením jiného motivu a Vy lokálně zkopírujete soubor, do kterého jste vložili obrázek, ale tento obrázek se do lokálního motivu nezkopíruje, funkce projde strom dědičnosti motivů a najde, kde se obrázek nachází.
  • Využívá správce assetů, takže zlepší výkon Vašeho motivu. Více informací naleznete v dokumentaci Yii Asset Manager: http://www.yiiframework.com/wiki/148/understanding-assets/

Chcete-li tedy do motivu přidat obrázek:

  • jednoduše jej nahrajte jako obvykle pomocí nahrávání souborů vpravo a poté jej přidejte na požadované místo v libovolném souboru twig:

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

  • Pokud chcete k obrázku přidat alternativní text (pro čtečky obrazovky a ověření HTML), přidejte:

{{ image('./files/myfile.png'), ‘můj alternativní text’ }}

  • Pokud chcete přidat atribut class a také id:

{{ image('./files/myfile.png'), ‘můj alternativní text’, {“class”: “a_nice_css_class”, “id”: “any_id”} }}

Některé položky na našem seznamu úkolů

  • Dát uživatelům možnost nahrát vlastní soubor náhledu přímo z editoru
  • Přidat tlačítko pro smazání lokálního souboru a návrat ke zděděné verzi
  • Kopírovat pouze obrázky použité v souborech CSS (jejich uvedením v manifestu jako souborů ke kopírování)
  • Připomenout, který motiv ten aktuální rozšiřuje (pokud nějaký)

Možnosti motivu

Další novinkou v LS3 je stránka možností motivu. Jak uvidíme později, tvůrci motivů mohou vytvářet vlastní možnosti a dokonce i vlastní administrační stránku možností. Zde se rychle podíváme, jak funguje stránka možností základních motivů. Chcete-li získat přístup k možnostem motivu na globální úrovni, klikněte v seznamu motivů na „Možnosti motivu“.

Rozšířené možnosti

Když otevřete kartu Možnosti motivu, můžete se rozhodnout upravit buď její Jednoduché možnosti, nebo Rozšířené možnosti. „Rozšířené možnosti“ jsou pouze holý formulář, který vám poskytuje přístup k hlavním konfiguračním polím motivu z databáze. Abyste pochopili, jak funguje, měli byste si přečíst také o souboru XML a o vytvoření motivu od nuly. Je tedy poměrně složitý a určený pro pokročilé uživatele.

Pokud však chcete provést úpravu rozšířených nastavení, klikněte na kartu Rozšířené možnosti.



  • Soubory CSS: Soubory CSS, které mají být přidány do šablony;
  • Soubory Js: Soubory JS, které mají být přidány do šablony;
  • Soubory CSS pro tisk: Soubory CSS, které se načtou při tisku šablony;
  • Možnosti: Toto pole obsahuje možnosti (a jejich hodnoty), které mají být předány do zobrazení šablony;
  • CssFramework Name: Název CSS frameworku, který se má načíst. Prozatím pouze Bootstrap nebo nic;
  • Cssframework Css: V tomto poli můžete základní soubor bootstrap.css nahradit jinou vlastní verzí;
  • Cssframework Js: Zde můžete základní soubor boostrap.js nahradit jinou vlastní verzí;
  • Balíčky k načtení: V tomto nastavení můžete načíst některé základní balíčky prostředků z LimeSurvey.

Nahoře si všimnete pole pro nahrání, které vám umožňuje nahrát soubor do adresáře souborů motivu. Tyto parametry lze použít ke změně celého vzhledu motivu.

  Varování! : Hodnoty neměňte, pokud přesně nevíte, co děláte!


Jednoduché možnosti

Stránka jednoduchých možností pochází ze samotného motivu. Je vytvořena pomocí souboru twig a nějakého javascriptu v adresáři /options daného motivu: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (nefunkční odkaz)

Tato stránka se může u jednotlivých motivů zcela lišit a poskytovatelé motivů jsou silně vybízeni, aby si vytvořili vlastní vzhled a chování.



Stránka jednoduchých možností pouze vyplňuje pole formuláře rozšířených možností. Můžete to vidět tak, že zapnete nebo vypnete nastavení na jednoduché stránce a uvidíte, jak se odpovídající pole v rozšířeném formuláři odpovídajícím způsobem změní. Například pokud v jednoduchých možnostech výchozí šablony změníte motiv Bootswatch na „Darkly“ a poté kliknete na záložku rozšířených možností (i bez uložení), uvidíte, že se pole „Cssframework Css“ změnilo z

{"replace": [["css/bootstrap.css","css/flatly.css"]]}
na
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
Zde jsou jednotlivé jednoduché možnosti pro základní motivy:

  • Režim Ajax: Má se další stránka načítat pomocí ajaxu (rychlejší), nebo opětovným načtením stránky (lepší pro ladění)
  • Obrázek na pozadí: pokud je nastaveno na Ano, načte se obrázek pattern.png (v Master bude nahrazeno výběrem souboru)
  • Kontejner v rámečku: pokud je nastaveno na Ne, otázky nebudou uzavřeny v rámečku (můžete tak použít velká pole širší než šířka obrazovky)
  • Brandlogo: pokud je nastaveno na ne, v horní liště se zobrazí název průzkumu, jinak můžete vybrat jeden z obrázků v adresáři souborů, který se použije jako logo.
  • Animovat tělo: pokud je nastaveno na ano, můžete vybrat jednu z animací, která se použije při načtení těla průzkumu
  • Animovat otázku: totéž pro otázky
  • Animovat výstrahy: totéž pro výstrahy
  • Motiv Bootstrap: zde můžete vybrat motiv Bootstrap, který se načte. Pocházejí z Bootswatch https://bootswatch.com/3/


Knihovna používaná pro animace je animate.css: https://daneden.github.io/animate.css/ Poskytovatel motivu samozřejmě může přidat vlastní knihovnu animací nebo žádnou knihovnu animací nepoužít.

Monochromatické motivy používají stejné barevné schéma Bootstrap jako administrační rozhraní. Nepoužívají systém nahrazení CSS frameworku, ale pouze přidávají soubor CSS. Ukazují tak další způsob, jak mohou poskytovatelé motivů řešit vlastní motivy.

Systém dědičnosti

V předchozí části jsme viděli, že motiv může rozšiřovat jiný motiv. Konfigurace motivu může také dědit z konfigurace jiného motivu. To znamená, že pro daný motiv můžete mít konfiguraci na

  • globální úrovni (tu, kterou jsme právě viděli a která je dostupná ze seznamu motivů)
  • úrovni skupiny průzkumu
  • a poslední na úrovni průzkumu.

Každý parametr na určité úrovni může dědit z vyšší úrovně: dědičnost skupiny průzkumu. Nejprve se podívejme na úroveň skupiny průzkumu.

Na úrovni skupiny průzkumu

Jednou z dalších skvělých novinek v LS3 je systém skupin průzkumu. Nyní můžete vytvářet různé skupiny pro uspořádání svých průzkumů. Chcete-li je zobrazit, přejděte na seznam průzkumů a klikněte na záložku skupin průzkumu:

Záložka skupin průzkumu


V tomto seznamu máte dvě akční tlačítka. Pokud je skupina prázdná, můžete ji smazat. Jinak ji můžete vždy upravit. Kliknutím na tlačítko úpravy se dostanete na stránku konfigurace skupiny průzkumu:

Úprava výchozí skupiny průzkumu


Třetí záložka této stránky se nazývá „Možnosti šablony pro tuto skupinu průzkumu“. Pokud na ni kliknete, uvidíte stejný seznam motivů jako v seznamu motivů, s tím rozdílem, že zde je viditelné pouze tlačítko možností (editor motivů je dostupný pouze z hlavního seznamu).
Nyní, pokud kliknete na možnosti výchozí šablony, uvidíte toto:

U skupiny průzkumu jsou možnosti šablony ve výchozím stavu zděděny


  • Zdědit vše znamená, že veškerá konfigurace bude zděděna z globální úrovně konfigurace.
  • Pokud přejdete na stránku Rozšířené možnosti, uvidíte, že všechna pole jsou nastavena na zdědění.
  • Pokud v Jednoduchých možnostech kliknete u položky "Zdědit vše" na "Ne", opět uvidíte stránku velmi podobnou stránce globálních možností. Jediný rozdíl je v tom, že každé pole můžete nastavit na ano, ne, nebo zdědit; a každý rozbalovací seznam má hodnotu zdědit'.
Každé nastavení může mít zděděnou hodnotu
Skupina průzkumu může být potomkem jiné skupiny. V takovém případě bude dědit z nadřazené skupiny.

Na úrovni průzkumu

Při úpravě průzkumu uvidíte v levém menu novou položku „Možnosti motivu“. Povede vás na stránku možností motivu vybraného pro aktuální průzkum. Najdete zde stejný systém dědičnosti jako u skupiny průzkumu, ale tentokrát zdědit znamená, že nastavení bude zděděno ze skupiny průzkumu, do které průzkum patří.

Možnosti motivu na úrovni průzkumu

Příklad použití

Předpokládejme, že používáte jeden motiv pro různé společnosti (A a B). Své oblíbené možnosti nastavíte na globální úrovni (např. ajax zapnutý, animace těla se vsunutím, výstrahy s pulzováním). Poté vytvoříte skupinu průzkumu pro každou společnost: skupinu průzkumu pro společnost A, která bude obsahovat všechny průzkumy této společnosti, a skupinu pro společnost B, která bude obsahovat všechny průzkumy společnosti B. Na této úrovni nastavíte pouze logo a pozadí a ostatní možnosti necháte zdědit. Všechny průzkumy ve skupině A tak budou používat logo společnosti A a všechny průzkumy ve skupině B logo společnosti B. Pro jeden z průzkumů společnosti A můžete použít jiné pozadí podle tématu průzkumu: stačí změnit pozadí v možnostech na úrovni průzkumu. Pokud vám někdo ze společnosti B řekne, že pulzující výstraha je příliš agresivní a dával by přednost něčemu jemnějšímu, například postupnému zobrazení, stačí změnit animaci výstrahy na úrovni skupiny průzkumu B a všechny průzkumy této skupiny budou nyní používat tuto animaci. Pokud společnost A změní své logo, můžete je změnit na úrovni skupiny průzkumu A a všechny průzkumy této skupiny budou používat nové logo.

Tyto příklady vycházejí z aktuálních možností základního motivu. Ale pokud jste poskytovatel motivů nebo umíte trochu programovat v twigu, můžete samozřejmě přidat vlastní možnosti. Například můžete přidat možnost „informace v zápatí“, kam můžete vložit údaje jako webové stránky společnosti nebo telefonní číslo pro pomoc. Pokud pak společnost A má různá oddělení s různými telefonními čísly, stačí ve skupině průzkumu A vytvořit pro každé oddělení jednu podskupinu. Každá podskupina bude mít v těchto možnostech své vlastní telefonní číslo.

Časté dotazy k přizpůsobení motivu

Najdete zde odpovědi na některé otázky, které padly na fóru a které vám mohou pomoci s přizpůsobením vašeho motivu.

Úprava CSS/JS: práce se správcem assetů („proč se moje změny neprojeví?“)


Pokud se pokoušíte upravit CSS/JS motivu přímou úpravou kódu ve svém oblíbeném editoru, můžete být překvapeni, že se vaše změny neprojeví.


Od verze 2.50 LS používá správce assetů Yii: Dokumentace Yii o assetech

Soubory CSS/JS motivu přesune do podadresáře tmp/ s náhodným řetězcem (např. „tmp/1ef64ml/“). Pokud tedy změníte soubor css/js a oznámíte to správci assetů, soubory se zkopírují do nového podadresáře s novým názvem, takže se aktualizuje mezipaměť prohlížeče uživatele a uvidí nové css/js. Jinak by museli vyčistit mezipaměť prohlížeče.


Zde jsou odkazy na CSS v záhlaví, když je správce assetů zapnutý:

Jak vidíte, všechny odkazují na podsložky tmp/.


Zde jsou odkazy na CSS v záhlaví, když je správce assetů vypnutý:

Jak vidíte, ukazují na skutečné soubory motivu.


Pokud správce assetů neví, že jste soubor změnili, starý soubor ve starém adresáři tmp/ zůstane beze změny a vaše změny se nikdy neprojeví.

Při úpravě CSS/JS motivu tedy máte několik možností:

  • Můžete použít Editor motivu LS: postará se o správce assetů a o nic se nemusíte starat
  • Můžete zapnout režim ladění: vypne správce assetů, takže se volají skutečné soubory css/js vašich motivů (ale pak musíte při každém načtení obnovit mezipaměť prohlížeče)
  • Můžete obnovit mezipaměť assetů: v Globální nastavení -> Obecné -> Vyčistit mezipaměť assetů

Použití editoru motivu k úpravě vlastního CSS je zdaleka nejlepší řešení.


Použití editoru motivu vám pomůže pochopit architekturu nového systému motivů. Pokud také upravujete motiv fruity, dávejte pozor na specifičnost CSS: většina definic používá selektor ".fruity" (jednu z tříd elementu body).

Přidání vlastních písem do motivu

Snadný způsob: použití Google Font CDN

Motiv průzkumu Bootswatch používá Google Font CDN. Podívejme se, jak 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");

Poté se písmo Lato používá pomocí pravidel CSS: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72

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

Tímto způsobem můžete ve svém vlastním motivu použít libovolné písmo Google. Měli byste samozřejmě odstranit výběr písma z možností motivu. Smažte tyto řádky v options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

Použití místního písma

Samozřejmě si také můžete stáhnout soubory písem a používat je z místního serveru místo z Google CDN (lepší pro soukromí). Příklad, jak na to, je naše místní verze 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žít velmi podobnou definici v souboru css svého motivu a poté zkopírovat soubor NotoSans-Regular.ttf do složky css/font-src/ svého motivu.

Poté toto písmo použijte pro body (nebo jakýkoli jiný element) jako výše a odstraňte výchozí výběr písma v možnostech.

Vytvoření vlastního výběru písma v možnostech

Zatím nelze snadno použít základní výběr písma k přidání vlastního písma do možností. Nejprve musíme koncovým uživatelům umožnit nahrávat vlastní balíčky (viz další odstavec: Pohled na výběr písma motivu Fruity)
Postup:

  • Přidejte do svého motivu dvě písma (my_custom_font a my_custom_other_font) pomocí CDN nebo místního serveru
  • Poté přidejte do souboru CSS dvě nové třídy:


.font-my_custom_font {
 font-family: 'my_custom_font ';
}
.font-my_custom_other_font {
 font-family: 'my_custom_other_font';
}
  • Do souboru XML svého motivu přidejte možnost písma (výchozí bude my_custom_font) :
    <options>
        ....
        <font>my_custom_font</font>
    </options>
  • V souboru option.twig přidejte výběr písma pomocí následujících řádků (zatím netestováno, takže pokud to nebude fungovat, napište 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>


Nyní by si vaši uživatelé měli být schopni vybrat mezi těmito dvěma písmy.

Pohled na výběr písma motivu Fruity

V budoucnu umožníme koncovým uživatelům nahrávat vlastní balíčky prostředků, včetně balíčků písem. Tím bude jakákoli úprava písem velmi snadná.
Pro porozumění balíčkům v Yii:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

Balíčky LimeSurvey jsou definovány v různých souborech. Balíčky písem jsou definovány zde: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Například balíček písma Noto je definován zde: 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',
        ),
    ),


Soubor noto.css, který balíček obsahuje, najdete zde: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Všimněte si definice třídy CSS ".font-noto" na jeho konci:

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


V motivu Vanilla se písmo Noto používá tak, že se přidá balíček noto a možnost písma se nastaví 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>


Poté je třída písma pro prvek body definována pomocí této hodnoty: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76

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

Soubor XML samozřejmě obsahuje pouze výchozí hodnoty konfigurace vašeho motivu. Ve skutečnosti jsou však tyto hodnoty definovány a čteny v databázi (tabulka "template_configuration" (Otázka: "template_" nebo "theme_"?) jako řetězce JSON. Soubor option.js pouze využívá hodnotu výběru písma z jednoduchých možností ke změně hodnoty ve formuláři na kartě pokročilých možností: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

Jakmile bude dostupná funkce „nahrát balíček prostředků“, bude snadné přidat skript, který prohledá všechny existující balíčky písem a přidá je do výběru.

Přidání možností motivu pro řízení umístění a zobrazení prvků průzkumu

Tento návod ukazuje, jak do odvozeného motivu přidat možnosti pro zobrazení prvků průzkumu na různých místech. V tomto případě vytvoříme možnosti motivu, které zobrazí nadpis průzkumu na dvou různých místech.

Pro jednoduchost založíme návod na rozšíření motivu "bootswatch" ve verzi LimeSurvey 3.4.3.

Vytvoření vlastního motivu

  1. Rozšiřte motiv "bootswatch", jak je popsáno výše.
  2. Zkopírujte custom.css do místního motivu, jak je popsáno výše.

Vytvoření nových možností motivu

  1. Zkopírujte obsah složky /themes/survey/bootswatch/options/ do /upload/themes/survey/yourThemeName/options/.
  2. Otevřete soubor /upload/themes/survey/yourThemeName/options/options.twig v editoru a najděte "{# Bootstrap Bootswatch theme #}". Přímo před jeho nadřazený prvek <div class='row'> přidejte 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>
    
  3. Otevřete soubor /upload/themes/survey/yourThemeName/config.xml a přidejte do bloku "options" dvě položky, aby vypadal takto:
        <options>
            <ajaxmode>on</ajaxmode>
            ...
            <surveyname1>on</surveyname1>
            <surveyname2>on</surveyname2>
        </options>
    
  4. Na obrazovce Možnosti motivu by se vám nyní měly zobrazit dvě nové možnosti, například takto:

Upravené zobrazení nadpisu průzkumu v navigační liště

  1. Vytvořte nový adresář /upload/themes/survey/yourThemeName/views/subviews/header/.
  2. Zkopírujte soubor /themes/survey/vanilla/views/subviews/header/nav_bar.twig do tohoto nového adresáře.
  3. Otevřete soubor /themes/survey/vanilla/views/subviews/header/nav_bar.twig a najděte "{# Logo option #}". Pod tímto řádkem upravte podmínku IF pro logo/jméno průzkumu tak, aby vypadala 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 %}
    
  4. Přidejte něco takového do souboru /upload/themes/survey/yourThemeName/css/custom.css:
    .navbar-brand {
        line-height: 60px;
        font-size: 32px;
    }
    
  5. Přepněte možnost motivu "Survey name in navbar" na "Ano"
  6. Měli byste vidět toto:

Upravené zobrazení nadpisu průzkumu pod indikátorem průběhu

  1. Vytvořte nový adresář /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews.
  2. Zkopírujte soubor /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig do tohoto nového adresáře.
  3. Otevřete soubor /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig a přidejte prvek <h1> pro jméno průzkumu. Měl by vypadat 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>
    
  4. Přidejte něco takového do souboru /upload/themes/survey/yourThemeName/css/custom.css:
    .navbar-brand {
        line-height: 60ph1.custom-survey-name {
    	margin: 0;
    	text-align: center;
    }
    
  5. Přepněte možnost motivu "Survey name below progress bar" na "Ano"
  6. Měli byste vidět toto:

Soubory ke stažení

Vytvoření motivu od nuly

Dokumentace bude brzy doplněna.

Prozatím uvádíme jen několik tipů.

Struktura motivu

Soubory a adresáře

Když vytváříte motiv od nuly, nemusíte dodržovat strukturu souborů a adresářů ani css/js z motivu Vanilla. Povinné css/js přidává jádro systému (v případě potřeby je můžete odstranit).

Jediné soubory, které váš motiv musí obsahovat, jsou soubory rozložení (layout):

  • layout_global.twig : vykresluje stránky pro vyplňování průzkumu
  • layout_survey_list.twig : vykresluje seznam průzkumů (pokud je tento motiv nastaven jako výchozí)
  • layout_errors.twig : používá se k vykreslení chyb, které brání zobrazení průzkumu (chybné ID průzkumu, prázdná skupina v náhledu skupiny atd.)
  • layout_user_forms.twig: vykresluje formuláře pro uživatele, například token (respondent průzkumu) a registraci.
  • layout_print.twig : používá se k tisku průzkumu do PDF
  • layout_printanswers.twig: tisk odpovědí

Obsah těchto souborů i to, které další soubory zahrnují, je zcela na vás. Všechny ostatní soubory a adresáře, které najdete v motivu Vanilla, jsou čistě volitelné – kód si můžete uspořádat podle svého.

Pokud si přečtete kód pro vykreslování frontendu, uvidíte, že se názvy těchto souborů objevují přímo v něm. Proto jsou povinné.

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

Obsah

V souboru layout_global.twig motivu Vanilla uvidíte, že k rozhodnutí o tom, co se zobrazí, používáme proměnnou "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 říká, jaká akce se právě provádí: zobrazují se otázky? zobrazuje se výsledek odeslání? zobrazuje se Smazat vše? atd. Jak vidíte, ve Vanille vytváříme pro každou akci jeden soubor, který se zahrne. Pokud tedy chcete znát seznam akcí, stačí se podívat do adresáře views/subviews/content motivu Vanilla a odstranit pří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

Pokud jste již vytvořili motiv pro verze LimeSurvey 2.x, všimnete si, že většina z nich odpovídá starým souborům pstpl z LimeSurvey 2.x. Znovu platí, že ve svém motivu nejste povinni tyto soubory s těmito názvy v tomto adresáři vytvářet. Mohli byste například jednoduše přidat do layout_global.twig obří příkaz switch s požadovaným HTML pro každou akci.

Manifest config.xml

Manifest motivu obsahuje hlavní informace o vašem motivu. Když motiv nainstalujete, obsah manifestu se načte do databáze, a to do dvou různých tabulek: template a template_configuration. Pokaždé, když manifest motivu upravíte, musíte motiv odinstalovat a znovu nainstalovat (nebo jej jen resetovat). Protože je tento postup při vývoji motivu otravný, můžete vynutit přímé použití souboru XML místo záznamů v databázi. Za tím účelem v souboru config.php zapněte režim ladění a nastavte 'force_xmlsettings_for_survey_rendering' na true.

Sekce metadata

Nic složitého: jen hlavní informace o vašem motivu. Budou uloženy do tabulky 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>


Několik poznámek:

  • name: použije se jako klíč v databázi. Musí tedy být jedinečné a neměl by obsahovat žádné speciální znaky (ani mezery). Velikost písmen se nebere v úvahu.
  • Title: použije se k zobrazení názvu vašeho motivu v různých seznamech. Může obsahovat speciální znaky.
  • description: použije se v hlavním seznamu motivů průzkumu. Může obsahovat speciální znaky a dokonce i kód HTML pomocí
  • extends: volitelné, určuje nadřazené motivy. Pokud některý soubor (twig/js/css/jpg atd.) v tomto motivu chybí, bude se hledat v nadřazeném motivu.


Pokud jste rozšířili jeden ze 3 základních motivů (Vanilla, Bootswatch, Fruity), můžete hodnotu "extends" změnit z jednoho nadřazeného motivu na jiný. Samozřejmě budete muset motiv resetovat.



Sekce files

Tato sekce je důležitá. Bude uložena do tabulky template_configuration, do polí files_css, files_js, files_print_css jako pole JSON.

Např.: sekce files motivu 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šechny soubory CSS/JS uvedené v této sekci se načtou při spuštění průzkumu (v režimu ajax. Pokud je režim ajax vypnutý, všechny soubory se samozřejmě načítají znovu na každé stránce).


Budou přidány do balíčku Yii Asset Packet pojmenovaného podle motivu. Když je tedy zapnutý Asset Manager (a režim ladění je vypnutý), tyto soubory se zkopírují do adresáře tmp spolu se zbytkem motivu (takže v CSS a JS můžete používat relativní cesty k obrázkům). O Asset Manageru v Yii: https://www.yiiframework.com/wiki/148/understanding-assets O balíčcích v Yii: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail


Budou využívat systém dědičnosti. To znamená, že pokud do motivu přidáte soubor CSS/JS, ale v motivu se nenachází, systém prohledá všechny nadřazené motivy tohoto motivu a použije první nalezený soubor. Pokud tedy uživatel váš motiv rozšíří pomocí editoru motivů, všechny tyto soubory se zdědí do jeho motivu. Klíčová slova se vztahují k tomuto systému dědičnosti.


  • add : přidá soubor do motivu a do všech motivů, které jej dědí
  • replace: nahradí soubor nadřazeného motivu
  • remove: odstraní soubor z jakéhokoli balíčku, i ze základního balíčku (od verze 3.14)
Pamatujte, že v souboru config.php můžete nastavit 'force_xmlsettings_for_survey_rendering', aby se konfigurace četla z XML místo z databáze (není třeba resetovat). Usnadní to testování úprav souborů XML a ušetří vám odinstalaci a opětovnou instalaci motivu při každé úpravě XML.


Několik poznámek k těmto klíčovým slovům:


Tipy k dědičnosti

Jak bylo vysvětleno výše, klíčové slovo „add“ může odkazovat na soubor, který se nachází v jednom z nadřazených motivů. Můžete tedy v této sekci soubor „přidat“, i když tento soubor není ve vašem motivu, ale v jednom z jeho nadřazených motivů. Systém prohledá všechny nadřazené motivy a použije první nalezený soubor. Pokud soubor nenajde, je v konfiguraci zapnutý režim ladění a v globálním nastavení je zapnut ladicí režim frontendového JavaScriptu, upozorní vás na to zpráva v konzoli. Např. pokud do motivu my_theme přidáme: <add>css/unexisting.css</add>, v konzoli uvidíme:

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

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

Pokud je režim ladění vypnutý, nezobrazí se žádná chyba. Systém chybné příkazy add jednoduše ignoruje.


Kdy použít add, kdy replace a kdy to mohu nechat na nadřazeném motivu?

Za prvé: add a replace jsou ve skutečnosti totéž klíčové slovo. Můžete použít kterékoli z nich, systém provede totéž. Liší se pouze pro lidské čtenáře, aby pochopili váš záměr.


Nemůžete přidat soubor se stejným názvem, jaký má nadřazený motiv: vždy jej nahradí. Např. pokud máte soubor „my_mother_theme/foo.css“ a v podřízeném motivu přidáte soubor „foo.cs“, bude do motivu přidán pouze „daughter_theme/foo.css“. Pokud chcete zachovat „my_mother_theme/foo.css“, zvolte pro „daughter_theme/foo.css“ jiný název, například „daughter_theme/bar.css“. Klíčové slovo „add“ tedy lze použít jako klíčové slovo „replace“.


Pokud vás zajímá proč: díky tomu je mnohem snazší automatické vytváření zděděných motivů, protože kopírování sekce souborů funguje hned bez úprav (není třeba přejmenovávat „add“ na „replace“ při rozšiřování souboru).


Pro přehlednost si vezměme příklad motivu Fruity. Zde je jeho sekce souborů 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>


Pokud se podíváte na soubor custom.css v motivu Fruity, je naprosto stejný jako ve Vanille. Soubor custom.css ve Fruity bychom mohli smazat a načetl by se ten z Vanilly. Mohli bychom také odstranit příkaz <replace>custom.css</replace> z manifestu Fruity, použil by se příkaz z Vanilly a načetl by se soubor custom.css z Vanilly.


Proč tedy v manifestu Fruity používáme příkaz <replace>custom.css</replace>? Odpověď je jednoduchá: chceme, aby koncový uživatel mohl motiv Fruity rozšířit, upravit soubor ve svém lokálním motivu a načíst tento upravený soubor ze svého zděděného motivu. Pro pochopení stačí rozšířit Fruity a prohlédnout si rozšířený motiv. Rozšířený motiv soubor custom.css ani nemá, takže se použije ten z Fruity. Pokud však uživatel tento soubor v rozšířeném motivu vytvoří (kliknutím na „Rozšířit“ v editoru motivu), bude se soubor načítat z jeho motivu.


Obecně tedy platí: Pokud vytváříte motiv od nuly, který nerozšiřuje žádný jiný motiv, použijte k přidání souborů CSS/JS příkaz add. Jednoduché. Pokud vytváříte motiv rozšiřující jiný motiv a nechcete, aby uživatelé mohli rozšiřovat soubory CSS/JS z nadřazeného motivu: nepoužívejte ve svém manifestu příkaz add. Soubory se budou stále načítat z konfigurace nadřazeného motivu. Pokud vytváříte motiv rozšiřující jiný motiv a chcete nahradit soubor z nadřazeného motivu: použijte klíčové slovo replace (klíčové slovo add bude mít stejný výsledek). Pokud vytváříte motiv rozšiřující jiný motiv, daný soubor CSS/JS nenahrazujete, ale chcete, aby jej uživatelé mohli rozšířit: použijte pro tento soubor ve svém manifestu příkaz „replace“. I když soubor nenahrazujete, použitím klíčového slova replace v manifestu umožníte uživateli to udělat, pokud bude chtít.


Pouze poslední případ vyžaduje trochu mentální gymnastiky, všechny ostatní případy jsou triviální.


Soubory CSS a JS můžete registrovat také přímo z kódu Twig. Tyto soubory se načtou pouze tehdy, když je daný soubor Twig požadován. Pokud chcete, aby uživatelé mohli tyto soubory JS/CSS zdědit z editoru motivu, nezapomeňte použít funkce Template:RegisterTemplateCssFile('my style.css') a Template:RegisterTemplateScript('my script.js'). Pokud tyto funkce nepoužijete, váš motiv může fungovat, ale dědičnost bude narušena. Jde o stejnou logiku jako u funkce Template:Image('my picture.jpg')

Klíčové slovo remove

Klíčové slovo remove je dostupné až od verze 3.14. Pomocí něj můžete odstranit libovolný soubor CSS/JS z libovolného balíčku, dokonce i z balíčků jádra. Používá se v motivu Material Premium k odstranění souborů Awesome Bootstrap Checkbox:

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

Měli byste proto použít přesně stejnou syntaxi jako u souboru v balíčku (např. samotný název „awesome-bootstrap-checkbox.css“ bez cesty ke složce by nefungoval). Kompletní seznam balíčků jádra a jejich souborů najdete v /application/config/packages.php a config/third_party.php. Například pro 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',
        ),


Dalším způsobem, jak zjistit přesný název pro značku remove, je zapnout správce prostředků (asset manager) – vypnutím režimu ladění nebo nastavením 'use_asset_manager'=>true v konfiguraci. Použitelná cesta je pak ta, která následuje hned za náhodným adresářem v adresáři tmp. Například pro awesome-bootstrap-checkbox.css:

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

Soubory, které byste neměli odstraňovat:

jquery-3.1.1.min.js : nezbytný

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

survey.js : nezbytný

moment-with-locales.min.js : nezbytný pro typ otázky Datum (a podle všeho i pro některé další)

em_javascript.js : nezbytný pro veškerý JavaScript ExpressionScript

Sekce options

Tato sekce se týká možností vašeho motivu. Slouží k naplnění pole „options“ v tabulce template_configuration ve formě pole JSON.

Další informace

Některé poznámky

POZNÁMKA: pokud upravíte soubor XML motivu, musíte motiv odinstalovat a znovu nainstalovat, aby se změny projevily.

POZNÁMKA: Abyste tomu předešli, můžete vynutit použití XML místo databáze. V souboru config.php zapněte režim ladění 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še se bude načítat z XML (včetně voleb atd.)


POZNÁMKA: Pokud soubory CSS/JS upravujete ručně (bez použití editoru motivu) a režim ladění je vypnutý, můžete nyní vynutit vyprázdnění prostředků (assets). V části „Globální nastavení“ na kartě „Obecné“ klikněte na tlačítko „Vymazat mezipaměť prostředků“.

POZNÁMKA: Pokud odstraníte sekci