View source for New Template System in LS3.x/nl

<languages />

__TOC__
=Inleiding=

Op deze pagina leggen we uit hoe je:

* gebruik maakt van het nieuwe thema-systeem van LimeSurvey 3.0
* gebruik maakt van overerving (inheritance) bij je eigen thema's
* een afbeelding toevoegt
* thema-opties beheert voor je enquêtes en enquête-groepen

<hr/>

In LimeSurvey 3 is er een geheel nieuw thema-systeem, gebaseerd op Twig 1.29, Bootstrap, waarin overerving van thema's en bijbehorende opties mogelijk zijn.  Het oude systeem met keywords is vervangen, 100% van de front-end HTML kan nu aangepast worden. Vroeger was er een keyword {ASSESSMENTS} dat vervangen werd door een stukje HTML op het moment van uitvoering. Een ontwikkelaar kon dit alleen aanpassen met JavaScript. Nu is er een bestand '''assessments.twig''' met de logica  (geschreven in Twig) om de HTML aan te maken. Op deze pagina beschrijven we hoe je dit systeem kunt gebruiken.

<div class="simplebox">[[File:help.png]]  We geven geen uitgebreide beschrijving hoe Twig werkt. Het is een eenvoudige constructie in PHP die een goede beveiliging biedt dankzij het “sandbox” systeem (dat zien we later uitgebreider terug als het over de core-code hebben). Het gebruik is eenvoudig, zeker als je wat kennis van PHP hebt. Hier is de documentatie van Twig 1.X:
https://twig.symfony.com/ </div>

=Aanpassen met gebruik van het beheerinterface=
==Thema-lijst==
Op het administratiescherm is er een box om de lijst met thema's te benaderen:
[[File:Template list.jpg|thumb|800px|center|baseline|border|''De lijst thema's na een verse installatie van versie RC3'']]
<br />
De lijst heeft 5 kolommen:
* een voorvertoning van het thema:  dit is alleen het plaatje “preview.png” in de rootmap van het thema
* de titel van het thema zoals aangegeven in het manifest (config.xml in de rootmap van het thema)
* een beschrijving: een tekst in het manifest
* type thema: Core (aangeleverd bij LimeSurvey), User (toegevoegd in map upload), XML (niet geladen in de database)
* Extends: indien het een uitbreiding is van een ander thema, de naam van dat thema
* Enkele knoppen voor acties
** Installatie: Het laad het manifest van een thema om het toe te voegen aan de database zodat het beschikbaar voor selectie bij een enquête
** Verwijderen: de registratie van het thema in de database wordt verwijderd
** Sjablooneditor: link naar de thema-editor
** Sjabloon-opties: link naar de globale configuratie van de bijbehorende opties

==Thema-editor==
<div class="simplebox">[[File:help.png]] Hier gaan we ervan uit dat je het gebruik van het oude systeem nog kent.</div>
<br>
De editor is zo veel als mogelijk gelijk gebleven. Als je een standaardthema opent, dan kun je het wijzigen. Er is nu echter geen knop ''kopieer'' maar een knop ''uitbreiden'' (extend).
<br>
[[File:Extends default.png|center|baseline|border|''Nu spreken we van het '''uitbreiden''' van een thema'']]

====Overerving (inheritance)====

In versie 3, kan een thema overerven van een ander thema, het is een uitbreiding van een ander thema. Dit betekent dat de thema-map bijna leeg is, het bevat alleen de bestanden (views, stylesheets, scripts, resources enz.) die anders zijn dan het origineel. Hierdoor kun je snel veel thema's maken voor je verschillende gebruikers zonder veel werk te krijgen aan het onderhoud van veel thema's. Je kunt een eigen thema maken en daar dan per bedrijf een variant van maken (met een ander logo, style, misschien een link naar een website in de footer enz.). Als je dan de CSS of de globale lay-out van je eigen basisthema wijzigt, dan worden alle wijzigingen geërft door de bedrijfsthema's. Je kunt onbeperkt overerven, een onderdeel van een bedrijf kan een eigen thema hebben en dan kan het bedrijfsthema  weer de basis voor het onderdeel zijn.

<div class="simplebox">[[File:help.png]] Je kunt ook een eigen thema maken door een standaardthema uit te breiden. Dan zou een update van het standaardthema geen problemen moeten geven.</div>

====Toevoegingen aan de gebruikersinterface====

Om het Monochrome thema van LimeSurvey uit te breiden, ga naar de thema-lijst, klik op de knop “Thema-editor” van dit thema. Klik daarna op “uitbreiden” en pas de naam “extends_monochrome” aan.

Als je nu naar de uploadmap gaat (eventueel met je file/ftp client), zie je dat er een map '''upload/themes/extends_monochrome''' is aangemaakt. 
Het bevat een XML-bestand en mappen, maar de meeste zijn leeg. Er zijn geen views, CSS of JavaScript. Maar je kunt het nieuwe thema al wel selecteren bij een enquête, het is nu nog 100% gelijk aan het thema monochrome.

[[File:Extends monochrome empty.jpg|center|baseline|border|''De boomstructuur net na het aanmaken. Praktisch leeg.'']]

<div class="simplebox">[[File:help.png]] De bronnen (jpg, png enz.) van het originele thema worden bij het uitbreiden gekopieerd. Dit moet omdat als je een CSS-bestand kopieert en er zijn referenties (bijvoorbeeld bij een background-image) dan moeten die in het huidige thema-pad te vinden zijn.</div>

De thema-editor voor het thema extends_monochrome ziet er uit als:
[[File:Editing extends monochrome.jpg|center|baseline|border|'' Wijzigen thema extends_monochrome'']]
<br /><br />
De belangrijkste verschillen met de oude versie zijn:
 <br />
* Het keyword '''inherited''' op de bestandslijst. Het geeft geen bestand in de thema-map aan, maar dat het bestand van het originele thema wordt gebruikt.
[[File:Inherited.jpg|center]]
<br>
*  De editor zelf  ( [https://ace.c9.io ACE editor ] ) toont de inhoud van het geselecteerde bestand. Een bestand bevat naast HTML, CSS en  JavaScript ook Twig-statements. Deze Twig-statements maken het mogelijk om logica vanuit de oude core naar de views te verplaatsen, die logica kan nu worden aangepast.
[[File:Twig code in editor.jpg|center|''Twig-code, voor Enquête-lijst'']]
<br>
* Hierdoor heb je nu meer schermtypes beschikbaar in de dropdownlijst van het menu. Er zijn nu pagina's als ‘Survey List’, ‘Load’, ‘Save’, ‘Error’, ‘Registration’, ‘Assessments’, ‘Print Answers’ beschikbaar gekomen die eerder nauwelijks gewijzigd konden worden.
[[File:Newscreens editables.jpg|195px|center|''Je kunt nu alle schermen aanpassen.'']]
<br />
* De link ‘tip’ onderaan de bestandslijst geeft je de mogelijkheid om op de Twig-manier een afbeelding in je HTML toe te voegen.
[[File:Tip picture.png|605px|center]]
<br />
* De knop ‘Bewaar wijzigingen’ heeft nu als tekst '''Kopieer naar lokaal thema en wijzigingen opslaan'''.
[[File:Copytolocal.png|360px|center]]

====Voorbeeld: toevoegen van een afbeelding====

De knop '''Kopieer naar lokaal thema en wijzigingen opslaan''' doet wat het zegt. Als je iets in het bestand wijzigt dan wordt de wijziging in dat bestand opgeslagen.
<br>
Als je klikt op het bestand layout_global.twig, en net voor de regel met ''{% block content %}'''' de tekst “TEST” toevoegt en dan op de knop tikt, dan zie je dat het keyword bij dit bestand is gewijzigd van “inherited” in “local”, de knoptekst is nu ook weer '''Bewaar wijzigingen'''. 
[[File:After edition.png|center|''net na het klikken op de knop'']]
<br>
Als je naar de map upload/themas/extends_monochrome/views/, gaat, dan zie je dat daar maar een bestand in staat, het bestand  layout_global.twig met de tekst “TEST”.
[[File:Tree with layout global arrow.png|center|''Het bestand is aanwezig in je thema'']]
<br><br>
We voegen nu een afbeelding toe in plaats van een tekst.  Klik op de link ''tip'':
<br>
Om een afbeelding in een twig-bestand te gebruiken:
'''{{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}'''
<br>
Je hebt natuurlijk de Twig-documentatie al eens een keer gelezen en je weet dan ook dat bij '''&#123;&#123; }}<nowiki />''' de inhoud tussen de haakjes, dus hier het resultaat van de function image( ) op het scherm wordt getoond. 

<div class="simplebox">[[File:help.png]]  Als je de code eens een keer wilt zien, die staat hier: [https://github.com/LimeSurvey/LimeSurvey/blob/f3737a75e428f604d68d2e5ba958f3eba3eba2e1/application/core/LS_Twig_Extension.php#L219-L237 versie RC3]
Maar je hoeft alleen maar te weten hoe je het moet aanroepen.
</div>
<br>
De function image() wordt gebruik om:
* de afbeelding te vinden die in het thema gebruikt wordt. De functie zoekt indien nodig ook in het thema (meerdere niveaus mogelijk) waar het thema van afstamt.
* dit gaat met gebruik van de ''asset-manager'' voor een betere performance van het thema. Meer informatie hierover:  http://www.yiiframework.com/wiki/148/understanding-assets/

<div class="simplebox">
Dus om een afbeelding in je thema toe te voegen:
* eerst indien nodig een bestand uploaden en dan op de plek waar je het wilt hebben toevoegen in een twig-bestand met:
'''&#123;&#123; image('./files/myfile.png') }}'''

* Je kunt beter ook het veld ALT invullen, deze tekst wordt getoond als het plaatje ontbreekt (ook voor screen-reader en HTML validatie): 
&#123;&#123; image('./files/myfile.png'), ''' ‘bedrijfslogo’ ''' }}

* Je kunt er ook nog een class attribuut en een id aan toevoegen:
&#123;&#123; image('./files/myfile.png'), ‘bedrijfslogo’, ''' &#123;“class”: “a_nice_css_class”, “id”: “any_id”} ''' }}
</div>

====Onze wensen (TO-DO lijst)====
* De gebruikers een aangepaste voorvertoningsbestand in de editor laten upladen.
* Een knop om het lokale bestand te verwijderen en terug te keren naar de opdracht inherited.
* Alleen de afbeeldingen in de CSS-bestanden laten kopiëren (door een lijst toe te voegen in het manifest)
* Herinneren welke sjablonen het huidige als basis gebruiken  (indien die er zijn).

==Sjabloon opties==
Ook nieuw in versie 3 is de pagina sjabloon optie. Iemand die een sjabloon maakt kan eigen opties maken en zelfs een eigen optie-pagina, dat lichten we later toe. Eerst laten we zien doe de optie-pagina bij de standaardsjablonen werkt. Klik op : “sjabloon opties” in de sjabloonlijst.
===Geavanceerde opties===


{{QS:Theme editor - advanced options/nl}}

===Eenvoudige opties===

De pagina Eenvoudige opties krijg je bij het sjabloon zelf. Het wordt aangemaakt met een twig-bestand en wat JavaScript in de map template/options/ : 
https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options
<div class="simplebox">[[File:help.png]] Deze pagina kan er bij een ander sjabloon heel anders uitzien, ook kan en zal elke sjabloonmaker een eigen stijl hebben wat betreft opmaak e.d. </div>

[[File:Options.png|thumb|750px|center]]
<br><br>
Op deze pagina wordt de geavanceerde scherminvoer ingevoerd. Je kunt hier een instelling aan of uitzetten en kijken wat de gevolgen zijn. In de standaardpagina eenvoudige opties kun je het Bootswatch-thema wijzigen in “Darkly” en dan (zelfs het het eerst op te slaan) op de tab van de geavanceerde opties klikken, je ziet dan dat het veld “Cssframework Css” gewijzigd is van

&#123;"replace": &#91;&#91;"css/bootstrap.css","css/flatly.css"]]}<br>
in<br>
&#123;"replace": &#91;&#91;"css/bootstrap.css","css/darkly.css"]]}
<br>
De eenvoudige opties op een standaardsjabloon zijn:
*'''Ajax mode:''' De volgende pagina laden via Ajax (sneller) of via herladen pagina (beter als je wilt debuggen)
*'''Achtergrondplaatje:''' Indien Ja, het plaatje pattern.png dat wordt geladen (wordt later vervangen bij een bestandskeuze)
*'''Box container:''' Indien Nee, de vragen worden niet in een box getoond, je kunt dan vragen langer dan het scherm maken.
*'''Logo:''' Indien Nee, de naam van de enquête wordt getoond in de topregel, anders wordt er een (door je geselecteerde) afbeelding getoond
*'''Animeren body:''' Bij Ja kun je een animatie kiezen die gebruikt wordt bij het laden van de body van de enquête.
*'''Animeren vraag:''' als bij body
*'''Animeren waarschuwing:''' als bij body
*'''Bootstrap thema:''' Het te laden Bootstrap thema, afkomstig van https://bootswatch.com/3/
<br>
De library die voor animaties gebruikt wordt (animate.css):  ''https://daneden.github.io/animate.css/''.
Het animeren is optioneel en je kunt andere animaties gebruiken.

<div class="simplebox">[[File:help.png]] Het sjabloon monochrome gebruikt dezelfde bootstrap kleur thema als de beheerders-interface. Ze gebruiken niet het CSS-framework vervangingssysteem, maar voegen eenvoudig  een CSS-bestand toe. Dit is een andere manier om met aangepaste thema's om te gaan voor aanbieders van thema's.</div>

===Inheritance===

Hiervoor hebben we gezien dat een sjabloon een ander sjabloon kan extenden. Dit kan ook voor de configuratie van het sjabloon. Je kunt dan voor het sjabloon een configuratie hebben op 

* op globaal niveau (die hebben we net via de sjabloonlijst gezien)
* op enquête-groepsniveau
* minstens 1 op enquête-niveau 

Elke parameter op een niveau kan erven van het bovenliggende niveau. We gaan het eerst bekijken op enquête-groepsniveau.

====Op enquête-groepsniveau====

Een van de mooiste uitbreidingen in LimeSurvey3 is het werken met enquête-groepen. Je kunt je enquêtes nu in groepen indelen. Ga naar de enquête-lijst en klik op de tab Enquête-groep:
[[File:Surveygroup.png|thumb|800px|center|''De tab Enquête-groep'']]
<br>
In deze lijst zijn er 2 knoppen. Als de groep leeg is, dan kun je de groep verwijderen. Je kunt de groep altijd wijzigen, door te klikken op de knop wijzigen ga je naar de instellingenpagina van de enquête-groep:
[[File:Surveygroupedit.png|thumb|800px|center|''Wijzigen standaard enquête-groep'']]
<br>
De derde tab op deze pagina is “Thema-opties bij deze enquête-groep”. Als je er op klikt krijg je dezelfde lijst met sjablonen als in de sjablonenlijst, er is nu maar één knop zichtbaar (de sjabloon-editor kan alleen via de hoofdlijst worden aangeroepen).
<br>
Als je nu klikt op de optie voor het standaardsjabloon krijg je dit scherm:
[[File:Option group inherit.png|thumb|800px|center|''Standaard worden op enquête-groepsniveau de sjabloon-opties geërft'']]
<br>
* '''Alles''' betekent dat de configuratie van de globale instellingen wordt overgenomen. 
* Op de pagina met de geavanceerde opties zie je welke velden dan worden overgenomen.
* "Nee" in de eenvoudige opties zorgt ervoor dat je een pagina krijgt als die bij de globale opties. Je kunt dan per veld aangeven ja, nee of inherited om de optie in te stellen (ja/nee) of toch de waarde van de globale instellingen over te nemen.  
[[File:Inherit group.png|thumb|800px|center|''Elke instelling kan de optie inherited (overerven) hebben'']]

<div class="simplebox">[[File:help.png]] Een enquête-groep kan onderdeel zijn van een enquête-groep. De enquête-groep erft dan van de bovenliggende groep, de groep waar het dus deel van uitmaakt.</div>

====Op enquête-niveau====
Als je een enquête wijzigt staat er in het linkermenu de nieuwe optie “Sjabloon-opties”. Die geeft toegang tot een pagina waar je de opties van het sjabloon voor de huidige enquête kunt instellen. Ook hier is, net als bij enquête-groepen, sprake over overerving (inheritance). Hier wordt geërft van de betreffende enquête-groep.  
[[File:Options survey.png|thumb|800px|center|''Sjabloon-opties op enquête niveau'']]

==De praktijk==
Stel dat we een sjabloon zowel voor bedrijf A als bedrijf B gebruiken. Je stelt wat opties in op globaal niveau (bijv.: ajax aan, animeer body met een schuif, waarschuwen met een pulse). Je maakt dan een enquête-groep aan voor bedrijf A en ook een voor bedrijf B.  Elke groep bevat de enquêtes die dat bedrijf doet. Je stelt hierbij in de groep alleen het logo en de achtergrond in en laat de andere opties overerven.  Je kunt voor een enquête van een van de bedrijven de achtergrond aanpassen naar aanleiding van de enquête zelf, dus op enquête-niveau. Als bedrijf B dan stelt dat het pulseren lelijk te vinden en liever iets met vervagen te zien dan kun de animatie op groepsniveau van de groep van dat bedrijf aanpassen. De enquêtes van bedrijf B gebruiken dan de nieuwe manier van animeren. Je kunt ook eenvoudig op 1 plek het logo van een bedrijf aanpassen in alle enquêtes als een bedrijf een nieuwe logo neemt.
<br>
<div class="simplebox">Deze voorbeelden zijn op basis van het huidige basissjabloon. Maar je kunt als sjabloonontwerper met twig natuurlijk eigen opties toevoegen. Je kunt een optie “info footer” toevoegen waarin je gegevens toevoegt als bedrijfswebsite of een telefoonnummer van het bedrijf. Als een bedrijf dan verschillende afdelingen heeft met verschillende telefoonnummers, maar wel enquêtes houden dan kun je ook subgroepen per afdeling aanmaken. EHet telefoonnummer wordt dan een optie.</div>

= Veel gestelde vragen over het aanpassen van een thema =

We hebben hier wat vragen neergezet die door gebruikers op ons forum gesteld zijn en die je kunnen helpen om je thema aan te passen.

==Aanpassen CSS/JavaScript: werken met de asset-manager ("Waarom werken mijn aanpassingen niet?") ==
<br />

Als je de CSS/JavaScript van een thema probeert aan te passen in een editor dan kan het gebeuren dat je wijzigingen niet meegenomen lijken te worden.

<br />

Vanaf versie 2.50 gebruikt LimeSurvey de 
[http://www.yiiframework.com/wiki/148/understanding-assets/  Yii asset-manager].
<br />

Daardoor komen de CSS/JavaScript-bestanden van het thema in een submap met een willekeurige naam bijvoorbeeld ''tmp/1ef64ml/''. Dus als je een css/js-bestand wijzigt en dat bekend is in de asset-manager, dan worden de bestanden geplaatst in een nieuwe submap. Dit voorkomt dat de gebruiker de cache van de webbrowser moet verversen, er wordt immers een nieuw bestand gebruikt, de gebruiker ziet dan direct de nieuwe versie. 

<br />

De CSS-links in de header met de asset-manager:
<br />
[[File:Assets on vanilla.jpg]]
<br />Je ziet de referentie naar de submap tmp. 

<br />

De CSS-links in header zonder asset-manager:
<br />
[[File:Asset off.png]]
<br />Zoals je ziet verwijzen ze naar de bestanden van het thema. 

<br />

<div class="simplebox">[[File:help.png]] Een nadeel is natuurlijk wel dat je het de Asset-Manager moet vertellen dat je het bestand gewijzigd hebt, anders krijgt de gebruiker de oude versie in de  toenmalige submap te zien.</div>

Je kunt dus op meerdere manieren de CSS/JavaScript van een thema wijzigen:
*'''met de LimeSurvey Sjabloon editor:''' die werkt met de asset-manager, je hoeft je dus dan daar geen zorgen over te maken dan je een oude versie krijgt bij gebruik
*'''je kunt gaan debuggen:''' je schakelt de asset-manager uit, de css/js bestanden van je thema's worden gebruikt. Je moet dan als gebruiker de cache verversen na elke aanpassing
* '''Je kunt de cache verversen''': bij de algemene instellingen -> Algemeen -> Cachegeheugen voor assets wissen

[[File:Clearassets-ls3 3.png]]

<div class="simplebox">[[File:help.png]] '''Wij bevelen het gebruik van de sjabloon-editor aan.''' </div>


Door het gebruik van de sjabloon-editor krijg je een goed beeld van de architectuur van het nieuwe thema-systeem.
Wees voorzichtig als je de CSS in het thema fruity aanpast, de meeste definities gebruiken de selector ".fruity" (een class van de body).

== Aangepaste fonts toevoegen aan het thema ==
=== De gemakkelijke weg : gebruik Google Font CDN  ===
Het bootswatch thema gebruikt Google Font CDN. We kijken hoe dat werkt:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css

<syntaxhighlight lang="css" enclose="div">
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");
</syntaxhighlight>

Daarna wordt in de CSS het Lato font gebruikt:
https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72
<syntaxhighlight lang="css" enclose="div">
body {
  ...
 font-family: "Lato";
 ...
}
</syntaxhighlight>

Je kunt elke Google font op die manier in je eigen thema gebruiken. Je moet dan wel de font selector bij de opties in je thema verwijderen. Verwijder in options.twig deze regels:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

=== Gebruik lokaal font  ===
Je kunt een font-bestand natuurlijk ook lokaal opslaan en dat bestand dan gebruiken in plaats van bijvoorbeeld het via Google CDN (privacy) te gebruiken. Een voorbeeld met het font noto:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css
<syntaxhighlight lang="css" enclose="div">
@font-face {
  font-family: 'Noto Sans';
  font-weight: 300;
  font-style: normal;
  src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...
</syntaxhighlight>

Je kunt een soortgelijke definitie in je eigen css-bestand van het thema gebruiken, en het bestand NotoSans-Regular.ttf  in de map css/font-src/ van je thema te plaatsen. 

Gebruik dat font in de body (of een ander element) zoals boven aangegeven en verwijder de standaard-optie font-selector.

=== Een eigen font-selector  ===
Je kunt nu niet eenvoudig de font-selector toevoegen aan je eigen fount in opties. Wij moeten eerst de eindgebruiker de mogelijkheid geven om aangepaste packages te uploaden (Zie : De Fruity font-selector nader bekeken.) 
<br>
Hoe nu verder:
<br>
*Voeg twee fonts (my_custom_font en my_custom_other_font) toe aan je thema, gebruikmakend van de CDN of je lokale server 
*Voeg in je css-bestand twee classes toe:
<br>
<syntaxhighlight lang="css" enclose="div">
.font-my_custom_font {
 font-family: 'my_custom_font ';
}
.font-my_custom_other_font {
 font-family: 'my_custom_other_font';
}
</syntaxhighlight>
*In het XML-bestand van je thema, voeg een font optie toe (standaard wordt het my_custom_font) :
<syntaxhighlight lang="xml" enclose="div">
    <options>
        ....
        <font>my_custom_font</font>
    </options>
</syntaxhighlight>

* in bestand option.twig, voeg de font picker toe met de volgende regels. (Nog niet getest, klachten graag op ons forum):
<syntaxhighlight lang="html" enclose="div">
            
            <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 %}
                                        {% 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>
</syntaxhighlight>

<br>
Je gebruikers zouden nu uit die 2 fonts moeten kunnen kiezen.

=== De Fruity font-selector===
Later krijgt de gebruiker de mogelijkheid om zelf eigen asset packages te uploaden, ook voor een font package. Dan wordt het eenvoudig om een font te wijzigen. 
<br>
Uitleg over Yii-Packages:
<br>
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
<br>
<br>
LimeSurvey packages worden gedefinieerd in verschillende bestanden. Fonts packages:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
<br>
Voorbeeld: het Noto font package is hier gedefinieerd:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53
<br>
<syntaxhighlight lang="php" enclose="div">

    'font-noto' => array(
        'devBaseUrl' => 'assets/fonts/',
        'basePath' => 'fonts',
        'css' => array(
            'noto.css',
        ),
    ),
</syntaxhighlight>
<br>
Het bestand noto.css staat hier:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
<br>
Merk de definitie van de class ".font-noto" onderaan op:
<syntaxhighlight lang="css" enclose="div">
@font-face {
  font-family: 'Noto Sans';
  ...
}
...
.font-noto{
    font-family: 'Noto Sans';
}

</syntaxhighlight>
<br>
Voeg in het thema Vanilla dan het gebruik van het font noto toe door het package toe te voegen en de font-optie te definiëren:
<br>
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79

<syntaxhighlight lang="xml" enclose="div">
        <packages>
             ....
            <add>font-noto</add>
        </packages>
</syntaxhighlight >
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58
<br>
<syntaxhighlight lang="xml" enclose="div">
    <options>
        ....
        <font>noto</font>
    </options>
</syntaxhighlight>
<br>
Daarna wordt de body class font gedefinieerd met::
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76
<syntaxhighlight lang="html" enclose="div">
<body class=" ...  font-{{  aSurveyInfo.options.font }} ... " ... >
</syntaxhighlight>

Natuurlijk bevat het XML-bestand alleen de standaardwaarden van je sjabloonconfiguratie. Deze zijn gedefinieerd en worden gelezen in de database (table "template_configuration") als json-strings. Het bestand option.js file gebruikt alleen maar de waarde van de font-selector bij de eenvoudige opties om de waarde op scherm met de geavanceerde opties te wijzigen:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

Dus in de toekomstige versie waar je een package kunt uploaden wordt het eenvoudiger om in een script te zoeken naar alle bestaande font packages en die dan toe te voegen aan de font-selector.

== Thema-opties toevoegen om het plaatsen en tonen van enquête-onderdelen te besturen  ==
Met deze uitleg willen we tonen hoe je opties kunt toevoegen aan een uitgebreid thema om enquête-onderdelen te tonen op een bepaalde plaats. We willen de titel van de enquête op twee verschillende plaatsen kunnen tonen.
<div class="simplebox">[[File:help.png]] We gebruiken weer het voorbeeld van het uitbreiden van het "bootswatch" thema in LimeSurvey versie 3.4.3.</div>  
=== Een aangepast thema maken  ===
#Extend het "bootswatch" thema zoals eerder is aangegeven.
#Kopieer <span style="color: #BA2121;">custom.css</span> naar het lokale sjabloon.
===Sjabloon-opties toevoegen===
#Kopieer de  inhoud van <span style="color: #BA2121;">/themes/survey/bootswatch/options/</span> naar <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/options/</span>.
#Open <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/options/options.twig</span> in de editor en zoek naar "{# Bootstrap Bootswatch theme #}". Voeg direct voor het parent  <nowiki><div class='row'></nowiki> element, toe:<syntaxhighlight lang="html" enclose="div">
		{# Aangepaste enquête-naam in navigatie-taakbalk #}
		<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'/>
								Ja
							</label>
							<label class="btn btn-default">
								<input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
								Nee
							</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='aan' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
								Ja
							</label>
							<label class="btn btn-default">
								<input name='surveyname2' type='radio' value='uit' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
								Nee
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div></syntaxhighlight>
#Open <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/config.xml</span> en voeg twee items toe aan het "options" blok, het ziet er dan uit als:<syntaxhighlight lang="xml" enclose="div">    <options>
        <ajaxmode>aan</ajaxmode>
        ...
        <surveyname1>aan</surveyname1>
        <surveyname2>aan</surveyname2>
    </options></syntaxhighlight>
#Je moet nu twee nieuwe opties hebben in het scherm Thema-opties:<br />[[File:Tutorial_tp_1_1.png]]

===Aangepaste view voor enquête-titel in de taakbalk===
#Maak de map <span style="color: #BA2121;">/upload/themes/survey/jeThemaNaam/views/subviews/header/</span> aan.
#Kopieer <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/header/nav_bar.twig</span> naar die map.
#Open <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/header/nav_bar.twig</span> en zoek naar "{# Logo option #}". Wijzig het IF-statement daaronder voor het logo/survey-name, zodat het er uit ziet als:<syntaxhighlight lang="html" enclose="div">
		{# 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 %}</syntaxhighlight>
#Voeg iets als onderstaande toe aan <span style="color: #BA2121;">/upload/themes/survey/jeThemaNaam/css/custom.css</span>:<syntaxhighlight lang="css" enclose="div">.navbar-brand {
    line-height: 60px;
    font-size: 32px;
}</syntaxhighlight>
#Zet de thema-optie tonen enquête-naam in taakbalk op "Ja".
#Je zou nu moeten zien:<br />[[File:Tutorial_tp_1_2.png]]
===Aangepaste view voor enquête-titel onder voortgangsindicatie===
#Maak de map <span style="color: #BA2121;">/upload/themes/survey/jeThemaNaam/views/subviews/survey/group_subviews</span> aan.
#Kopieer <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig</span> naar die map.
#Open <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig</span> en voeg een <nowiki><h1></nowiki> element voor de enquête-titel toe. Het lijkt dan op dit:<syntaxhighlight lang="html" enclose="div"><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></syntaxhighlight>
# Voeg iets als onderstaande toe aan <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/css/custom.css</span>:<syntaxhighlight lang="css" enclose="div">.navbar-brand {
    line-height: 60ph1.custom-survey-name {
	margin: 0;
	text-align: center;
}</syntaxhighlight>
#Zet de thema-optie enquête-titel onder voortgangsindicatie op "Ja"
#Je zou nou moeten zien :<br />[[File:Tutorial_tp_1_3.png]]

===Downloads===
* Voorbeeld [[Media:Test_survey_names.zip|extended thema]]

=Een nieuw thema aanmaken=
Moet nog uitgewerkt worden.

Op dit moment geven we alleen enkele tips.

==Themastructuur==

===Bestanden en mappen===
Wanneer je een nieuw thema maakt, hoef je niet de structuur (bestand/map/css/js) van Vanilla te gebruiken.
De verplichte css / js is standaard al toegevoegd (je kunt deze desgewenst nog steeds verwijderen).

De lay-outbestanden die je thema moet hebben zijn:

* '''layout_global.twig''': maken van de pagina's voor het invullen van de enquête.
* '''layout_survey_list.twig''': maak de enquête-lijst (als dit thema als standaard is ingesteld).
* '''layout_errors.twig''': gebruikt om fouten weer te geven die het opbouwen van enquêtes blokkeren (verkeerde onderzoeks-id, lege groep in preview-groep, enz.).
* '''layout_user_forms.twig''': maakt gebruikersformulieren o.a.: token (deelnemer aan de enquête) en registreren.
* '''layout_print.twig''': gebruikt om de enquête af te drukken als pdf.
* '''layout_printanswers.twig''': print de antwoorden.

De inhoud van die bestanden, de bestanden die ze wel of niet bevatten, jij bepaalt het.
Alle andere bestanden en mappen die je op Vanilla vindt zijn puur optioneel, voel je vrij om je code te organiseren zoals jij dat wilt.

<div class="simplebox"> [[File: help.png]] Als je de frontend-rendercode leest, zie je dat die bestandsnamen er rechtstreeks in staan. Dat is waarom ze verplicht zijn.
Bijv.: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462
 </div>

=== Inhoud ===

In Vanilla's layout_global.twig, you'll see we use a variable called "include_content"  to decide what to show
https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/layout_global.twig#L114-L115

<syntaxhighlight lang="php" enclose="div">
                    {% set sViewContent =  './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
                    {% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %}
</syntaxhighlight>

aSurveyInfo.include_content tell you what action is currently going on: showing questions? showing submit result? showing clear all? etc
As you can see, in vanilla, we create one file to include by action. So if you want to know the list of actions, just check the vanilla's directory '''views/subviews/content''', and remove the "twig" extension :
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''' 

If you already created a them for 2.x versions of LimeSurvey, you'll notice that most of them corresponds to the old pstpl files for limesurvey 2.x. 
Again, there is no obligation for you in your theme to create those files, with those names, in this directory. You could for example just add a giant switch in layout_global.twig with the wanted HTML for each action.

=== Het manifest config.xml ===

The manifest of the theme contains the main informations about your theme. When you install a theme, the content of the manifest will be loaded in the database, in two different tables: template and template_configuration.  So each time you modify the manifest of a theme, you must uninstall and reinstall it (or just reset it). Because this process is annoying while developing a theme you can force the direct usage of the XML file rather than the DB entries. To do so, in config.phpn turn on debug mode and 'force_xmlsettings_for_survey_rendering' to true.

==== De sectie metadata ====

Nothing complex: just the main infos about your theme. It will be pushed in the table templates_configuration  

<syntaxhighlight lang="xml" enclose="div">
    <metadata>
        <name>De naam van het thema</name>
        <title>De titel van het thema</title>
        <creationDate>10/05/2019</creationDate>
        <author>Je naam</author>
        <authorEmail>your@email.org</authorEmail>
        <authorUrl>http://www.yourwebsite.org</authorUrl>
        <copyright>Copyright </copyright>
        <license>Licentie van je thema</license>
        <version>Versie van je thema</version>
        <apiVersion>3</apiVersion>
        <description>Beschrijving van je thema</description>
        <extends>parent_theme</extends>
    </metadata>
</syntaxhighlight>


Few remarks:
* '''name''': will be used as a key in the db. So it must be unique, and it should not have any special chars (no spaces). Note that cases will not be taken in account
* '''Title''': will be used to display your theme name in the different lists. It can have special chars
* '''description''': will be used in the main list of survey theme. It can contains special chars, and even HTML code by using 
* '''extends''': optional, it defines the parent themes. So if any file is not present in this theme (twig/js/css/jpg, etc) it will look for it in the parent theme


<div class="simplebox">[[File:help.png]] If you extended one of the the 3 core themes (Vanilla, Bootswatch, Fruity), you can change the "extends" value from one parent theme to the other. Of course, you'll have to reset the theme. </div>





==== De sectie files ====

This one is an important one. It will be pushed in the table template_configuration, in the field 	files_css, files_js, 	files_print_css as json arrays.  

Eg: the files section of the Material Premium Theme:

<syntaxhighlight lang="xml" enclose="div">
    <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>
</syntaxhighlight>

All the CSS/JS files present in this section will be loaded at the launch of the survey (in ajax mode. If ajax mode is off, then of course all the files are reloaded at each page). 


They will be added to a Yii Asset Packet based on the name of the theme. So when Asset Manager is on (debug mode being off), those files will be copied to the tmp directory with the rest of the theme (so you can use relative path in the CSS and JS to reach the image files).  
About the Asset manager in Yii: https://www.yiiframework.com/wiki/148/understanding-assets 
About packages in Yii: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail


They will use the inheritance system. It means that if you add a CSS/JS file to a theme, but it's not present in the theme, then the engine will look into all the mother themes of this theme and will use the first one it finds. So if a user extends your theme via the theme editor, all those files will be inherited in his theme. The keywords refer to this inheritance system.


* '''add''' : it will add the file to the theme, and to all its inherited theme
* '''replace''': it will replace the the file of its mother theme
* '''remove''': it will remove the file from '''any''' package, even the core package (since 3.14)

<div class="simplebox">[[File:help.png]]   Remember you can set in config.php 'force_xmlsettings_for_survey_rendering' so configuration is read from XML instead of DB (no reset needed). This will make easier to test the modifications of the XML files, and will avoid you to uninstall/reinstall theme at each modification of the XML </div>


Few remarks on those keywords: 


===== Inheritance tips  =====
As explained before, the "add" keyword can refer to a file being in one of the mother theme. So you can "add" a file in this section, and still not having this file in your theme, but in one of its parents theme. The engine will look into all its parent themes and will use the first one it finds. If it can't find the file, and debug mode is on in config, and js frontend debug mode is on in global setting, a message in console will warn you. Eg: if we add in a my_theme: <add>css/unexisting.css</add>, in the console we'll see:

<syntaxhighlight lang="" enclose="div">
 (¯`·._.·(¯`·._.· Theme Configuration Error  ·._.·´¯)·._.·´¯) 

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

If the debug mode is off, then no error at all will be seen. The engine will just ignore the wrong add statements.



===== Wanneer gebruik ik add, replace of gebruik ik de parent (bovenliggende thema)? =====

First: add and replace are the very same keyword. You can use the one or the other, the engine will just do the same. They are distinct for human readers, so they understand what was your intention. 


You can't add a file with the same name as the mother theme: it will always replace it. eg: If you have a file called "my_mother_theme/foo.css" and you add a file called "foo.cs" in the daughter theme, only  "daughter_theme/foo.css" will be added to the theme. If you want to keep "my_mother_theme/foo.css", just choose another name for "daughter_theme/foo.css", like "daughter_theme/bar.css". So the keyword "add" can be used as a "replace" keyword. 


If you wonder why: this make much easier the automatic generation of inherited theme, copying the file section works out of the box (no need to rename "add" to "replace" when extending one the file). 


To make it clear, let's take the Fruity example. Here its css file section:


<syntaxhighlight lang="xml" enclose="div">
        <css>
            <add>css/variations/sea_green.css</add>
            <replace>css/animate.css</replace>
            <replace>css/theme.css</replace>
            <replace>css/custom.css</replace>
        </css>
</syntaxhighlight>


If you look to the custom.css file in fruity, it is exactly the same as the vanilla one. We could delete the custom.css file inside fruity, the one of vanilla would loaded. We could remove the statement <replace>custom.css</replace> from the Fruity manifest, the statement from vanilla will be used, and the vanilla custom.css would be loaded. 


So why do we use the statement  <replace>custom.css</replace> inside the fruity manifest?  The answer is easy: because we want the end user to be able to extend the fruity theme, to modify the file in his local theme, and to load this modified file from his inherited theme.  To understand, just extend fruity and have a look to the extended theme. THe extended theme doesn't even have the file custom.css. So the one of fruity will be used. But: if the user create this file in the extended theme (by clicking on "extend" in the theme editor), then this file will be loaded from his theme. 


So in general: 
if you create a theme from scratch not extending any theme, just use the add statement to add your css/js files. Easy peasy.
if you create a theme extending another theme, and you don't want the users to be able to extends the css/js file from the mother theme: don't use the add statement in your manifest. THe files will still be loaded from the mother theme configuration.
if you create a theme extending another theme, and you want to replace a file from the mother theme: use the replace keyword (the add keyword will have the same result)
if you create a theme extending another theme, if you don't replace a given file from css/js, but you want the users to be able to extend this file: then use the "replace" statement in your manifest for this file. Even if you don't replace the file, by using the keyword replace in the manifest: you allow the user to do it if he wants to do it.  


Only this very last case needs a bit of mental gymnastic ot understand, all the other cases are trivial.



<div class="simplebox">[[File:help.png]] 
You can also register CSS and JS files directly from the twig code. Those files will be loaded only when the twig file is asked. If you want the users to be able to inherit those JS/Css files from the theme editor, remember to use the functions {{registerTemplateCssFile('my_style.css')}} and {{registerTemplateScript('my_script.js')}}. If you don't use those functions, your theme may work, but inheritance on it will be broken.  It is the same logic as the {{image('my_picture.jpg')}} function
</div>

===== Het keyword remove  =====

The remove keyword is available only since 3.14. With this one, you can remove any css/file from any package, even the core ones. It is used in Material Premium Theme to remove the Awseome Bootstrap Checkbox's files:

<syntaxhighlight lang="xml" enclose="div">
<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
</syntaxhighlight>

so you should use the very same syntax as the package's file (eg: "awesome-bootstrap-checkbox.css" alone without it's folder path would not work). You'll find the complete list of core packages and their files in /application/config/packages.php and config/third_party.php. For example, for awesome-bootstrap-checkbox.css:
https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56

<syntaxhighlight lang="php" enclose="div">
        'css'=> array(
            'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
        ),
</syntaxhighlight>


Another way to find the exact name to use in the remove tag is to turn asset manager on (turning debug mode off or setting 'use_asset_manager'=>true in the config). Then, the path to use will be the one just after the random directory in the tmp directory. For example, for awesome-bootstrap-checkbox.css:
<syntaxhighlight lang="html" enclose="div">
<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />
</syntaxhighlight>

Files you should not remove:

'''jquery-3.1.1.min.js''' : vereist

'''jquery-migrate-3.0.0.min.js''' : vereist

'''survey.js''' : vereist

'''moment-with-locales.min.js''' : vereist voor o.a. vraagtype Datum

'''em_javascript.js''' : vereist voor Expressiebeheer JavaScript

==== De sectie options ====

This section is relative to the option of your theme. It will be used to feed the filed "options"  of the table template_configuration as a json array.

=== Meer informatie ===

* [[Theme:Available function]]

== Enkele opmerkingen ==

'''NB''':  als je het XML-bestand van een thema aanpast, dan moet je de registratie van het  thema verwijderen en opnieuw installeren om de wijziging in te laten gaan. 

'''NB''':  je kunt dat voorkomen door niet de database te laten gebruiken maar de XML. Je kunt dat instellen door in ''config.php'' de debug mode aan te zetten en de onderstaande regel niet op commentaar te zetten:

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

Wees voorzichtig: alles wordt geladen uit XML (inclusief opties, enz.).


'''NB''':  als je handmatig CSS/JavaScript-bestanden aanpast (niet via de thema-editor) en de debug-mode is '''off''', kun je nu afdwingen dat de cache wordt gewist (flushed). In "Instellingen'' de tab "Algemeen" klik op de knop "Cachegeheugen voor assets wissen".

'''OPMERKING''': als je de sectie verwijdert