Tema redigerare

Introduktion

En enkätmall styr hur din enkät ser ut för deltagarna: sidlayout, färger, typsnitt, logotyper och utformningen av varje fråga. Mallar byggs med Twig-mallar, CSS och JavaScript och använder Bootstrap 5 som CSS-ramverk.

Många vanliga ändringar kräver ingen kod alls. Logotyp, färger, typsnitt och flera visningsinställningar kan ändras med mallalternativen. Använd den tema redigerare som beskrivs på den här sidan när du vill gå längre: lägga till egen CSS eller JavaScript, ändra HTML-koden på en sida eller ladda upp bilder och andra filer till din mall.

LimeSurvey levereras med följande kärnmallar för enkäter:

• Fruity TwentyThree (fruity_twentythree): Standardmallen.
• Bootstrap Vanilla (vanilla): En enkel basmall för utvecklare som vill bygga sin egen Bootstrap-baserade mall.
• Fruity (fruity) och Bootswatch (bootswatch): Båda utökar Bootstrap Vanilla.

Utseendet på enskilda frågetyper styrs av frågeteman, inte av enkätmallen. Om du vill ändra HTML-koden för en frågetyp skapar du ett frågetema.

Innan du börjar

För att använda tema redigeraren behöver du den globala behörigheten Mallar (se globala behörigheter) eller vara superadministratör. Att utöka en mall kräver behörigheten Skapa, att spara ändringar kräver Uppdatera och att radera en mall eller återställa en fil kräver Radera.

  En mall med fel kan göra alla enkäter som använder den oanvändbara. Testa dina ändringar med en förhandsvisning av enkäten innan du använder mallen i en aktiv enkät.

Kärnmallar kan inte redigeras: utöka dem

Kärnmallar uppdateras tillsammans med LimeSurvey, så du kan inte ändra dem direkt. Om du vill anpassa en mall utökar du den. När du utökar skapas en ny användarmall som ärver allt från sin överordnade mall. Din mall innehåller bara de filer som du ändrar; allt annat hämtas från den överordnade mallen. På så sätt får din mall fortfarande felrättningar och förbättringar när LimeSurvey uppdaterar den överordnade mallen.

Så här utökar du en mall:

• Gå till Konfiguration > Mallar, öppna åtgärdsmenyn (⋯) i slutet av mallens rad och klicka på Utöka, eller
• öppna mallen i tema redigeraren och klicka på Utöka i verktygsfältet.

Ange ett namn för den nya mallen. Tema redigeraren öppnar sedan din nya mall.

Var mallar lagras

• Kärnmallar: themes/survey/ i din LimeSurvey-installation.
• Användarmallar (utökade, uppladdade eller importerade mallar): upload/themes/survey/.

Du kan också redigera filerna i en användarmall direkt på servern med din egen editor. Se till att webbservern fortfarande kan läsa och skriva filerna efteråt, så att du även kan fortsätta använda tema redigeraren.

Tema redigeraren

För att öppna tema redigeraren går du till Konfiguration > Mallar, öppnar åtgärdsmenyn (⋯) i slutet av mallens rad och klickar på Tema redigerare.

Om du öppnar en kärnmall visas ett meddelande om att det är en standardmall, tillsammans med en länk för att utöka den. Du kan titta på dess filer och förhandsvisningen, men du kan inte spara ändringar.

Verktygsfält

• Exportera: Laddar ner mallen som en ZIP-fil.
• Utöka: Skapar en ny mall som ärver från den här (se ovan).
• Döp om: Döper om mallen. Endast tillgängligt för användarmallar.
• Radera: Raderar mallen. Du kan inte radera den mall som är inställd som standardmall.
• Mall: Växlar tema redigeraren till en annan mall.
• Mallsida: Väljer vilken enkätsida som visas i förhandsvisningen och vilka filer som listas för redigering. Mallsidorna är: Fråga, Enkätlista, Välkommen, Slutförd, Bedömningar, Fel, Rensa alla, Läs in, Spara, Registrering, Skriv ut svar, Publik statistik, PDF, Kvoter har överskridits, Navigering och Deltagare.

Redigera filer

Panelerna till höger listar de filer som används av den valda mallsidan:

• Filer med skärmdelar: Twig-mallarna som bygger sidan.
• Javaskript-filer
• CSS-filer
• Andra filer: Bilder, typsnitt och andra filer som hör till mallen.

