Thema-editor (Sjabloonbeheer)

Introductie

Een enquêtethema bepaalt hoe uw enquête eruitziet voor deelnemers: de pagina-indeling, kleuren, lettertypen, logo's en de opmaak van elke vraag. Thema's worden gebouwd met Twig-sjablonen, CSS en JavaScript en gebruiken Bootstrap 5 als CSS-framework.

Veel gangbare wijzigingen vereisen helemaal geen code. Het logo, de kleuren, de lettertypen en verschillende weergave-instellingen kunt u wijzigen met de thema opties. Gebruik de thema-editor die op deze pagina wordt beschreven wanneer u verder wilt gaan: uw eigen CSS of JavaScript toevoegen, de HTML van een pagina wijzigen of afbeeldingen en andere bestanden voor uw thema uploaden.

LimeSurvey wordt geleverd met deze standaard enquêtethema's:

• Fruity TwentyThree (fruity_twentythree): Het standaardthema.
• Bootstrap Vanilla (vanilla): Een eenvoudig basisthema voor ontwikkelaars die hun eigen thema op basis van Bootstrap willen bouwen.
• Fruity (fruity) en Bootswatch (bootswatch): Beide breiden Bootstrap Vanilla uit.

De weergave van afzonderlijke vraagtypen wordt bepaald door vraagthema's, niet door het enquêtethema. Als u de HTML van een vraagtype wilt wijzigen, maakt u een vraagthema aan.

Voordat u begint

Om de thema-editor te gebruiken, hebt u de algemene rechten voor Thema's nodig (zie algemene rechten) of moet u hoofdbeheerder zijn. Voor het uitbreiden van een thema is het recht Aanmaken nodig, voor het opslaan van wijzigingen Bijwerken en voor het verwijderen van een thema of het resetten van een bestand Verwijderen.

  Een thema met fouten kan ervoor zorgen dat elke enquête die het gebruikt onbruikbaar wordt. Test uw wijzigingen met een enquêtevoorbeeld voordat u het thema in een live enquête gebruikt.

Standaardthema's kunnen niet worden gewijzigd: breid ze uit

Standaardthema's worden samen met LimeSurvey bijgewerkt, dus u kunt ze niet rechtstreeks wijzigen. Om er een aan te passen, breidt u het uit. Bij het uitbreiden wordt een nieuw gebruikers-thema aangemaakt dat alles overerft van het bovenliggende thema. Uw thema bevat alleen de bestanden die u wijzigt; al het andere wordt overgenomen van het bovenliggende thema. Zo krijgt uw thema nog steeds de bugfixes en verbeteringen wanneer LimeSurvey het bovenliggende thema bijwerkt.

Om een thema uit te breiden, doet u een van de volgende dingen:

• Ga naar Configuratie > Thema's, open het actiemenu (⋯) aan het einde van de rij van het thema en klik op Uitbreiden, of
• Open het thema in de thema-editor en klik op Uitbreiden in de werkbalk.

Voer een naam in voor het nieuwe thema. De thema-editor opent vervolgens uw nieuwe thema.

Waar thema's worden opgeslagen

• Standaardthema's: themes/survey/ in uw LimeSurvey-installatie.
• Gebruikers-thema's (uitgebreide, geüploade of geïmporteerde thema's): upload/themes/survey/.

U kunt de bestanden van een gebruikers-thema ook rechtstreeks op de server wijzigen met uw eigen editor. Zorg ervoor dat de webserver de bestanden daarna nog steeds kan lezen en schrijven, zodat u ook de thema-editor kunt blijven gebruiken.

De thema-editor

Om de thema-editor te openen, gaat u naar Configuratie > Thema's, opent u het actiemenu (⋯) aan het einde van de rij van het thema en klikt u op Thema-editor.

Als u een standaardthema opent, wordt in een melding aangegeven dat dit een standaardthema is en wordt een link getoond om het uit te breiden. U kunt de bestanden en het voorbeeld bekijken, maar u kunt geen wijzigingen opslaan.

Werkbalk

• Exporteer gegevens: Downloadt het thema als ZIP-bestand.
• Uitbreiden: Maakt een nieuw thema aan dat van dit thema erft (zie hierboven).
• Hernoemen: Hernoemt het thema. Alleen beschikbaar voor gebruikers-thema's.
• Verwijderen: Verwijdert het thema. U kunt het thema dat als standaardthema is ingesteld niet verwijderen.
• Thema: Schakelt de thema-editor over naar een ander thema.
• Scherm: Selecteert welke enquêtepagina in het voorbeeld wordt getoond en welke bestanden voor bewerking worden weergegeven. De schermen zijn: Vraag, Lijst met enquêtes, Welkom, Voltooid, Beoordelingen, Fout, Alles wissen, Laden, Opslaan, Registratie, Antwoorden afdrukken, Openbare statistieken, PDF, Quota's bereikt, Navigatie en Deelnemer.

