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

Inledning

Observera: i tidigare versioner av LimeSurvey kallades filerna som definierar hur enkäten ser ut, hur den presenteras i fråga om färger, typsnitt, layout och (en del) beteende för en "mall". Av nya skäl kallas detta nu ett "tema", medan mall är reserverat för exempelenkäter.

På den här sidan lär du dig hur du:

Använder det nya temasystemet i LimeSurvey 3.0.
Använder arv för att hantera dina egna teman.
Lägger till en bild i ditt tema
Hanterar mallalternativ för dina enkäter och enkätgrupper

LimeSurvey 3 introducerar ett helt nytt temamotorsystem, baserat på Twig 1.29 och Bootstrap, som möjliggör temaarv och temaalternativ. Det tar helt bort det gamla systemet med ersättningsnyckelord. Nu kan 100 % av frontend-HTML anpassas. I det gamla temasystemet fanns till exempel nyckelordet {ASSESSMENTS} som ersattes av HTML-koden för utvärderingen vid körning. En temadesigner hade inget sätt att anpassa denna HTML (annat än med JavaScript). Nu finns en fil som heter assessments.twig och som innehåller logiken (skriven i Twig) för att generera denna HTML. På dessa sidor ger vi dig några förklaringar om hur du använder den nya temamotorn.

Vi går inte in på hur Twig fungerar här. Det är ett slags mycket förenklad PHP som erbjuder en hög säkerhetsnivå tack vare "sandbox"-systemet (vi går igenom det mer i detalj i avsnittet om temamotorns kärnkod). Om du redan kan PHP blir det extremt lätt för dig att lära dig. Kan du inte PHP bör det ändå vara ganska enkelt att lära sig. Ta en titt på dokumentationen för Twig 1.X: https://twig.symfony.com/

Redigera via administrationsgränssnittet

Temalista

På administrationens startsida finns nu en ruta för att komma åt temalistan:

Listan är indelad i 5 kolumner:

en förhandsvisning av temat: det är bara en bildfil som heter "preview.png" i temats rotkatalog
temats "titel" enligt manifestet (config.xml i temats rotkatalog)
temats beskrivning: en sträng som anges i manifestet
typ av tema: Kärnmall (medföljer LimeSurvey), Användarmall (tillagd i uppladdningskatalogen), XML-tema (inte inläst i databasen)
Utöka: om temat utökar ett annat tema anges dess namn här
Några åtgärdsknappar:
- Installera: läser in ett temas manifest för att lägga till det i databasen och göra det valbart på enkätnivå
- Avinstallera: raderar ett temas konfigurationsposter i databasen
- Tema redigerare: tar dig till temaredigeraren
- Mallalternativ: tar dig till den globala konfigurationen av mallalternativ

Tema redigerare

Den här dokumentationen förutsätter att du redan vet hur du använder temaredigeraren i den tidigare versionen av LS.

Temaredigeraren har hållits så lik den ursprungliga som möjligt. När du öppnar en kärnmall kan du alltså inte redigera den. Men istället för en "kopiera"-knapp har du nu en knapp "Utöka".

Nu utökar du ett tema — *Nu **utökar** du ett tema*

En snabb översikt över konceptet temaarv

I LS3 kan ett tema nu ärva från ett annat tema, det kan "utöka" ett annat tema. Det innebär att temakatalogen blir i stort sett tom och bara innehåller de filer (vyer, stilmallar, skript, resurser osv.) som skiljer sig från originalen. På så sätt blir det enkelt för dig att skapa en hel flotta av teman för dina olika användare utan att behöva underhålla många olika teman. Till exempel: du kan ha ditt eget hemmagjorda tema och sedan en version för ett företag (med dess logotyp, dess stil, kanske en länk till dess webbplats i sidfoten osv.), en annan version för ett annat företag osv. Om du sedan uppdaterar CSS:en eller den globala layouten i ditt anpassade tema uppdateras alla teman som ärver från det automatiskt. Observera att arvet är rekursivt: ett tema kan utöka ett tema som utökar ett annat osv.

Det innebär också att om du utökar en av LimeSurveys kärnmallar får du fortfarande nytta av dess uppdateringar.

Nyheter i användargränssnittet

För att utöka temat Monochrome i LimeSurvey går du till temalistan och klickar på knappen “Tema redigerare” för temat Monochrome. Klicka sedan på “Utöka” och bekräfta det nya namnet “extends_monochrome”.

Om du nu går till uppladdningskatalogen (med din fil-/ftp-klient) ser du att en ny katalog har skapats: upload/themes/extends_monochrome Den innehåller en XML-fil och kataloger, men de flesta kataloger är tomma. Den har varken vyer, CSS eller JS. Du kan ändå välja detta tema i en enkät som vilket annat tema som helst, och det ser exakt ut som temat Monochrome.

*Tematrädet (katalog och filer) direkt efter att det skapats. Det är i stort sett tomt*

Resurserna (jpg, png osv.) från det ursprungliga temat kopieras när du utökar ett tema. Det beror på att om du kopierar en CSS-fil från det ursprungliga temat lokalt, och den refererar till dessa filer (till exempel i en background-image-sats), måste den hitta bilderna i det aktuella temats sökväg.