Klicka på ett filnamn för att öppna det i editorn. Filer markerade som ärvd kommer från den överordnade mallen. Du kan fortfarande redigera en ärvd fil: knappen under editorn heter då Kopiera till lokal mall och spara ändringarna, och när du sparar kopieras filen till din mall med dina ändringar. Från och med då används din kopia i stället för den överordnade mallens fil.

Filer som tillhör din mall har en knapp Återställ. Återställ raderar din kopia, så att filen från den överordnade mallen används igen.

Ladda upp filer

Använd uppladdningsfältet längst ned i panelen Andra filer för att lägga till bilder, typsnitt eller andra filer i din mall. Uppladdade filer lagras i mallens mapp files/. Som standard kan du ladda upp bilder (gif, ico, jpg, jpeg, png) och följande filtyper: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq och lsg. Din administratör kan ändra dessa listor med inställningarna allowedthemeimageformats och allowedthemeuploads i config.php.

För att visa en uppladdad bild i en Twig-fil använder du funktionen image():

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

I CSS-filer refererar du till uppladdade filer med en sökväg relativt mappen css, till exempel url('../files/background.jpg').

Förhandsvisning

Under redigeraren visar en förhandsvisning den valda skärmen med exempelinnehåll. Använd knapparna Mobil, 640x480, 800x600, 1024x768 och Hela för att kontrollera sidan i olika skärmstorlekar.

Förhandsvisningen använder exempeldata och visar kanske inte alla stilar exakt som en riktig enkät gör. Kontrollera därför alltid dina ändringar även i en förhandsvisning av en riktig enkät.

Importera och exportera mallar

• Om du vill flytta en mall till en annan LimeSurvey-installation klickar du på Exportera i verktygsfältet i tema redigeraren. Mallen laddas då ned som en ZIP-fil.
• Om du vill installera en mall från en ZIP-fil går du till Konfiguration > Mallar och klickar på Ladda upp och installera.

Så är en mall uppbyggd

Mallmapp

En mallmapp innehåller:

• config.xml: Mallens manifest: namn, överordnad mall, CSS- och JavaScript-filer, mallalternativ och de skärmar som visas i tema redigeraren.
• views/: Twig-mallarna. layout_global.twig är huvudlayouten för de flesta enkätsidor. Andra layouter används för specialsidor, till exempel layout_survey_list.twig för den publika enkätlistan och layout_errors.twig för felsidor. Mappen views/subviews/ innehåller de mindre mallar som layouterna inkluderar.
• css/ och scripts/: Mallens CSS- och JavaScript-filer.
• files/: Bilder och andra filer som mallen använder.
• options/: Sidan för mallalternativen.

Twig-mallar

Mallarna tar emot enkätdata i variabeln aSurveyInfo. Om du vill se allt den innehåller slår du på felsökningsläget i application/config/config.php och lägger till den här raden i slutet av body-elementet i layout_global.twig:

{{ dump(aSurveyInfo) }}

Vilka funktioner du kan använda i mallar finns beskrivet i Tillgängliga Twig-funktioner. Av säkerhetsskäl körs mallar i en sandlåda, så endast dessa funktioner är tillgängliga.

config.xml

Avsnittet <files> listar de CSS- och JavaScript-filer som laddas på enkätsidor:

• <add> lägger till en fil. Om den överordnade mallen redan har en fil med samma namn ersätter din fil den.
• <remove> hindrar en fil i den överordnade mallen från att laddas.

Du behöver inte lista filer från den överordnade mallen igen: de laddas ändå.

LimeSurvey läser config.xml när en mall installeras och sparar inställningarna i databasen. När du har ändrat config.xml för en installerad mall går du till Konfiguration > Mallar, öppnar åtgärdsmenyn (⋯) för mallen och klickar på Återställ för att läsa in filen på nytt.

Lägga till egen CSS och egen JavaScript

Varje kärnmall har två filer som är reserverade för din egen kod:

• css/custom.css: Laddas efter alla andra CSS-filer, så dess regler åsidosätter mallens stilar.
• scripts/custom.js: Laddas efter mallens egen JavaScript.

När du utökar en mall är det de här filerna du ska ändra. Lägg till din CSS i custom.css i stället för att redigera mallens huvudsakliga CSS-filer, så att din mall fortsätter att få uppdateringar från den överordnade mallen.