Bestanden wijzigen

De panelen aan de rechterkant tonen de bestanden die door het geselecteerde scherm worden gebruikt:

• Schermdeelbestanden: De Twig-sjablonen waarmee de pagina wordt opgebouwd.
• JavaScript-bestanden
• CSS-bestanden
• Andere bestanden: Afbeeldingen, lettertypen en alle andere bestanden van het thema.

Klik op een bestandsnaam om het in de editor te openen. Bestanden die als Inherited zijn gemarkeerd, komen van het bovenliggende thema. U kunt een overgeërfd bestand toch wijzigen: de knop onder de editor luidt dan Kopieer naar lokaal thema en wijzigingen opslaan, en bij het opslaan wordt het bestand met uw wijzigingen naar uw thema gekopieerd. Vanaf dat moment wordt uw kopie gebruikt in plaats van het bestand van het bovenliggende thema.

Bestanden die bij uw thema horen, hebben een knop Resetten. Resetten verwijdert uw kopie, zodat het bestand van het bovenliggende thema weer wordt gebruikt.

Bestanden uploaden

Gebruik het uploadveld onderaan het paneel Andere bestanden om afbeeldingen, lettertypen of andere bestanden aan uw thema toe te voegen. Geüploade bestanden worden opgeslagen in de map files/ van het thema. Standaard kunt u afbeeldingen (gif, ico, jpg, jpeg, png) en deze bestandstypen uploaden: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq en lsg. Uw beheerder kan deze lijsten wijzigen met de instellingen allowedthemeimageformats en allowedthemeuploads in config.php.

Om een geüploade afbeelding in een Twig-bestand te tonen, gebruikt u de functie image():

{{ image('./files/myfile.png', 'Alternative text for the picture', {"class": "myclass"}) }}

Verwijs in CSS-bestanden naar geüploade bestanden met een pad ten opzichte van de map css, bijvoorbeeld url('../files/background.jpg').

Voorbeeld

Onder de editor toont een voorbeeld het geselecteerde scherm met voorbeeldinhoud. Gebruik de knoppen Mobiel, 640x480, 800x600, 1024x768 en Volledig om de pagina bij verschillende schermformaten te controleren.

Het voorbeeld gebruikt voorbeeldgegevens en toont mogelijk niet elke stijl precies zoals een echte enquête. Controleer uw wijzigingen daarom altijd ook in een echt enquêtevoorbeeld.

Thema's importeren en exporteren

• Om een thema naar een andere LimeSurvey-installatie te verplaatsen, klikt u in de werkbalk van de thema-editor op Exporteer gegevens. Het thema wordt dan als ZIP-bestand gedownload.
• Om een thema vanuit een ZIP-bestand te installeren, gaat u naar Configuratie > Thema's en klikt u op Uploaden en installeren.

Hoe een thema is opgebouwd

Themamap

Een themamap bevat:

• config.xml: Het manifest van het thema: naam, bovenliggend thema, CSS- en JavaScript-bestanden, thema-opties en de schermen die in de thema-editor worden getoond.
• views/: De Twig-templates. layout_global.twig is de hoofdlayout voor de meeste enquêtepagina's. Andere layouts worden gebruikt voor speciale pagina's, bijvoorbeeld layout_survey_list.twig voor de openbare lijst met enquêtes en layout_errors.twig voor foutpagina's. De map views/subviews/ bevat de kleinere templates die de layouts insluiten.
• css/ en scripts/: De CSS- en JavaScript-bestanden van het thema.
• files/: Afbeeldingen en andere bestanden die door het thema worden gebruikt.
• options/: De pagina voor de thema-opties.

Twig-templates

De templates ontvangen de enquêtegegevens in de variabele aSurveyInfo. Om alles te zien wat deze bevat, schakelt u de debugmodus in via application/config/config.php en voegt u deze regel toe aan het einde van het body-element in layout_global.twig:

{{ dump(aSurveyInfo) }}

Voor de functies die u in templates kunt gebruiken, zie Beschikbare Twig-functies. Om veiligheidsredenen draaien templates in een sandbox, dus alleen deze functies zijn beschikbaar.