Temaredigeraren för temat extends_monochrome ser ut så här:

Det är ingen stor skillnad mot den gamla temaredigeraren. Här är de viktigaste skillnaderna:

Nyckelordet ärvd i fillistan. Det betyder att filen inte finns i temakatalogen och att filen från det ursprungliga temat används.

Huvudredigeraren ( ACE-redigeraren ) visar innehållet i den valda filen. Filerna innehåller inte bara HTML, CSS eller JS, utan även Twig-satser. Med dessa Twig-satser kan vi lägga viss logik i temavyer som tidigare låg djupt inne i kärnan och som nu kan anpassas.

Det är därför fler skärmtyper nu finns tillgängliga i rullgardinsmenyn i toppmenyn. Du ser sidor som ‘Enkätlista’, ‘Ladda’, ‘Spara’, ‘Fel’, ‘Registrering’, ‘Utvärderingar’ och ‘Skriv ut svar’ som inte fanns tidigare, eller som du inte riktigt kunde anpassa tidigare.

Länken ‘tips’ längst ned i fillistan visar hur du lägger till en bild i din HTML på Twig-sätt

Knappen ‘Spara ändringarna’ blir en knapp Kopiera till lokal mall och spara ändringarna

Snabbt exempel: lägga till en bild

Knappen Kopiera till lokal mall och spara ändringarna gör precis vad den säger: om du redigerar något i filen och sedan klickar på knappen kopieras filen till det tema du redigerar och dina ändringar sparas.
Till exempel: klicka på filen layout_global.twig, lägg sedan till texten “TEST” precis före blocket content ( {% block content %}) och klicka på knappen. Du ser att filens etikett ändras från “ärvd” till “lokal” och att knappen nu är en vanlig knapp Spara ändringarna.

*direkt efter att du klickat på knappen*

Om du öppnar en filutforskare och går till katalogen upload/themes/extends_monochrome/views/ ser du att den bara innehåller en fil, filen layout_global.twig, och att strängen “TEST” finns där.