Om du vill lägga till fler filer laddar du upp dem och listar dem i avsnittet <files> i din malls config.xml. Använd ett filnamn som inte finns i den överordnade mallen, annars ersätter din fil den överordnade mallens fil:

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

Enkätsidor laddas som standard med Ajax, så webbläsaren laddar inte om hela sidan när en deltagare går till nästa sida. Kör din JavaScript både vid den första sidinläsningen och vid varje sidinläsning med Ajax:

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

Formatera frågor med CSS

Alla exempel i det här avsnittet läggs i din malls custom.css-fil.

Sidklasser

Elementen <html> och <body> har klasser som du kan använda för att formatera hela sidor:

• html: Språkkoden (till exempel en) och textriktningen (dir-ltr eller dir-rtl).
• body: Namnet på mallen och på varje överordnad mall (till exempel fruity_twentythree), typsnittet (till exempel font-ibm-sans), språket (till exempel lang-en) och brand-logo när logotypen visas.

Klasser för frågebehållare

Varje fråga är omsluten av ett element med klassen question-container. Det har också:

• Frågetypens klass (se tabellen nedan).
• mandatory: Frågan är obligatorisk eller mjukt obligatorisk.
• input-error: Svaret klarade inte valideringen, eller en obligatorisk fråga besvarades inte.
• missing: Frågan har fortfarande obesvarade delar och deltagaren har redan gått förbi den.
• ls-hidden och ls-irrelevant: Frågan är dold på grund av sitt villkor.
• ls-hidden-attribute: Frågan är dold av inställningen "Dölj alltid denna fråga".
• Alla klasser som anges i frågans inställning CSS klass(er) (under Visning). Använd detta för att formatera enskilda frågor.

Till exempel en obligatorisk fråga av typen Lista (radio) som inte har besvarats:

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

Frågetypsklasser

Frågetyp	Klass	Typkod
5-punktsval	.choice-5-pt-radio	5
Samling	.array-flexible-row	F
Samling (5-punktsval)	.array-5-pt	A
Samling (10-punktsval)	.array-10-pt	B
Samling (öka, samma, minska)	.array-increase-same-decrease	E
Samling (tal/siffor)	.array-multi-flexi	:
Samling (text)	.array-multi-flexi-text	;
Samling (ja/osäker/nej)	.array-yes-uncertain-no	C
Samling efter kolumn	.array-flexible-column	H
Samling med dubbla skalor	.array-flexible-dual-scale	1
Datum/tid	.date	D
Ekvation	.equation	*
Filuppladdning	.upload-files	|
Kön	.gender	G
Mycket lång fritext	.text-huge	U
Språkväljare	.language	I
Lista (rullgardinslista)	.list-dropdown	!
Lista (radio)	.list-radio	L
Lista med kommentarer	.list-with-comment	O
Lång fritext	.text-long	T
Flervalsfråga	.multiple-opt	M
Flervalsfråga med kommentarer	.multiple-opt-comments	P
Flera numeriska inmatningar	.numeric-multi	K
Flera korta textsvar	.multiple-short-txt	Q
Numerisk inmatning	.numeric	N
Rangordning	.ranking	R
Kort fritext	.text-short	S
Textvisning	.boilerplate	X
Ja/Nej	.yes-no	Y

Klasser för delar av en fråga

Inuti frågebehållaren använder svarsytan dessa klasser. Några beror på frågans visningsinställningar: till exempel använder Samling (tal/siffor) andra klasser när den visar kryssrutor i stället för rullgardinsmenyer.