config.xml

De sectie <files> bevat de CSS- en JavaScript-bestanden die op enquêtepagina's worden geladen:

• <add> voegt een bestand toe. Als het bovenliggende thema al een bestand met dezelfde naam heeft, vervangt uw bestand dat bestand.
• <remove> voorkomt dat een bestand van het bovenliggende thema wordt geladen.

U hoeft bestanden van het bovenliggende thema niet opnieuw te vermelden: ze worden hoe dan ook geladen.

LimeSurvey leest config.xml wanneer een thema wordt geïnstalleerd en slaat de instellingen op in de database. Nadat u config.xml van een geïnstalleerd thema hebt gewijzigd, gaat u naar Configuratie > Thema's, opent u het acties-menu (⋯) van het thema en klikt u op Resetten om het bestand opnieuw te laden.

Uw eigen CSS en JavaScript toevoegen

Elk standaardthema heeft twee bestanden die gereserveerd zijn voor uw eigen code:

• css/custom.css: Wordt na alle andere CSS-bestanden geladen, zodat de regels hierin de stijlen van het thema overschrijven.
• scripts/custom.js: Wordt na de eigen JavaScript van het thema geladen.

Wanneer u een thema uitbreidt, zijn dit de bestanden die u wijzigt. Voeg uw CSS toe aan custom.css in plaats van de belangrijkste CSS-bestanden van het thema te bewerken, zodat uw thema updates van het bovenliggende thema blijft ontvangen.

Om meer bestanden toe te voegen, uploadt u ze en vermeldt u ze in de sectie <files> van de config.xml van uw thema. Gebruik een bestandsnaam die niet bestaat in het bovenliggende thema, anders vervangt uw bestand het bestand van het bovenliggende thema:

<files>
    <css>
        <add>css/my-styles.css</add>
    </css>
    <js>
        <add>scripts/my-script.js</add>
    </js>
</files>

Enquêtepagina's worden standaard met Ajax geladen, dus de browser laadt niet de volledige pagina opnieuw wanneer een deelnemer naar de volgende pagina gaat. Voer uw JavaScript uit bij zowel het eerste laden van de pagina als bij elke Ajax-paginalading:

$(document).on('ready pjax:scriptcomplete', function () {
    // Your code here
});

Opmaak vragen

Alle voorbeelden in dit gedeelte komen in het bestand custom.css van uw thema.

Paginaclasses

De elementen <html> en <body> hebben classes die u kunt gebruiken om hele pagina's op te maken:

• html: De taalcode (bijvoorbeeld en) en de tekstrichting (dir-ltr of dir-rtl).
• body: De naam van het thema en van elk bovenliggend thema (bijvoorbeeld fruity_twentythree), het lettertype (bijvoorbeeld font-ibm-sans), de taal (bijvoorbeeld lang-en) en brand-logo wanneer het logo wordt getoond.

Classes van de vraagcontainer

Elke vraag is omgeven door een element met de class question-container. Dit element heeft ook:

• De class van het vraagtype (zie de tabel hieronder).
• mandatory: De vraag is verplicht of zacht verplicht.
• input-error: Het antwoord heeft de validatie niet doorstaan, of een verplichte vraag is niet beantwoord.
• missing: De vraag heeft nog onbeantwoorde delen en de deelnemer is er al voorbij gegaan.
• ls-hidden en ls-irrelevant: De vraag is verborgen door de conditie.
• ls-hidden-attribute: De vraag is verborgen door de instelling "Deze vraag altijd verbergen".
• Alle classes die zijn ingevoerd in de instelling CSS-class(es) van de vraag (onder Tonen). Gebruik dit om afzonderlijke vragen op te maken.

Bijvoorbeeld een verplichte Lijst (Radioknoppen)-vraag die niet is beantwoord:

<div id="question123" class="row list-radio mandatory input-error question-container">
    ...
</div>

Classes van de vraagtypes