Istället för att lägga till en slumpmässig text ska vi nu lägga till en bild. Om du klickar på länken tips får du följande:
Att använda en bild i .pstpl-filen: {{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
Om du har läst Twig-dokumentationen (och det bör du ha gjort vid det här laget) vet du att {{ function( ) }} skriver ut resultatet av en funktion på skärmen. Här är funktionen image( ).

Om du är nyfiken på vad den gör hittar du den i koden här (version RC3): funktionen image() i RC3

Om du inte förstår koden: oroa dig inte, du behöver inte veta hur den fungerar, utan varför och hur du använder den.

Du bör använda funktionen image() av två skäl:

Funktionen image söker igenom temat för att hitta bilden. Om temat du arbetar med utökar ett annat tema, och du kopierar filen lokalt dit du infogat bilden, men bilden inte kopieras till det lokala temat, söker den igenom temats arvsträd för att hitta var bilden finns.
Den använder asset manager, vilket förbättrar ditt temas prestanda. Se dokumentationen för Yii Asset Manager för mer information: http://www.yiiframework.com/wiki/148/understanding-assets/

Så här lägger du till en bild i ditt tema:

ladda bara upp den som vanligt med filuppladdaren till höger och lägg sedan till den där du vill ha den i valfri twig-fil:

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

Om du vill lägga till en alternativ text för din bild (för skärmläsare och HTML-validering), lägg till:

Om du vill lägga till ett class-attribut och ett id:

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

Några saker på vår att-göra-lista

Ge användare möjlighet att ladda upp en egen förhandsvisningsfil direkt från redigeraren
Lägg till en knapp för att radera den lokala filen och återgå till det ärvda
Kopiera bara bilder som används i CSS-filerna (genom att lista dem i manifestet som filer att kopiera)
Visa vilket tema det aktuella temat utökar (om något)

Mallalternativ

En annan nyhet i LS3 är sidan för mallalternativ. Som vi ser senare kan temaskapare skapa egna alternativ och till och med en egen alternativsida i administrationen. Här tittar vi snabbt på hur alternativsidan för kärnmallarna fungerar. För att komma åt mallalternativen på global nivå: klicka på “Mallalternativ” i temalistan

Avancerade alternativ

När du öppnar fliken Mallalternativ kan du välja att redigera antingen de grundläggande alternativen eller de avancerade alternativen. ”Avancerade alternativ” är bara ett rått formulär som ger dig åtkomst till de viktigaste konfigurationsfälten för temat i databasen. För att förstå hur det fungerar bör du också läsa om XML-filen och om hur man skapar ett tema från grunden. Det är alltså ganska komplext och avsett för avancerade användare.

Om du vill redigera avancerade inställningar klickar du på fliken Avancerade alternativ

Filer CSS: De CSS-filer som ska läggas till i mallen;
Filer JS: De JS-filer som ska läggas till i mallen;
Filer Print CSS: De CSS-filer som ska laddas när en mall skrivs ut;
Alternativ: Det här fältet innehåller de alternativ (och deras värden) som ska skickas vidare till mallvyn;
CssFramework Name: Namnet på det CSS-ramverk som ska laddas. För närvarande finns bara Bootstrap eller inget;
Cssframework Css: I det här fältet kan du ersätta kärnfilen bootstrap.css med en egen anpassad version;
Cssframework Js: Här kan du ersätta kärnfilen boostrap.js med en egen anpassad version;
Paket att ladda: Med den här inställningen kan du ladda vissa av LimeSurveys kärnpaket för resurser.

Du ser ett uppladdningsfält högst upp, där du kan ladda upp en fil till temats filkatalog. Dessa parametrar kan användas för att ändra hela temats utseende.

Varning! : Ändra inte värdena om du inte vet vad du gör!

Grundläggande alternativ

Sidan Grundläggande alternativ kommer från själva temat. Den skapas med en twig-fil och lite JavaScript i temats katalog /options: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Trasig länk)

Den här sidan kan se helt olika ut från tema till tema, och temaleverantörer uppmuntras starkt att skapa sin egen look & feel.

Sidan med grundläggande alternativ fyller helt enkelt i fälten i det avancerade formuläret. Du kan se det genom att slå på eller av en inställning på den enkla sidan och sedan se hur motsvarande fält i det avancerade formuläret ändras. Om du till exempel i standardmallens grundläggande alternativ ändrar Bootswatch-temat till ”Darkly” och sedan klickar på fliken för avancerade alternativ (även utan att spara) ser du att fältet ”Cssframework Css” har ändrats från

{"replace": [["css/bootstrap.css","css/flatly.css"]]}
till
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
Här är de olika grundläggande alternativen för kärnmallarna:

Ajax mode: Avgör om nästa sida ska laddas via ajax (snabbare) eller via sidomladdning (bättre för felsökning)
Bakgrundsbild: om inställd på Ja laddas bilden pattern.png (kommer att ersättas av en filväljare i Master)
Box container: om inställd på Nej placeras inte frågorna i en ruta (så att du kan använda stora matriser som är bredare än skärmen)
Brandlogo: om inställd på nej visas enkätens namn i översta fältet, annars kan du välja en av bilderna i filkatalogen som logotyp.
Animera body: om inställd på ja kan du välja en av animationerna som ska tillämpas när enkätens body laddas
Animera fråga: samma sak för frågor
Animate alerts: samma sak för varningar
Bootstrap theme: här kan du välja ett Bootstrap-tema att ladda. De kommer från Bootswatch https://bootswatch.com/3/

Biblioteket som används för animationer är animate.css: https://daneden.github.io/animate.css/ En mallleverantör kan naturligtvis lägga till ett eget animationsbibliotek eller inget animationsbibliotek alls.

Monochrome-mallarna använder samma bootstrap-färgtema som administratörsgränssnittet. De använder inte systemet för ersättning av CSS-ramverk, utan lägger helt enkelt till en CSS-fil. Det visar alltså ett annat sätt för mallleverantörer att hantera anpassade mallar.

Arvssystem

I föregående avsnitt såg vi att en mall kan utöka en annan mall. En mallkonfiguration kan också ärva från en annan mallkonfiguration. Det betyder att du för en given mall kan ha en konfiguration på

global nivå (den vi just har sett, som nås från mallistan)
enkätgruppsnivå
och en sista på enkätnivå.

Varje parameter på en viss nivå kan ärva från nivån ovanför: arv från enkätgruppen. Låt oss först titta på enkätgruppsnivån.

På enkätgruppsnivå

En av de andra stora nyheterna i LS3 är faktiskt enkätgruppssystemet. Du kan nu skapa olika grupper för att organisera dina enkäter. För att komma åt det går du till enkätlistan och klickar sedan på fliken Enkätgrupper:

I den här listan finns två åtgärdsknappar. Om gruppen är tom kan du radera den. Annars kan du alltid redigera den. Genom att klicka på redigeringsknappen kommer du till konfigurationssidan för enkätgruppen:

Den tredje fliken på den här sidan heter ”Mallalternativ för den här enkätgruppen”. Om du klickar på den ser du samma lista över mallar som i mallistan, förutom att här är bara alternativknappen synlig (temaredigeraren nås bara från huvudlistan).
Om du nu klickar på alternativ för standardmallen ser du detta:

Ärv allt betyder att hela konfigurationen ärvs från den globala konfigurationsnivån.
Om du går till sidan Avancerade alternativ ser du att alla fält är inställda på att ärva.
Om du klickar på ”Nej” för ”Ärv allt” bland de grundläggande alternativen ser du återigen en sida som är mycket lik den globala alternativsidan. Den enda skillnaden är att du för varje fält kan välja ja, nej eller ärv, och varje rullgardinsmeny har ett värde ärv'.

En enkätgrupp kan vara underordnad en annan grupp. I så fall ärver den från sin överordnade grupp.

På enkätnivå

När du redigerar en enkät ser du i menyn till vänster ett nytt alternativ, ”Mallalternativ”. Det leder dig till alternativsidan för den mall som är vald för den aktuella enkäten. Du hittar samma arvssystem som i enkätgruppen, men den här gången betyder ärv att inställningen ärvs från enkätens enkätgrupp.

Användningsexempel

Låt oss säga att du använder en enda mall för olika företag (A och B). Du ställer in dina favoritalternativ på global nivå (t.ex. ajax på, animera body med en slide in, varningar med en pulse). Sedan skapar du en enkätgrupp för varje företag: en enkätgrupp för företag A som innehåller alla enkäter för det företaget, och en för företag B som innehåller alla enkäter för företag B. På den här nivån ställer du bara in logotyp och bakgrund och låter övriga alternativ ärvas. Alla enkäter i grupp A använder då företag A:s logotyp, och alla enkäter i grupp B använder företag B:s logotyp. För en av företag A:s enkäter kan du använda en annan bakgrund som passar enkätens ämne: du ändrar bara bakgrunden i alternativen på enkätnivå. Om någon på företag B säger att den pulserande varningen är för påträngande och hellre vill ha något mjukare, som en fade in, ändrar du bara varningsanimationen på nivån för enkätgrupp B, och alla enkäter i den gruppen använder då den animationen. Om företag A byter logotyp kan du ändra den på nivån för enkätgrupp A, och alla enkäter i den gruppen använder den nya logotypen.

Dessa exempel bygger på de nuvarande alternativen i kärnmallen. Men om du är mallleverantör, eller om du kan skripta lite med twig, kan du naturligtvis lägga till egna alternativ. Du kan till exempel lägga till ett alternativ ”info footer” där du kan lägga in uppgifter som företagets webbplats eller ett telefonnummer för hjälp. Om företag A har flera avdelningar med olika telefonnummer kan du sedan skapa en undergrupp för varje avdelning i enkätgrupp A. Varje undergrupp får då sitt eget telefonnummer i dessa alternativ.

Vanliga frågor om anpassning av mallar

Här hittar du svar på frågor som har ställts i forumet och som kan hjälpa dig att anpassa din mall.

Anpassa CSS/JS: hantera asset manager (”varför tillämpas inte mina ändringar?”)

Om du försöker uppdatera CSS/JS i en mall genom att redigera koden direkt i din favoritredigerare kan du bli förvånad över att ändringarna inte tillämpas.

Sedan 2.50 använder LS Yii:s asset manager: Yii-dokumentation om assets

Den flyttar en mall CSS/JS-filer till en undermapp i tmp/ med ett slumpmässigt namn (t.ex. ”tmp/1ef64ml/”). Om du ändrar en css/js-fil och meddelar asset manager kopieras filerna till en ny undermapp med ett nytt namn, så att användarens webbläsarcache uppdateras och de ser den nya css/js. Annars skulle de behöva rensa webbläsarens cache.

Här är CSS-länkarna i rubriken när asset manager är på:

Som du ser hänvisar de alla till undermapparna i tmp/.

Här är CSS-länkarna i rubriken när asset manager är av:

Som du ser pekar de på mallens riktiga filer.

Om asset manager inte vet att du har ändrat filen förblir naturligtvis den gamla filen i den gamla tmp/-katalogen oförändrad, och dina ändringar tillämpas aldrig.

När du redigerar CSS/JS i en mall har du alltså flera möjligheter:

Du kan använda LS Tema redigerare: den hanterar asset manager så att du inte behöver bekymra dig om något
Du kan slå på felsökningsläget: då stängs asset manager av så att de riktiga css/js-filerna i dina mallar används (men då måste du uppdatera webbläsarens cache vid varje laddning)
Du kan uppdatera asset-cachen: via Globala inställningar -> Allmänt -> Rensa asset-cache

Att använda temaredigeraren för att redigera den anpassade CSS:en är den absolut bästa lösningen.

Att använda temaredigeraren hjälper dig att förstå arkitekturen i den nya mallmotorn. Om du anpassar fruity bör du dessutom vara försiktig med CSS-specificitet: de flesta definitionerna använder selektorn ".fruity" (en av klasserna på body-elementet)

Lägga till egna typsnitt i min mall

Det enkla sättet: använda Google Font CDN

Bootswatch-enkätmallen använder Google Font CDN. Låt oss se hur det fungerar: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");

Därefter används teckensnittet Lato via CSS-regler: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72

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

Du kan använda vilket Google-teckensnitt som helst på det sättet i din egen mall. Du bör naturligtvis ta bort teckensnittsväljaren från alternativen i din mall. Radera dessa rader i options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

Använda lokalt teckensnitt

Naturligtvis kan du också ladda ner teckensnittsfilerna och använda dem från den lokala servern i stället för från Googles CDN (bättre för integriteten). Här är ett exempel på hur du gör, vår lokala version av teckensnittet Noto: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css

@font-face {
  font-family: 'Noto Sans';
  font-weight: 300;
  font-style: normal;
  src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...

Du kan använda en mycket liknande definition i CSS-filen för din mall och sedan kopiera filen NotoSans-Regular.ttf till mappen css/font-src/ i din mall.

Tillämpa sedan teckensnittet på din body (eller något annat element) som ovan och ta bort standardteckensnittsväljaren bland alternativen.

Skapa din egen teckensnittsväljare bland alternativen

För närvarande kan du inte enkelt använda kärnans teckensnittsväljare för att lägga till ditt eget teckensnitt bland alternativen. Först måste slutanvändare få möjlighet att ladda upp egna paket (se nästa avsnitt: A look into the Fruity Font Selector )
Så här går du tillväga:

Lägg till två teckensnitt (my_custom_font och my_custom_other_font) i din mall, med hjälp av CDN eller lokal server
Lägg sedan till två nya klasser i din CSS-fil:

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

Lägg till ett teckensnittsalternativ i XML-filen för din mall (standard blir my_custom_font) :

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

Lägg till din teckensnittsväljare i option.twig genom att lägga till dessa rader (ännu inte testat, så klaga i forumet om det inte fungerar):

            
            <div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'>
                <hr/>
            </div>
            <div class='row action_hide_on_inherit'>
                <div class='col-sm-12'>
                    <div class='panel panel-default'>
                        <div class='panel-heading'>{{ "My custom fonts" | t }}</div>
                        <div class='panel-body'>
                            <div class='form-group row'>
                                <label for='simple_edit_font' class='control-label'>{{ "Select font:" | t }}</label>
                                <div class='col-sm-12'>
                                    <select class='form-control selector_option_value_field' id='simple_edit_font' name='font'>
                                    {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %} //Shouldn't this be "theme" in stead of "template"?
                                        {% set fontOptions = fontOptions ~ '<option value = "inherit" > Inherit</option>' %}
                                    {% endif %}
                                   <optgroup  label="{{ "My Custom fonts" | t }}">
                                   <option class="font-my_custom_font"     value="custom_font"   data-font-package=""  >Custom</option>
                                  <option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package=""  >Other</option>
                                  </optgroup>
                                   
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Nu bör dina användare kunna välja mellan dessa två teckensnitt.

A look into the Fruity Font Selector

I framtiden kommer slutanvändare att kunna ladda upp egna resurspaket, inklusive teckensnittspaket. Det kommer att göra det mycket enkelt att anpassa teckensnitt.
För att förstå Yii-paket:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

LimeSurvey-paket definieras i olika filer. Teckensnittspaket definieras här: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Teckensnittspaketet Noto definieras till exempel här: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53

    'font-noto' => array(
        'devBaseUrl' => 'assets/fonts/',
        'basePath' => 'fonts',
        'css' => array(
            'noto.css',
        ),
    ),

Filen noto.css som paketet innehåller finns här: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Lägg märke till definitionen av CSS-klassen ".font-noto" i slutet av filen:

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

I mallen Vanilla används sedan teckensnittet Noto genom att lägga till paketet noto och sätta teckensnittsalternativet till noto:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79

        <packages>
             ....
            <add>font-noto</add>
        </packages>

https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58

    <options>
        ....
        <font>noto</font>
    </options>

Sedan definieras body-klassen för teckensnittet utifrån detta värde: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76

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

XML-filen innehåller naturligtvis bara standardvärdena för konfigurationen av din mall. Men dessa värden definieras och läses i själva verket i databasen (tabellen "template_configuration" (Fråga: "template_" eller "theme_"?) som json-strängar. Filen option.js använder bara värdet från teckensnittsväljaren bland de enkla alternativen för att ändra värdet i formuläret på fliken för avancerade alternativ: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

När funktionen "ladda upp resurspaket" blir tillgänglig blir det alltså enkelt att lägga till ett skript som söker igenom alla befintliga teckensnittspaket och lägger till dem i väljaren.

Lägga till mallalternativ för att styra placering och visning av enkätelement

Den här handledningen visar hur du lägger till alternativ i en utökad mall för att visa enkätelement på olika platser. Här skapar vi mallalternativ för att visa enkätens titel på två olika platser.

För enkelhetens skull baserar vi handledningen på en utökning av mallen "bootswatch" i LimeSurvey-version 3.4.3.

Skapa en egen mall

Utöka mallen "bootswatch" enligt beskrivningen ovan.
Kopiera custom.css till den lokala mallen enligt beskrivningen ovan.

Skapa nya mallalternativ

Kopiera innehållet i /themes/survey/bootswatch/options/ till /upload/themes/survey/yourThemeName/options/.

Öppna /upload/themes/survey/yourThemeName/options/options.twig i en editor och hitta "{# Bootstrap Bootswatch theme #}". Lägg till detta direkt före dess överordnade <div class='row'>-element:

		{# Custom survey name in navbar #}
		<div class='row'>
			<div class='col-sm-12 col-md-6'>

				<div class='form-group row'>
					<label for='simple_edit_options_surveyname1' class='control-label'>Survey name in navbar</label>
					<div class='col-sm-12'>
						<div class="btn-group" data-toggle="buttons">
							<label class="btn btn-default">
								<input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
								Yes
							</label>
							<label class="btn btn-default">
								<input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
								No
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div>

		{# Custom survey name below progress bar #}
		<div class='row'>
			<div class='col-sm-12 col-md-6'>

				<div class='form-group row'>
					<label for='simple_edit_options_surveyname2' class='control-label'>Survey name below progress bar</label>
					<div class='col-sm-12'>
						<div class="btn-group" data-toggle="buttons">
							<label class="btn btn-default">
								<input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
								Yes
							</label>
							<label class="btn btn-default">
								<input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
								No
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div>

Öppna /upload/themes/survey/yourThemeName/config.xml och lägg till två poster i blocket "options" så att det ser ut så här:

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

Detta bör ge dig två nya alternativ på skärmen Mallalternativ, så här:

Ändrad vy för enkätens namn i navigeringsfältet

Skapa en ny katalog /upload/themes/survey/yourThemeName/views/subviews/header/.
Kopiera /themes/survey/vanilla/views/subviews/header/nav_bar.twig till den nya katalogen.

Öppna /themes/survey/vanilla/views/subviews/header/nav_bar.twig och leta upp "{# Logo option #}". Ändra IF-satsen för logotyp/enkätnamn under den så att den ser ut så här:

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

Lägg till något liknande detta i /upload/themes/survey/yourThemeName/css/custom.css:
```
.navbar-brand {
    line-height: 60px;
    font-size: 32px;
}
```
Ställ in temaalternativet "Survey name in navbar" på "Ja"
Du bör se detta:

Ändrad vy för enkätens namn under förloppsindikatorn

Skapa en ny katalog /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews.
Kopiera /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig till den nya katalogen.

Öppna /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig och lägg till ett <h1>-element för enkätens namn. Det ska se ut så här:

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

Lägg till något liknande detta i /upload/themes/survey/yourThemeName/css/custom.css:

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

Ställ in temaalternativet "Survey name below progress bar" på "Ja"
Du bör se detta:

Nedladdningar

Exempel på utökat tema: Media:Test_survey_names.zip

Skapa ett tema från grunden

Dokumentation kommer snart.

Tills vidare följer några tips.

Temats struktur

Filer och kataloger

När du skapar ett tema från grunden behöver du inte följa fil-/katalogstrukturen eller CSS/JS från Vanilla. Den obligatoriska CSS/JS-koden läggs till av kärnan (du kan fortfarande ta bort den om det behövs).

De enda filer som ditt tema måste ha är layoutfilerna:

layout_global.twig : renderar sidorna när enkäten besvaras
layout_survey_list.twig : renderar enkätlistan (om detta tema är inställt som standard)
layout_errors.twig : används för att rendera fel som hindrar enkäten från att visas (fel enkät-ID, tom grupp i förhandsvisning av grupp osv.)
layout_user_forms.twig: renderar användarformulär som till exempel token (enkätdeltagare) och registrering.
layout_print.twig : används för att skriva ut enkäten till PDF
layout_printanswers.twig: skriver ut svaren

Innehållet i filerna, och vilka filer de inkluderar eller inte, bestämmer du helt själv. Alla andra filer och kataloger som finns i Vanilla är helt valfria, organisera din kod som du vill.

Om du läser koden för frontend-renderingen ser du att dessa filnamn förekommer direkt i den. Därför är de obligatoriska.

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

Innehåll

I Vanillas layout_global.twig ser du att vi använder en variabel som heter "include_content" för att avgöra vad som ska visas https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/layout_global.twig#L114-L115

                    {% set sViewContent =  './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
                    {% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %}

aSurveyInfo.include_content talar om vilken åtgärd som pågår just nu: visas frågor? visas resultatet av att skicka? visas rensa alla? osv. Som du ser skapar vi i Vanilla en fil att inkludera för varje åtgärd. Om du vill veta vilka åtgärder som finns kan du alltså titta i Vanillas katalog views/subviews/content och ta bort filändelsen "twig": https://github.com/LimeSurvey/LimeSurvey/tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content

clearall.twig
firstpage.twig
load.twig
mainrow.twig
main.twig
optin.twig
optout.twig
outerframe.twig
printanswers.twig
quotas.twig
register.twig
save.twig
submit_preview.twig
submit.twig
userforms.twig

Om du redan har skapat ett tema för 2.x-versioner av LimeSurvey ser du att de flesta av dem motsvarar de gamla pstpl-filerna i LimeSurvey 2.x. Återigen finns det inget krav på att du i ditt tema skapar dessa filer, med dessa namn, i denna katalog. Du kan till exempel bara lägga till en stor switch i layout_global.twig med önskad HTML för varje åtgärd.

Manifestet config.xml

Temats manifest innehåller den viktigaste informationen om ditt tema. När du installerar ett tema läses manifestets innehåll in i databasen, i två olika tabeller: template och template_configuration. Varje gång du ändrar ett temas manifest måste du därför avinstallera och installera om det (eller bara återställa det). Eftersom detta är besvärligt när du utvecklar ett tema kan du tvinga fram direkt användning av XML-filen i stället för databasposterna. Gör det genom att i config.php aktivera felsökningsläge och sätta 'force_xmlsettings_for_survey_rendering' till true.

Metadatasektionen

Inget komplicerat: bara den viktigaste informationen om ditt tema. Den läggs in i tabellen templates_configuration

    <metadata>
        <name>the_name_of_your_theme</name>
        <title>The Title of your theme</title>
        <creationDate>16/10/2017</creationDate>
        <author>Your Name</author>
        <authorEmail>your@email.org</authorEmail>
        <authorUrl>http://www.yourwebsite.org</authorUrl>
        <copyright>Your Copyright </copyright>
        <license>Licence of your theme</license>
        <version>version of your theme</version>
        <apiVersion>3</apiVersion>
        <description>Description of your theme</description>
        <extends>parent_theme</extends>
    </metadata>

Några kommentarer:

name: används som nyckel i databasen. Den måste därför vara unik och ska inte innehålla specialtecken (inga mellanslag). Observera att versaler och gemener inte beaktas
Title: används för att visa temats namn i de olika listorna. Den kan innehålla specialtecken
description: används i huvudlistan över enkättema. Den kan innehålla specialtecken och till och med HTML-kod genom att använda
extends: valfri, anger de överordnade temana. Om en fil (twig/js/css/jpg osv.) inte finns i detta tema letar systemet efter den i det överordnade temat

Om du har utökat ett av de tre kärntemana (Vanilla, Bootswatch, Fruity) kan du ändra värdet för "extends" från ett överordnat tema till ett annat. Du måste givetvis återställa temat.

Filsektionen

Den här sektionen är viktig. Den läggs in i tabellen template_configuration, i fälten files_css, files_js och files_print_css som JSON-arrayer.

T.ex.: filsektionen i temat Material Premium:

    <files>
        <css>
            <add>css/bootstrap-material-design.css</add>
            <add>css/ripples.min.css</add>
            <replace>css/ajaxify.css</replace>
            <replace>css/theme.css</replace>
            <replace>css/custom.css</replace>
            <remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
        </css>
        <js>
            <replace>scripts/theme.js</replace>
            <replace>scripts/ajaxify.js</replace>
            <add>scripts/material.js</add>
            <add>scripts/ripples.min.js</add>
            <replace>scripts/custom.js</replace>
        </js>
        <print_css>
            <add>css/print_theme.css</add>
        </print_css>
    </files>

Alla CSS-/JS-filer i den här sektionen läses in när enkäten startas (i ajax-läge. Om ajax-läget är avstängt läses givetvis alla filer in på nytt för varje sida).

De läggs till i ett Yii-tillgångspaket (Asset Packet) baserat på temats namn. När Asset Manager är aktiverad (med felsökningsläget avstängt) kopieras dessa filer alltså till tmp-katalogen tillsammans med resten av temat (så att du kan använda relativa sökvägar i CSS och JS för att nå bildfilerna). Om Asset Manager i Yii: https://www.yiiframework.com/wiki/148/understanding-assets Om paket i Yii: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

De använder arvssystemet. Det betyder att om du lägger till en CSS-/JS-fil i ett tema, men filen inte finns i temat, letar systemet igenom alla överordnade tema och använder den första fil det hittar. Om en användare utökar ditt tema via temaredigeraren ärvs alla dessa filer i hans eller hennes tema. Nyckelorden hänvisar till detta arvssystem.

add : lägger till filen i temat och i alla teman som ärver från det
replace: ersätter filen i dess moderTema
remove: tar bort filen från alla paket, även kärnpaketet (sedan 3.14)

Kom ihåg att du kan ange 'force_xmlsettings_for_survey_rendering' i config.php så att konfigurationen läses från XML i stället för databasen (ingen återställning behövs). Det gör det enklare att testa ändringar i XML-filerna och du slipper avinstallera och installera om temat vid varje ändring av XML-filen.

Några kommentarer om dessa nyckelord:

Tips om arv

Som förklarats tidigare kan nyckelordet "add" peka på en fil som finns i ett av modertemana. Du kan alltså "lägga till" en fil i det här avsnittet utan att filen finns i ditt tema, så länge den finns i ett av dess föräldratema. Motorn söker igenom alla föräldratema och använder den första fil den hittar. Om den inte hittar filen, felsökningsläge är aktiverat i konfigurationen och JS-felsökning för frontend är aktiverat i de globala inställningarna, visas ett varningsmeddelande i konsolen. Exempel: om vi i my_theme lägger till <add>css/unexisting.css</add> ser vi följande i konsolen:

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

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

Om felsökningsläget är avstängt visas inget fel alls. Motorn ignorerar helt enkelt felaktiga add-satser.

När ska jag använda add, när replace och när kan jag låta föräldratemat sköta det?

Först och främst: add och replace är samma nyckelord. Du kan använda det ena eller det andra, motorn gör exakt detsamma. De är åtskilda för mänskliga läsare, så att de förstår din avsikt.

Du kan inte lägga till en fil med samma namn som i modertemat: den ersätter alltid den filen. Exempel: om du har en fil som heter "my_mother_theme/foo.css" och lägger till en fil som heter "foo.css" i dottertemat, läggs bara "daughter_theme/foo.css" till i temat. Om du vill behålla "my_mother_theme/foo.css" väljer du bara ett annat namn för "daughter_theme/foo.css", till exempel "daughter_theme/bar.css". Nyckelordet "add" kan alltså användas som nyckelordet "replace".

Om du undrar varför: det gör det mycket enklare att automatiskt generera ärvda teman, eftersom det fungerar direkt att kopiera filavsnittet (du behöver inte byta namn på "add" till "replace" när du utökar en fil).

För att göra det tydligt tar vi Fruity som exempel. Här är dess avsnitt för CSS-filer:

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

Om du tittar på filen custom.css i Fruity är den exakt likadan som den i Vanilla. Vi skulle kunna ta bort filen custom.css i Fruity, och då skulle den från Vanilla laddas. Vi skulle också kunna ta bort satsen <replace>custom.css</replace> från Fruitys manifest, då används satsen från Vanilla och Vanillas custom.css laddas.

Varför använder vi då satsen <replace>custom.css</replace> i Fruitys manifest? Svaret är enkelt: vi vill att slutanvändaren ska kunna utöka temat Fruity, ändra filen i sitt lokala tema och ladda den ändrade filen från sitt ärvda tema. För att förstå detta kan du utöka Fruity och titta på det utökade temat. Det utökade temat har inte ens filen custom.css, så den från Fruity används. Men om användaren skapar filen i det utökade temat (genom att klicka på "Utöka" i temaredigeraren) laddas filen från hens tema.

Så generellt gäller: Om du skapar ett tema från grunden som inte utökar något annat tema, använd bara add-satsen för att lägga till dina CSS/JS-filer. Enkelt. Om du skapar ett tema som utökar ett annat tema och inte vill att användarna ska kunna utöka CSS/JS-filen från modertemat: använd inte add-satsen i ditt manifest. Filerna laddas ändå från modertemats konfiguration. Om du skapar ett tema som utökar ett annat tema och vill ersätta en fil från modertemat: använd nyckelordet replace (nyckelordet add ger samma resultat). Om du skapar ett tema som utökar ett annat tema och inte ersätter en viss CSS/JS-fil, men vill att användarna ska kunna utöka den: använd satsen "replace" för den filen i ditt manifest. Även om du inte ersätter filen tillåter du användaren att göra det om hen vill, genom att använda nyckelordet replace i manifestet.

Bara det allra sista fallet kräver lite tankegymnastik för att förstå, alla andra fall är enkla.

Du kan också registrera CSS- och JS-filer direkt från twig-koden. Dessa filer laddas bara när twig-filen anropas. Om du vill att användarna ska kunna ärva dessa JS/CSS-filer från temaredigeraren, kom ihåg att använda funktionerna Template:RegisterTemplateCssFile('my style.css') och Template:RegisterTemplateScript('my script.js'). Om du inte använder dessa funktioner kan ditt tema fungera, men arvet fungerar inte. Det är samma logik som för funktionen Template:Image('my picture.jpg')

Nyckelordet remove

Nyckelordet remove finns bara sedan 3.14. Med det kan du ta bort vilken CSS-/JS-fil som helst från vilket paket som helst, även kärnpaketen. Det används i temat Material Premium för att ta bort filerna från Awesome Bootstrap Checkbox:

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

Du bör alltså använda exakt samma syntax som paketets fil (t.ex. fungerar inte enbart "awesome-bootstrap-checkbox.css" utan mappsökväg). Den fullständiga listan över kärnpaket och deras filer finns i /application/config/packages.php och config/third_party.php. Exempel för awesome-bootstrap-checkbox.css: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56

        'css'=> array(
            'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
        ),

Ett annat sätt att hitta det exakta namnet att använda i taggen remove är att aktivera asset manager (stäng av felsökningsläget eller ange 'use_asset_manager'=>true i konfigurationen). Sökvägen som ska användas är då den som kommer direkt efter den slumpmässiga katalogen i tmp-katalogen. Exempel för awesome-bootstrap-checkbox.css:

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

Filer som du inte bör ta bort:

jquery-3.1.1.min.js : behövs

jquery-migrate-3.0.0.min.js : behövs

survey.js : behövs

moment-with-locales.min.js : behövs för frågetypen datum (och några andra, tror jag)

em_javascript.js : behövs för all JavaScript i ExpressionScript

Avsnittet options

Det här avsnittet gäller alternativen för ditt tema. Det används för att fylla fältet "options" i tabellen template_configuration som en json-samling.

Mer information

Theme:Available function

Några anmärkningar

OBS: Om du redigerar XML-filen för ett tema måste du avinstallera och installera om temat så att ändringen tas med.

OBS: För att undvika det kan du tvinga användning av XML i stället för databasen. Aktivera felsökningsläget i config.php och ta bort kommentarstecknen för:

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

Var försiktig: allt laddas från XML-filen (inklusive alternativ med mera).

OBS: Om du redigerar CSS-/JS-filerna manuellt (utan att använda Tema redigerare) och felsökningsläget är avstängt kan du numera tvinga fram en tömning av resurserna. Gå till "Globala inställningar", fliken "Allmänt" och klicka på knappen "Clear assets cache".

OBS: Om du tar bort avsnittet

Huvudkapitel

Nytt mallsystem i LS3.x

From LimeSurvey Manual