Klass	Används för	Används av (exempel)
.ls-answers	Elementet som innehåller alla svarsalternativ	Alla frågetyper
.answers-list	En lista eller rad med svarsalternativ	Lista (radio), Flervalsfråga, Rangordning, rader i de flesta samlingar
.subquestion-list, .questions-list	En lista eller tabell med delfrågor	Samlingar, Flera korta textsvar, Flera numeriska inmatningar
.answer-item	Ett svarsalternativ eller en inmatning	Nästan alla frågetyper
.noanswer-item	Alternativet "Inget svar"	Samlingar, 5-punktsval, Lista med kommentarer
.question-item	En delfråga som också är ett svar	Flervalsfråga, Flera korta textsvar, Flera numeriska inmatningar
.radio-list	En lista eller rad med radioknappar	Lista (radio), 5-punktsval, Lista med kommentarer, rader i radiosamlingar
.radio-array	En tabell med radioknappar	Samling, Samling (5-punktsval), Samling (10-punktsval), Samling (öka, samma, minska), Samling (Ja/Osäker/Nej)
.radio-item	En radioknapp med sin etikett	Lista (radio), 5-punktsval, Lista med kommentarer, radiosamlingar
.checkbox-list	En lista med kryssrutor	Flervalsfråga, Flervalsfråga med kommentarer
.checkbox-array	En tabell med kryssrutor	Samling (tal/siffor) med layout med kryssrutor
.checkbox-item	En kryssruta med sin etikett	Flervalsfråga, Flervalsfråga med kommentarer, Samling (tal/siffor) med layout med kryssrutor
.checkbox-text-item	En kryssruta med ett textfält	Flervalsfråga med kommentarer
.comment-item	Kommentarsfältet bredvid en kryssruta	Flervalsfråga med kommentarer
.text-list	En lista med textinmatningar	Flera korta textsvar, Flera numeriska inmatningar
.text-item	En textinmatning	Kort, lång och mycket lång fritext, Flera korta textsvar, Samling (text)
.number-list, .numeric-item	Numeriska inmatningar	Flera numeriska inmatningar, Numerisk inmatning
.number-array	En tabell med numeriska inmatningar	Samling (tal/siffor), Samling (text)
.text-array	En tabell med textinmatningar	Samling (text), Samling (tal/siffor)
.dropdown-array, .dropdown-list, .dropdown-item	Tabeller, rader och celler med rullgardinsmenyer	Samling (tal/siffor), Samling med dubbla skalor med rullgardinsmenyer
.date-item	Datuminmatningen	Datum/tid
.upload-item	Området för filuppladdning	Filuppladdning
.answertext	Delfrågetexten i en samlingsrad	Samlingar
.col-answers	Kolumnen med delfrågetexter	Samlingar
.ls-heading	Rubrikraden med svarsalternativen	Samlingar
.ls-odd, .ls-even	Varannan rad	Samlingar
.ls-label-xs-visibility	En etikett som bara syns på små skärmar och för skärmläsare	Celler i samlingar
.ls-input-group-extra	Prefixet eller suffixet för en inmatning	Kort fritext, Numerisk inmatning, Flera korta textsvar, Flera numeriska inmatningar
.ls-js-hidden	Dold när JavaScript är aktivt	Samling med dubbla skalor, Lista (radio)
.ls-no-js-hidden	Dold när JavaScript inte är aktivt	Rangordning
.ls-js-hidden-sr	Dold när JavaScript är aktivt, men läses fortfarande upp av skärmläsare	Rangordning

I Lista (radio) har alternativet "Inget svar" klassen no-anwser-item (med denna stavning) i stället för noanswer-item.

Så här ser till exempel HTML-koden för svaren i en Lista (radio)-fråga ut:

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

Klasser för validering och hjälptexter

Valideringshjälp (till exempel "Välj ett av följande svar" eller "Ange ett tal mellan 1 och 10") har alltid klassen ls-em-tip. Medan deltagaren svarar lägger LimeSurvey till ls-em-success när hjälpens regel är uppfylld och ls-em-error när den inte är det, så att du kan formatera de två tillstånden olika. Hjälptexter som döljs med frågans inställning Göm hjälp får klassen hide-tip.

Varje hjälptext har också en klass för sin typ:

Klass	Hjälptext
.em_default	Frågetypens standardhjälp (till exempel "Välj ett av följande svar")
.em_num_answers	Minsta eller största antal svar
.em_value_range	Minsta eller största värde
.em_sum_range	Minsta eller största summa av värdena
.em_sum_equals	Värdena måste summera till en given total
.em_value_integer	Endast heltal är tillåtna
.em_numbers_only	Endast tal är tillåtna
.em_other_numbers_only	Endast tal är tillåtna i fältet "Annat"
.em_other_comment_mandatory	Alternativet "Annat" är valt men dess textfält är tomt
.em_regex_validation	Svaret måste matcha valideringsmönstret
.em_q_fn_validation	Valideringsuttryck för frågan
.em_sq_fn_validation	Valideringsuttryck för delfrågor

Språk som skrivs från höger till vänster (RTL)