Vraagtype	Class	Typecode
5-puntskeuze	.choice-5-pt-radio	5
Array	.array-flexible-row	F
Array (5-puntskeuze)	.array-5-pt	A
Array (10-puntskeuze)	.array-10-pt	B
Array (Meer/Gelijk/Minder)	.array-increase-same-decrease	E
Array (getallen)	.array-multi-flexi	:
Array (teksten)	.array-multi-flexi-text	;
Array (Ja/Nee/Weet niet)	.array-yes-uncertain-no	C
Array per kolom	.array-flexible-column	H
Array dubbele schaal	.array-flexible-dual-scale	1
Datum/tijd	.date	D
Vergelijking	.equation	*
Bestandsupload	.upload-files	|
Geslacht	.gender	G
Extra lange vrije tekst	.text-huge	U
Taalkeuze	.language	I
Lijst (Dropdown)	.list-dropdown	!
Lijst (Radioknoppen)	.list-radio	L
Lijst met opmerkingen	.list-with-comment	O
Lange vrije tekst	.text-long	T
Meerkeuzevraag	.multiple-opt	M
Meerkeuzevraag met opmerkingen	.multiple-opt-comments	P
Meervoudige numerieke invoer	.numeric-multi	K
Meerdere korte vrije teksten	.multiple-short-txt	Q
Numerieke invoer	.numeric	N
Rangschikken	.ranking	R
Korte vrije tekst	.text-short	S
Tekst scherm	.boilerplate	X
Ja/Nee	.yes-no	Y

Classes voor de onderdelen van een vraag

Binnen de vraagcontainer gebruikt het antwoordgedeelte deze classes. Sommige zijn afhankelijk van de weergave-instellingen van de vraag: Array (getallen) gebruikt bijvoorbeeld andere classes wanneer het checkboxes toont in plaats van dropdowns.

Class	Gebruikt voor	Gebruikt door (voorbeelden)
.ls-answers	Het element dat alle antwoordopties bevat	Alle vraagtypes
.answers-list	Een lijst of rij met antwoordopties	Lijst (Radioknoppen), Meerkeuzevraag, Rangschikken, rijen van de meeste arrays
.subquestion-list, .questions-list	Een lijst of tabel met subvragen	Arrays, Meerdere korte vrije teksten, Meervoudige numerieke invoer
.answer-item	Eén antwoordoptie of invoerveld	Bijna alle vraagtypes
.noanswer-item	De optie "Geen antwoord"	Arrays, 5-puntskeuze, Lijst met opmerkingen
.question-item	Een subvraag die ook een antwoord is	Meerkeuzevraag, Meerdere korte vrije teksten, Meervoudige numerieke invoer
.radio-list	Een lijst of rij met radioknoppen	Lijst (Radioknoppen), 5-puntskeuze, Lijst met opmerkingen, rijen van radio-arrays
.radio-array	Een tabel met radioknoppen	Array, Array (5-puntskeuze), Array (10-puntskeuze), Array (Meer/Gelijk/Minder), Array (Ja/Nee/Weet niet)
.radio-item	Eén radioknop met label	Lijst (Radioknoppen), 5-puntskeuze, Lijst met opmerkingen, radio-arrays
.checkbox-list	Een lijst met checkboxes	Meerkeuzevraag, Meerkeuzevraag met opmerkingen
.checkbox-array	Een tabel met checkboxes	Array (getallen) met checkbox weergave
.checkbox-item	Eén checkbox met label	Meerkeuzevraag, Meerkeuzevraag met opmerkingen, Array (getallen) met checkbox weergave
.checkbox-text-item	Een checkbox met een tekstveld	Meerkeuzevraag met opmerkingen
.comment-item	Het opmerkingenveld naast een checkbox	Meerkeuzevraag met opmerkingen
.text-list	Een lijst met tekstinvoervelden	Meerdere korte vrije teksten, Meervoudige numerieke invoer
.text-item	Eén tekstinvoerveld	Korte, lange en extra lange vrije tekst, Meerdere korte vrije teksten, Array (teksten)
.number-list, .numeric-item	Numerieke invoervelden	Meervoudige numerieke invoer, Numerieke invoer
.number-array	Een tabel met numerieke invoervelden	Array (getallen), Array (teksten)
.text-array	Een tabel met tekstinvoervelden	Array (teksten), Array (getallen)
.dropdown-array, .dropdown-list, .dropdown-item	Tabellen, rijen en cellen met dropdowns	Array (getallen), Array dubbele schaal met dropdowns
.date-item	Het datuminvoerveld	Datum/tijd
.upload-item	Het uploadgebied voor bestanden	Bestandsupload
.answertext	De tekst van de subvraag in een arrayrij	Arrays
.col-answers	De kolom met teksten van subvragen	Arrays
.ls-heading	De koptekstrij met de antwoordopties	Arrays
.ls-odd, .ls-even	Afwisselende rijen	Arrays
.ls-label-xs-visibility	Een label dat alleen zichtbaar is op kleine schermen en voor schermlezers	Cellen van arrays
.ls-input-group-extra	De prefix of het achtervoegsel van een invoerveld	Korte vrije tekst, Numerieke invoer, Meerdere korte vrije teksten, Meervoudige numerieke invoer
.ls-js-hidden	Verborgen wanneer JavaScript actief is	Array dubbele schaal, Lijst (Radioknoppen)
.ls-no-js-hidden	Verborgen wanneer JavaScript niet actief is	Rangschikken
.ls-js-hidden-sr	Verborgen wanneer JavaScript actief is, maar nog steeds voorgelezen door schermlezers	Rangschikken