För språk som skrivs från höger till vänster har elementet <html> klassen dir-rtl, och kärnmallarna laddar en RTL-version av sin huvudsakliga CSS-fil. Använd .dir-rtl i din CSS för regler som bara gäller språk som skrivs från höger till vänster.

Tips och tricks

De här receptet läggs i custom.css (eller i en Twig-fil, där det anges) i en mall som du har utökat från en kärnmall. Byt ut #c0392b mot din egen färg i exemplen.

Ändra färgen på radioknappar och kryssrutor

Om du vill använda någon av färgerna som följer med Fruity TwentyThree väljer du en Temafärg i mallalternativen. I mallalternativen kan du också välja en annan Check-ikon.

För alla andra färger lägger du till CSS i custom.css. Kärnmallarna ritar sina egna radioknappar och kryssrutor i stället för webbläsarens standardkontroller, så att ändra färgen innebär att ändra dessa ritade element.

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 och 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;
}

Behåll tillräcklig kontrast mellan färgen och bakgrunden, så att deltagare med nedsatt syn fortfarande kan se vilka svar som är valda.

Gör radioknappar och kryssrutor större

Större radioknappar och kryssrutor är lättare att trycka på i mobiler och surfplattor. Det fungerar i alla kärnmallar:

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

I Fruity TwentyThree lägger du också till lite utrymme mellan radioknapparna och svarstexten:

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

Värden upp till cirka 1,4 fungerar utan ytterligare ändringar. Med större värden börjar kontrollerna överlappa svarstexten och kanterna på samlingsrader på små skärmar, så du behöver också lägga till mer utrymme runt dem.

Ändra färgen på förloppsindikatorn

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

Visa innehåll på bara ett språk

Elementet <body> har en klass med det aktuella språket, till exempel lang-en eller lang-fr. Du kan använda den för att visa olika innehåll per språk, till exempel en hjälptext i sidfoten. Lägg till texten för varje språk i en Twig-fil i din mall, till exempel 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>

Dölj sedan texten för de andra språken i custom.css:

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

Använd olika logotyper för olika enkäter

Du behöver ingen separat mall för varje logotyp. Mallalternativ kan ställas in för en enskild enkät: öppna enkäten, klicka på Mallalternativ i menyn Enkätinställningar och välj en annan Logo-fil. Se Mallalternativ.

Visa en egen favicon

En favicon är den lilla ikonen som visas i webbläsarfliken och i bokmärken. Kärnmallarna visar filen files/favicon.ico i mallen. Om du vill använda din egen ikon namnger du den favicon.ico och laddar upp den i panelen Andra filer i din utökade mall. Den ersätter ikonen från föräldramallen.

Centrera logotypen i Fruity TwentyThree

Aktivera Logotyp i mallalternativen och lägg sedan till detta i custom.css:

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

Lägg till din egen logotyp i den offentliga enkätlistan

Den offentliga enkätlistan visar LimeSurvey-logotypen som standard. Så här visar du din egen logotyp:

1. Utöka Fruity TwentyThree och öppna din mall i mallredigeraren.
2. Ladda upp din logotyp i panelen Andra filer.
3. Välj skärmen Enkätlista och öppna layout_survey_list.twig.
4. Hitta den <div> som innehåller {{ include('./ls_logo_svg.twig') }}. Ersätt hela denna <div>, inklusive include-raden, med koden som visas under dessa steg.
5. Klicka på Kopiera till lokal mall och spara ändringarna.
6. Gå till Konfiguration > Globala inställningar > Allmän och välj din mall som Mall för offentlig enkätlista och felsidor.

Använd namnet på din uppladdade fil och din organisations namn som alternativ text:

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

Lägg till en avgränsande linje i samlingar med dubbla skalor

Så här ritar du en lodrät linje mellan de två skalorna i en fråga av typen Samling med dubbla skalor:

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

JavaScript i frågor

Om du vill köra JavaScript på alla sidor i dina enkäter lägger du det i custom.js i din mall (se ovan).

Du kan också lägga till ett skript i texten för en enskild fråga eller grupp. LimeSurvey tar bort skript från dessa texter om inte XSS-filtret är avstängt för din användare. Filtret gäller aldrig för superadministratörer. För andra användare måste Filtrera HTML för XSS vara avstängt under Konfiguration > Globala inställningar > Säkerhet. Gör detta endast om du litar på alla som kan redigera enkäter. För detaljer och exempel, se Workarounds: Manipulating a survey at runtime using Javascript.