In Lijst (Radioknoppen) heeft de optie "Geen antwoord" de class no-anwser-item (met deze spelling) in plaats van noanswer-item.

Dit is bijvoorbeeld de HTML van de antwoorden van een Lijst (Radioknoppen)-vraag:

<ul class="ls-answers answers-list radio-list list-unstyled" role="radiogroup">
    <li id="javatbdQ123_S456" class="answer-item radio-item">
        <input type="radio" value="A" name="Q123" id="answerQ123A">
        <label for="answerQ123A" class="control-label radio-label">Option A</label>
    </li>
    ...
</ul>

Validatie- en tipklassen

Validatietips (zoals "Kies één van de volgende antwoorden" of "Voer een getal in tussen 1 en 10") hebben altijd de klasse ls-em-tip. Terwijl de deelnemer antwoordt, voegt LimeSurvey ls-em-success toe wanneer aan de regel van de tip is voldaan en ls-em-error wanneer dat niet het geval is, zodat u beide statussen verschillend kunt opmaken. Tips die zijn verborgen met de instelling Tip verbergen van de vraag krijgen de klasse hide-tip.

Elke tip heeft ook een klasse voor het type:

Klasse	Tip
.em_default	De standaardtip van het vraagtype (bijvoorbeeld "Kies één van de volgende antwoorden")
.em_num_answers	Minimum of maximum aantal antwoorden
.em_value_range	Minimum of maximum waarde
.em_sum_range	Minimum of maximum som van de waarden
.em_sum_equals	De waarden moeten samen een bepaald totaal vormen
.em_value_integer	Alleen hele getallen zijn toegestaan
.em_numbers_only	Alleen getallen zijn toegestaan
.em_other_numbers_only	Alleen getallen zijn toegestaan in het veld "Anders"
.em_other_comment_mandatory	De optie "Anders" is geselecteerd, maar het tekstveld is leeg
.em_regex_validation	Het antwoord moet overeenkomen met het validatiepatroon
.em_q_fn_validation	De validatievergelijking van de vraag
.em_sq_fn_validation	De validatievergelijking van de subvraag

Rechts-naar-links (RTL) talen

Voor talen die van rechts naar links worden geschreven heeft het element <html> de klasse dir-rtl en laden de standaardthema's een RTL-versie van hun hoofd-CSS-bestand. Gebruik .dir-rtl in uw CSS voor regels die alleen gelden voor talen die van rechts naar links worden geschreven.

TIPS

Deze recepten komen in custom.css (of in een Twig-bestand, waar vermeld) van een thema dat u hebt uitgebreid vanuit een standaardthema. Vervang in de voorbeelden #c0392b door uw eigen kleur.

De kleur van radioknoppen en selectievakjes wijzigen

Om een van de kleuren van Fruity TwentyThree te gebruiken, selecteert u een Thema kleur in de thema-opties. Met de thema-opties kunt u ook een ander Controleer icoon kiezen.

Voor elke andere kleur voegt u CSS toe aan custom.css. De standaardthema's tekenen hun eigen radioknoppen en selectievakjes in plaats van die van de browser, dus het wijzigen van de kleur betekent het aanpassen van deze getekende elementen.

Fruity TwentyThree:

.radio-item input[type=radio]:checked + label::before,
.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: #c0392b;
}
.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    color: #c0392b;
}
/* The text of the selected answer */
.radio-item input[type=radio]:checked + label,
.checkbox-item input[type=checkbox]:checked + label {
    color: #c0392b;
}

Bootstrap Vanilla, Fruity en Bootswatch:

.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    background-color: #c0392b;
    border-color: #c0392b;
    color: #ffffff;
}

Zorg voor voldoende contrast tussen de kleur en de achtergrond, zodat deelnemers met een beperkt gezichtsvermogen nog steeds kunnen zien welke antwoorden zijn geselecteerd.

Radioknoppen en selectievakjes groter maken

Grotere radioknoppen en selectievakjes zijn gemakkelijker aan te tikken op telefoons en tablets. Dit werkt in alle standaardthema's:

.radio-item label::before,
.radio-item label::after,
.checkbox-item label::before,
.checkbox-item label::after {
    scale: 1.3;
}

Voeg in Fruity TwentyThree ook wat ruimte toe tussen de radioknoppen en de antwoordtekst:

.radio-item label {
    padding-left: 14px;
}

Waarden tot ongeveer 1,4 werken zonder verdere aanpassingen. Bij grotere waarden gaan de besturingselementen op kleine schermen overlappen met de antwoordtekst en de randen van array-rijen, dus u moet dan ook meer ruimte eromheen toevoegen.

De kleur van de voortgangsbalk wijzigen

.progress-bar {
    background-color: #c0392b;
}

Inhoud slechts in één taal tonen

Het element <body> heeft een klasse met de huidige taal, zoals lang-en of lang-fr. U kunt deze gebruiken om per taal andere inhoud te tonen, bijvoorbeeld een helptekst in de voettekst. Voeg de tekst voor elke taal toe aan een Twig-bestand van uw thema, zoals subviews/footer/footer.twig:

<div class="help-fr" lang="fr">Pour de l'aide, appelez le 000000</div>
<div class="help-en" lang="en">For help, please call 000000</div>

Verberg vervolgens de tekst van de andere talen in custom.css:

body:not(.lang-fr) .help-fr,
body:not(.lang-en) .help-en {
    display: none;
}

Een ander logo per enquête gebruiken

U hebt niet voor elk logo een apart thema nodig. Thema-opties kunnen voor één enquête worden ingesteld: open de enquête, klik op Thema opties in het menu Enquête-instellingen en selecteer een ander Logo-bestand. Zie Thema-opties.

Een aangepast favicon tonen

Een favicon is het kleine icoon dat wordt getoond in het browsertabblad en in bladwijzers. De standaardthema's tonen het bestand files/favicon.ico van het thema. Om uw eigen icoon te gebruiken, noemt u het favicon.ico en uploadt u het in het paneel Andere bestanden van uw uitgebreide thema. Het vervangt het icoon van het bovenliggende thema.

Het logo centreren in Fruity TwentyThree

Schakel het Logo in bij de thema-opties en voeg dit vervolgens toe aan custom.css:

#survey-nav .container-fluid {
    position: relative;
}
#survey-nav .logo-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Uw eigen logo toevoegen aan de openbare enquêtelijst

De openbare enquêtelijst toont standaard het LimeSurvey-logo. Zo toont u uw eigen logo:

1. Breid Fruity TwentyThree uit en open uw thema in de thema-editor.
2. Upload uw logo in het paneel Andere bestanden.
3. Selecteer het scherm Lijst met enquêtes en open layout_survey_list.twig.
4. Zoek de <div> die {{ include('./ls_logo_svg.twig') }} bevat. Vervang deze hele <div>, inclusief de include-regel, door de code die onder deze stappen staat.
5. Klik op Kopieer naar lokaal thema en wijzigingen opslaan.
6. Ga naar Configuratie > Algemene instellingen > Algemeen en selecteer uw thema bij Thema voor openbare enquêtelijst en foutpagina's.

Gebruik de naam van uw geüploade bestand en de naam van uw organisatie als alternatieve tekst:

{{ image('./files/mylogo.png', 'Name of your organisation', {"class": "img-fluid mx-auto d-block"}) }}

Een scheidingslijn toevoegen aan arrays met dubbele schaal

Een verticale lijn tekenen tussen de twee schalen van een vraag van het type Array dubbele schaal:

.array-flexible-dual-scale .header_separator,
.array-flexible-dual-scale .dual_scale_separator {
    border-right: 1px solid #00a8e1;
}

JavaScript in vragen

Als u JavaScript op alle pagina's van uw enquêtes wilt uitvoeren, plaatst u het in custom.js van uw thema (zie hierboven).

U kunt ook een script toevoegen aan de tekst van een enkele vraag of groep. LimeSurvey verwijdert scripts uit deze teksten, tenzij het XSS-filter is uitgeschakeld voor uw gebruiker. Het filter geldt nooit voor supergebruikers. Voor andere gebruikers moet Filter HTML op XSS zijn uitgeschakeld onder Configuratie > Algemene instellingen > Beveiliging. Doe dit alleen als u vertrouwen heeft in iedereen die enquêtes kan wijzigen. Voor details en voorbeelden, zie Workarounds: Manipulating a survey at runtime using Javascript.