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

Johdanto

Huomaa: LimeSurveyn aiemmissa versioissa tiedostoja, jotka määrittävät kyselyn ulkoasun, värit, fontit, asettelun ja (osittain) toiminnan, kutsuttiin nimellä "kaavain" (template). Uusien näkemysten vuoksi niitä kutsutaan nyt "teemoiksi", ja kaavain-nimitys on varattu esimerkkikyselyille.

Tällä sivulla opit:

Käyttämään LimeSurvey 3.0:n uutta teemajärjestelmää.
Käyttämään perintää omien teemojesi hallintaan.
Lisäämään kuvan teemaasi
Hallitsemaan kyselyidesi ja kyselyryhmiesi teeman asetuksia

LimeSurvey 3 tuo mukanaan täysin uuden teemamoottorin, joka perustuu Twig 1.29:ään ja Bootstrapiin ja mahdollistaa teemojen perinnän sekä teeman asetukset. Se poistaa kokonaan vanhan korvausavainsanajärjestelmän. Nyt 100 % käyttöliittymän HTML:stä voidaan mukauttaa. Esimerkiksi vanhassa teemajärjestelmässä oli avainsana {ASSESSMENTS}, joka korvattiin arvioiden HTML-koodilla suoritushetkellä. Teeman suunnittelijalla ei ollut mahdollisuutta mukauttaa tätä HTML:ää (muuten kuin JavaScriptillä). Nyt on tiedosto nimeltä assessments.twig, joka sisältää tämän HTML:n tuottavan logiikan (kirjoitettu Twigillä). Näillä sivuilla selitämme, miten tätä uutta teemamoottoria käytetään.

Emme käsittele tässä tarkasti, miten Twig toimii. Se on eräänlaista hyvin yksinkertaistettua PHP:tä, joka tarjoaa korkean turvallisuustason "sandbox"-järjestelmän ansiosta (käsittelemme sitä tarkemmin teemamoottorin ydinkoodia käsittelevässä osassa). Jos osaat jo PHP:tä, hallitset sen erittäin helposti. Jos et osaa PHP:tä, sen oppiminen pitäisi silti olla melko helppoa. Tutustu Twig 1.X:n dokumentaatioon: https://twig.symfony.com/

Muokkaus ylläpitokäyttöliittymässä

Teemalista

Ylläpidon ohjausnäkymässä on nyt ruutu, josta pääsee teemalistaan:

Lista on jaettu 5 sarakkeeseen:

teeman esikatselu: se on pelkkä kuvatiedosto nimeltä "preview.png" teeman juuressa
teeman "otsikko" manifestissa määritetyllä tavalla (config.xml teeman juuressa)
teeman kuvaus: manifestissa asetettu merkkijono
teeman tyyppi: Valmisteema (toimitetaan LimeSurveyn mukana), Käyttäjän teema (lisätty upload-hakemistoon), XML-teema (ei ladattu tietokantaan)
Laajenna: jos teema laajentaa toista teemaa, sen nimi näytetään tässä
Joitakin toimintopainikkeita:
- Asenna: lataa teeman manifestin, lisää teeman tietokantaan ja tekee siitä valittavissa kyselytasolla
- Poista asennus: poistaa teeman asetusmerkinnät tietokannasta
- Teeman muokkain: siirtää sinut teeman muokkaimeen
- Teeman asetukset: johtaa teeman asetusten yleisiin asetuksiin

Teeman muokkain

Tämä dokumentaatio olettaa, että osaat jo käyttää teeman muokkainta LS:n edellisessä versiossa.

Teeman muokkain on pidetty mahdollisimman lähellä alkuperäistä. Kun avaat valmisteeman, et voi muokata sitä. Nyt "kopioi"-painikkeen sijaan sinulla on "laajenna"-painike.

Nyt teemaa laajennetaan — Nyt teemaa **laajennetaan**

Lyhyt yleiskatsaus teemaperinnän käsitteeseen

LS3:ssa teema voi nyt periä toisen teeman, eli se voi "laajentaa" toista teemaa. Tämä tarkoittaa, että teeman hakemisto on käytännössä tyhjä ja sisältää vain ne tiedostot (näkymät, tyylitiedostot, skriptit, resurssit jne.), jotka eroavat alkuperäisistä. Näin voit helposti luoda joukon teemoja eri käyttäjillesi ilman, että sinun tarvitsee ylläpitää montaa erilaista teemaa. Esimerkiksi: sinulla voi olla oma itse tehty teemasi ja sen lisäksi versio yritykselle (sen logolla, tyylillä, ehkä linkillä sen verkkosivustolle alatunnisteessa jne.), toinen versio toiselle yritykselle jne. Kun sitten päivität mukautetun teemasi CSS:ää tai yleistä asettelua, kaikki sen perineet teemat päivittyvät automaattisesti. Huomaa, että perintä on rekursiivista: teema voi laajentaa teemaa, joka laajentaa toista teemaa jne.

Tämä tarkoittaa myös sitä, että jos laajennat jotakin LimeSurveyn valmisteemoista, hyödyt edelleen sen päivityksistä.

Uudistukset käyttöliittymässä

Jos haluat laajentaa LimeSurveyn Monochrome-teemaa, siirry teemalistaan ja napsauta Monochrome-teeman painiketta "Teeman muokkain". Napsauta sitten "Laajenna" ja vahvista uusi nimi "extends_monochrome".

Jos nyt siirryt upload-hakemistoon (tiedosto- tai FTP-asiakasohjelmalla), näet, että uusi hakemisto on luotu: upload/themes/extends_monochrome Se sisältää XML-tiedoston ja hakemistoja, mutta useimmat hakemistot ovat tyhjiä. Siinä ei ole näkymiä, CSS:ää eikä JS:ää. Voit silti valita tämän teeman kyselyyn tavallisen teeman tapaan, ja se näyttää täsmälleen Monochrome-teemalta.

*Teeman puurakenne (hakemisto ja tiedostot) heti luomisen jälkeen. Se on käytännössä tyhjä*

Alkuperäisen teeman resurssit (jpg, png jne.) kopioidaan teemaa laajennettaessa. Tämä johtuu siitä, että jos kopioit CSS-tiedoston alkuperäisestä teemasta paikallisesti ja se viittaa näihin tiedostoihin (esimerkiksi background-image-määrityksessä), sen on löydettävä kuvat nykyisen teeman polusta.

Teeman extends_monochrome teeman muokkain näyttää tältä:

Vanhaan teeman muokkaimeen verrattuna ei ole suuria eroja. Luetellaan tärkeimmät:

Avainsana inherited tiedostolistassa. Se tarkoittaa, että tiedostoa ei ole teeman hakemistossa ja että käytetään alkuperäisen teeman tiedostoa.

Pääeditori ( ACE-editori ) näyttää valitun tiedoston sisällön. Tiedostot sisältävät HTML:n, CSS:n tai JS:n lisäksi myös Twig-lauseita. Näiden Twig-lauseiden avulla voimme siirtää logiikkaa teeman näkymiin, jotka olivat aiemmin syvällä ytimessä ja jotka voidaan nyt mukauttaa.

Siksi ylävalikon pudotusvalikossa on nyt enemmän näyttötyyppejä. Huomaat sivuja, kuten ‘Kyselylista’, ‘Lataa’, ‘Tallenna’, ‘Virhe’, ‘Rekisteröityminen’, ‘Arviot’ ja ‘Tulosta vastaukset’, jotka eivät olleet aiemmin saatavilla tai joita ei voinut oikeasti mukauttaa.

Tiedostolistan alareunassa oleva ‘vihje’-linkki näyttää Twig-tavan lisätä kuva HTML:ään

Painike ‘Tallenna muutokset’ muuttuu painikkeeksi Kopioi paikalliseen teemaan ja tallenna muutokset

Pikaesimerkki: kuvan lisääminen

Painike Kopioi paikalliseen teemaan ja tallenna muutokset tekee täsmälleen sen, mitä sanoo: jos muokkaat tiedostoa ja napsautat sitten tätä painiketta, tiedosto kopioidaan muokkaamaasi teemaan ja muutokset tallennetaan.
Esimerkiksi: napsauta tiedostoa layout_global.twig, lisää juuri ennen content-lohkoa ( {% block content %}) teksti “TEST” ja napsauta painiketta. Näet, että tiedoston tunniste muuttui arvosta “inherited” arvoon “local” ja painike on nyt tavallinen Tallenna muutokset-painike.

*heti painikkeen napsauttamisen jälkeen*

Jos avaat tiedostonhallinnan ja siirryt hakemistoon upload/themes/extends_monochrome/views/, näet, että siinä on vain yksi tiedosto, layout_global.twig, ja että merkkijono “TEST” on siinä.

Lisätään nyt satunnaisen tekstin sijaan kuva. Jos napsautat vihjelinkkiä, se kertoo:
Käyttääksesi kuvaa .twig-tiedostossa: {{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
Jos olet lukenut Twigin dokumentaation (ja sinun pitäisi jo olla), tiedät, että {{ function( ) }} tulostaa funktion tuloksen näytölle. Tässä funktio on image( ).

Jos olet utelias tietämään, mitä se tekee, löydät sen koodista täältä (RC3-versio): image()-funktio RC3:ssa

Jos et ymmärrä koodia, älä huoli: sinun ei tarvitse tietää, miten se toimii, vaan miksi ja miten sitä käytetään.

Sinun kannattaa käyttää image()-funktiota kahdesta syystä:

Funktio käy teeman läpi löytääkseen kuvan. Jos teema, jonka parissa työskentelet, laajentaa toista teemaa, ja kopioit tiedoston paikallisesti kohtaan, johon lisäsit kuvan, mutta kuvaa ei kopioida paikalliseen teemaan, funktio käy läpi teemaperinnän puun löytääkseen kuvan sijainnin.
Se käyttää resurssienhallintaa (asset manager), mikä parantaa teemasi suorituskykyä. Katso lisätietoja Yii Asset Managerin dokumentaatiosta: http://www.yiiframework.com/wiki/148/understanding-assets/

Kuvan lisääminen teemaasi:

lataa se palvelimelle tavalliseen tapaan oikealla olevalla tiedostonlataajalla ja lisää se haluamaasi kohtaan missä tahansa twig-tiedostossa:

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

Jos haluat lisätä kuvalle vaihtoehtoisen tekstin (ruudunlukijoita ja HTML-validointia varten), lisää:

Jos haluat lisätä luokkamääritteen ja tunnisteen (id):

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

Joitakin asioita tehtävälistallamme

Antaa käyttäjille mahdollisuus ladata mukautettu esikatselutiedosto suoraan muokkaimesta
Lisätä painike, jolla paikallinen tiedosto poistetaan ja palataan peritylle tiedostolle
Kopioida vain CSS-tiedostoissa käytetyt kuvat (luettelemalla ne manifestissa kopioitavina tiedostoina)
Muistuttaa, mitä teemaa nykyinen teema laajentaa (jos mitään)

Teeman asetukset

Toinen LS3:n uudistus on teeman asetussivu. Kuten myöhemmin näemme, teemojen tekijät voivat luoda omia asetuksiaan ja jopa oman ylläpitosivunsa asetuksille. Tässä tarkastelemme lyhyesti, miten valmisteemojen asetussivu toimii. Päästäksesi teeman asetuksiin yleisellä tasolla: napsauta teemalistassa kohtaa “Teeman asetukset”

Edistyneet valinnat

Kun avaat Teeman asetukset -välilehden, voit muokata joko sen Perusasetuksia tai Edistyneitä valintoja. ”Edistyneet valinnat” on pelkistetty lomake, jonka kautta pääset käsiksi tietokannan teeman keskeisiin määrityskenttiin. Jotta ymmärrät, miten se toimii, sinun kannattaa lukea myös XML-tiedostosta ja teeman luomisesta alusta alkaen. Se on siis melko monimutkainen ja tarkoitettu kokeneille käyttäjille.

Jos kuitenkin haluat muokata lisäasetuksia, napsauta Edistyneet valinnat -välilehteä

CSS-tiedostot: Teemaan lisättävät CSS-tiedostot;
JS-tiedostot: Teemaan lisättävät JS-tiedostot;
CSS-tiedostot tulostukseen: CSS-tiedostot, jotka ladataan teemaa tulostettaessa;
Asetukset: Tämä kenttä sisältää asetukset (ja niiden arvot), jotka välitetään teeman näkymälle;
CssFramework Name: Ladattavan CSS-kehyksen nimi. Toistaiseksi vaihtoehtoina ovat vain Bootstrap tai ei mitään;
Cssframework Css: Voit korvata ytimen bootstrap.css-tiedoston tässä kentässä omalla mukautetulla versiollaan;
Cssframework Js: Ytimen boostrap.js-tiedoston voi korvata tässä omalla mukautetulla versiollaan;
Ladattavat paketit: Tämän asetuksen avulla voit ladata LimeSurveyn ytimen resurssipaketteja.

Huomaat yläreunassa latauskentän, jonka avulla voit ladata tiedoston teeman tiedostohakemistoon. Näillä parametreilla voi muuttaa teeman koko ulkoasua.

Varoitus! : Älä muuta arvoja, ellet tiedä, mitä teet!

Perusasetukset

Perusasetussivu tulee itse kaavaimesta. Se tehdään twig-tiedostolla ja JavaScriptillä teeman /options-hakemistossa: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Rikkinäinen linkki)

Tämä sivu voi olla täysin erilainen teemasta toiseen, ja teemojen toimittajia kannustetaan vahvasti luomaan oma ulkoasunsa.

Perusasetussivu vain täyttää edistyneiden asetusten lomakkeen kentät. Näet sen kytkemällä asetuksen päälle tai pois perusasetussivulla ja katsomalla, miten edistyneen lomakkeen vastaava kenttä muuttuu vastaavasti. Esimerkiksi oletuskaavaimen perusasetuksissa, jos vaihdat Bootswatch-teeman arvoon “Darkly” ja napsautat sitten edistyneiden asetusten välilehteä (jopa tallentamatta), näet, että kenttä “Cssframework Css” muuttui arvosta

{"replace": [["css/bootstrap.css","css/flatly.css"]]}
muuttui muotoon
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
Tässä ovat valmisteemojen eri perusasetukset:

Ajax-tila: Ladataanko seuraava sivu ajaxin avulla (nopeampi) vai sivun uudelleenlatauksella (parempi virheenkorjaukseen)
Taustakuva: jos arvo on Kyllä, ladataan kuva nimeltä pattern.png (korvataan tiedostovalitsimella Master-versiossa)
Laatikkosäiliö: jos arvo on Ei, kysymyksiä ei sijoiteta laatikkoon (jolloin voit käyttää näytön leveyttä suurempia taulukoita)
Brandlogo: jos arvo on Ei, kyselyn nimi näytetään yläpalkissa. Muuten voit valita jonkin tiedostohakemiston kuvista logoksi.
Animoi sivu: jos arvo on Kyllä, voit valita animaation, joka otetaan käyttöön kyselyn sivun latautuessa
Animoi kysymys: sama kysymyksille
Animoi varoitukset: sama varoituksille
Bootstrap-teema: tässä voit valita ladattavan Bootstrap-teeman. Ne tulevat Bootswatchista https://bootswatch.com/3/

Animaatioissa käytetty kirjasto on animate.css: https://daneden.github.io/animate.css/ Teeman toimittaja voi tietysti lisätä oman animaatiokirjastonsa tai olla käyttämättä animaatiokirjastoa lainkaan.

Monochrome-teemat käyttävät samaa Bootstrap-väriteemaa kuin hallintakäyttöliittymä. Ne eivät käytä CSS-kehyksen korvausjärjestelmää, vaan lisäävät pelkän CSS-tiedoston. Se havainnollistaa toista tapaa toteuttaa mukautettuja teemoja teeman toimittajille.

Perintäjärjestelmä

Edellisessä osassa näimme, että teema voi laajentaa toista teemaa. Myös teeman asetukset voivat periytyä toisen teeman asetuksista. Tämä tarkoittaa, että tietylle teemalle voi olla asetukset

yleisellä tasolla (juuri nähty, teemalistasta avautuva taso)
kyselyryhmän tasolla
ja viimeisenä kyselyn tasolla.

Kukin tietyn tason parametri voi periä arvonsa ylemmältä tasolta: kyselyryhmän perintä. Tarkastellaan ensin kyselyryhmän tasoa.

Kyselyryhmän tasolla

LS3:n yksi suurista uudistuksista on kyselyryhmäjärjestelmä. Voit nyt luoda erilaisia ryhmiä kyselyidesi järjestämiseksi. Pääset siihen siirtymällä Kyselylistaan ja napsauttamalla Kyselyryhmät-välilehteä:

Tässä listassa on kaksi toimintopainiketta. Jos ryhmä on tyhjä, voit poistaa sen. Muussa tapauksessa voit aina muokata sitä. Napsauttamalla muokkauspainiketta pääset kyselyryhmän asetussivulle:

Tämän sivun kolmas välilehti on nimeltään “Teeman asetukset tälle kyselyryhmälle”. Kun napsautat sitä, näet saman teemalistan kuin teemalistassa, paitsi että tässä näkyy vain asetuspainike (Teeman muokkaimeen pääsee vain pääluettelosta).
Jos nyt napsautat oletusteeman asetuspainiketta, näet tämän:

Peri kaikki tarkoittaa, että kaikki asetukset peritään yleiseltä asetustasolta.
Jos siirryt edistyneiden valintojen sivulle, näet, että kaikki kentät on asetettu perimään.
Jos napsautat Perusasetukset-sivulla kohdassa "Peri kaikki" arvoa "Ei", näet jälleen yleisten asetusten sivua hyvin muistuttavan sivun. Ainoa ero on, että jokaisen kentän arvoksi voi asettaa kyllä, ei tai peri; ja jokaisessa pudotusvalikossa on peri' -arvo.

Kyselyryhmä voi olla toisen ryhmän alaryhmä. Tässä tapauksessa se perii asetukset emoryhmältään.

Kyselyn tasolla

Kun muokkaat kyselyä, näet vasemmassa palkkivalikossa uuden kohdan “Teeman asetukset”. Se vie kyselylle valitun teeman asetussivulle. Perintäjärjestelmä on sama kuin kyselyryhmässä, mutta tällä kertaa peri tarkoittaa, että asetus peritään kyselyn kyselyryhmältä.

Käyttöesimerkki

Oletetaan, että käytät yhtä teemaa eri yrityksille (A ja B). Määrität suosikkiasetuksesi yleisellä tasolla (esim. ajax päällä, sivun animointi liukuen sisään, varoitukset sykkien). Sitten luot kullekin yritykselle kyselyryhmän: yrityksen A kyselyryhmän, joka sisältää kaikki tämän yrityksen kyselyt, ja yrityksen B kyselyryhmän, joka sisältää kaikki yrityksen B kyselyt. Tällä tasolla määrität vain logon ja taustan ja annat muiden asetusten periytyä. Näin kaikki ryhmän A kyselyt käyttävät yrityksen A logoa ja kaikki ryhmän B kyselyt yrityksen B logoa. Yhdelle yrityksen A kyselyistä voit käyttää eri taustaa kyselyn aiheen mukaan: vaihdat vain taustan asetuksista kyselyn tasolla. Jos joku yrityksestä B kertoo, että sykkivä varoitus on liian aggressiivinen ja hän haluaisi jotain pehmeämpää, kuten häivytyksen, vaihdat varoituksen animoinnin kyselyryhmän B tasolla, ja kaikki tämän ryhmän kyselyt käyttävät nyt tätä animaatiota. Jos yritys A vaihtaa logoaan, voit vaihtaa sen kyselyryhmän A tasolla, ja kaikki tämän ryhmän kyselyt käyttävät uutta logoa.

Nämä esimerkit perustuvat valmisteeman nykyisiin asetuksiin. Jos kuitenkin olet teeman toimittaja tai osaat koodata hieman twigillä, voit lisätä omia asetuksia. Voit esimerkiksi lisätä asetuksen “info footer”, johon voit lisätä tietoja, kuten yrityksen verkkosivuston tai tukipuhelinnumeron. Jos yrityksellä A on eri osastoja eri puhelinnumeroineen, voit luoda kullekin osastolle oman alaryhmän kyselyryhmään A. Jokaisella alaryhmällä on tällöin oma puhelinnumeronsa näissä asetuksissa.

Usein kysyttyä teeman mukauttamisesta

Tästä löydät vastauksia foorumilla esitettyihin kysymyksiin, jotka voivat auttaa teemasi mukauttamisessa.

CSS:n/JS:n mukauttaminen: resurssienhallinta ("miksi muutokseni eivät tule voimaan?")

Jos yrität päivittää teeman CSS:ää tai JS:ää muokkaamalla koodia suoraan suosikkieditorillasi, voit yllättyä siitä, että muutoksesi eivät tule voimaan.

Versiosta 2.50 alkaen LS käyttää Yiin resurssienhallintaa: Yii-dokumentaatio resursseista

Se siirtää teeman CSS/JS-tiedostot tmp/-alihakemistoon, jolla on satunnainen nimi (esim. "tmp/1ef64ml/"). Jos siis muutat css/js-tiedostoa ja kerrot siitä resurssienhallinnalle, tiedostot kopioidaan uuteen alihakemistoon uudella nimellä, jolloin käyttäjän selaimen välimuisti päivittyy ja he näkevät uuden css/js:n. Muuten heidän pitäisi tyhjentää selaimensa välimuisti.

Tässä ovat otsikon CSS-linkit, kun resurssienhallinta on päällä:

Kuten näet, ne viittaavat kaikki tmp/-alikansioihin.

Tässä ovat otsikon CSS-linkit, kun resurssienhallinta on pois päältä:

Kuten näet, ne osoittavat teeman varsinaisiin tiedostoihin.

Jos resurssienhallinta ei tiedä tiedoston muuttuneen, vanha tiedosto vanhassa tmp/-hakemistossa pysyy muuttumattomana, eikä muutoksiasi oteta koskaan käyttöön.

Kun muokkaat teeman CSS:ää tai JS:ää, sinulla on useita vaihtoehtoja:

Voit käyttää LS:n Teeman muokkainta: se huolehtii resurssienhallinnasta, eikä sinun tarvitse murehtia mistään
Voit ottaa virheenkorjaustilan käyttöön: se poistaa resurssienhallinnan käytöstä, jolloin teemojesi varsinaisia css/js-tiedostoja kutsutaan (mutta silloin selaimen välimuisti pitää päivittää jokaisella latauksella)
Voit päivittää resurssien välimuistin: kohdasta Yleiset asetukset -> Yleiset -> Clear asset cache

Teeman muokkaimen käyttö mukautetun CSS:n muokkaamiseen on ylivoimaisesti paras ratkaisu.

Teeman muokkaimen käyttö auttaa sinua ymmärtämään uuden teemamoottorin arkkitehtuuria. Jos myös mukautat fruity-teemaa, ota huomioon CSS:n tarkkuus (specificity): useimmat määritykset käyttävät valitsinta ".fruity" (yksi body-elementin luokista).

Mukautettujen fonttien lisääminen teemaan

Helppo tapa: Google Font CDN:n käyttö

Bootswatch-kyselyteema käyttää Google Font CDN:ää. Katsotaan, miten se toimii: 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");

Sitten Lato-fonttia käytetään CSS-säännöillä: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72

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

Voit käyttää mitä tahansa Google-fonttia tällä tavalla mukautetussa teemassasi. Sinun tulisi tietysti poistaa fonttivalitsin teemasi asetuksista. Poista nämä rivit tiedostosta options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

Paikallisen fontin käyttö

Voit tietysti myös ladata fonttitiedostot ja käyttää niitä paikalliselta palvelimelta Google CDN:n sijaan (parempi yksityisyyden kannalta). Esimerkkinä tästä on meidän paikallinen versiomme noto-fontista: 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');
}
...

Voit käyttää hyvin samanlaista määritystä teemasi css-tiedostossa ja kopioida tiedoston NotoSans-Regular.ttf teemasi css/font-src/-kansioon.

Käytä sitten tätä fonttia bodyyn (tai mihin tahansa muuhun elementtiin) kuten yllä ja poista oletusasetuksen fonttivalitsin.

Oman fonttivalitsimen luominen asetuksiin

Tällä hetkellä et voi helposti käyttää ytimen fonttivalitsinta oman fonttisi lisäämiseen asetuksiin. Ensin loppukäyttäjille täytyy antaa mahdollisuus ladata omia paketteja (katso seuraava kappale: Katsaus Fruity-teeman fonttivalitsimeen).
Näin toimit:

Lisää kaksi fonttia (my_custom_font ja my_custom_other_font) teemaasi käyttäen CDN-palvelua tai paikallista palvelinta
Lisää sitten css-tiedostoosi kaksi uutta luokkaa:

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

Lisää teemasi XML-tiedostoon fonttiasetus (oletuksena on my_custom_font) :

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

Lisää option.twig-tiedostoon fonttivalitsin lisäämällä nämä rivit (ei vielä testattu, joten jos se ei toimi, tule valittamaan foorumille):

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

Nyt käyttäjiesi pitäisi voida valita näiden kahden fontin välillä.

Katsaus Fruity-teeman fonttivalitsimeen

Tulevaisuudessa loppukäyttäjät voivat ladata omia resurssipaketteja, myös fonttipaketteja. Se tekee fonttien mukauttamisesta hyvin helppoa.
Yii-pakettien ymmärtämiseksi:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

LimeSurvey-paketit on määritelty eri tiedostoissa. Fonttipaketit on määritelty täällä: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Esimerkiksi Noto-fonttipaketti on määritelty täällä: 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',
        ),
    ),

Sen sisältämä noto.css-tiedosto on täällä: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Huomaa css-luokan ".font-noto" määrittely tiedoston lopussa:

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

Vanilla-teemassa noto-fontti otetaan käyttöön lisäämällä noto-paketti ja määrittelemällä fonttiasetukseksi 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>

Tämän jälkeen body-elementin fonttiluokka määritellään tämän arvon avulla: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76

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

XML-tiedosto sisältää tietenkin vain teemasi asetusten oletusarvot. Todellisuudessa nämä arvot määritellään ja luetaan tietokannasta (taulu "template_configuration" (Kysymys: "template_" vai "theme_"?) JSON-merkkijonoina. Tiedosto option.js käyttää yksinkertaisten asetusten fonttivalitsimen arvoa muuttaakseen arvon lisäasetusten välilehden lomakkeessa: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

Kun "lataa resurssipaketti" -toiminto on käytettävissä, on helppo lisätä skripti, joka skannaa kaikki olemassa olevat fonttipaketit ja lisää ne valitsimeen.

Teema-asetusten lisääminen kyselyn elementtien sijoittelun ja näyttämisen hallintaan

Tämä opas näyttää, miten laajennettuun teemaan lisätään asetuksia, joilla kyselyn elementit näytetään eri paikoissa. Tässä luomme teema-asetukset, joilla kyselyn otsikko näytetään kahdessa eri paikassa.

Yksinkertaisuuden vuoksi opas perustuu "bootswatch"-teeman laajennukseen LimeSurveyn versiossa 3.4.3.

Luo mukautettu teema

Laajenna "bootswatch"-teema edellä kuvatulla tavalla.
Kopioi custom.css paikalliseen teemaan edellä kuvatulla tavalla.

Luo uudet teema-asetukset

Kopioi hakemiston /themes/survey/bootswatch/options/ sisältö hakemistoon /upload/themes/survey/yourThemeName/options/.

Avaa /upload/themes/survey/yourThemeName/options/options.twig editorissa ja etsi "{# Bootstrap Bootswatch theme #}". Lisää suoraan sen ylätason <div class='row'>-elementin eteen tämä:

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

Avaa /upload/themes/survey/yourThemeName/config.xml ja lisää "options"-lohkoon kaksi kohtaa, jotta se näyttää tältä:

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

Tämän pitäisi tuoda Teeman asetukset -näyttöön kaksi uutta asetusta seuraavasti:

Muokattu näkymä kyselyn otsikolle navigointipalkissa

Luo uusi hakemisto /upload/themes/survey/yourThemeName/views/subviews/header/.
Kopioi /themes/survey/vanilla/views/subviews/header/nav_bar.twig tähän uuteen hakemistoon.

Avaa /themes/survey/vanilla/views/subviews/header/nav_bar.twig ja etsi "{# Logo option #}". Muokkaa sen alla olevaa logon/kyselyn nimen IF-lausetta niin, että se näyttää tältä:

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

Lisää tiedostoon /upload/themes/survey/yourThemeName/css/custom.css jotain tämänkaltaista:
```
.navbar-brand {
    line-height: 60px;
    font-size: 32px;
}
```
Aseta teeman asetus "Survey name in navbar" arvoon "Kyllä"
Sinun pitäisi nähdä tämä:

Muokattu näkymä kyselyn otsikolle edistymispalkin alla

Luo uusi hakemisto /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews.
Kopioi /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig tähän uuteen hakemistoon.

Avaa /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig ja lisää <h1>-elementti kyselyn nimelle. Sen pitäisi näyttää tältä:

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

Lisää tiedostoon /upload/themes/survey/yourThemeName/css/custom.css jotain tämänkaltaista:

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

Aseta teeman asetus "Survey name below progress bar" arvoon "Kyllä"
Sinun pitäisi nähdä tämä:

Lataukset

Esimerkki laajennetusta teemasta: Test_survey_names.zip

Teeman luominen alusta alkaen

Dokumentaatio tulossa pian.

Annamme toistaiseksi vain muutaman vinkin.

Teeman rakenne

Tiedostot ja hakemistot

Kun luot teeman alusta alkaen, sinun ei tarvitse noudattaa Vanillan tiedosto-/hakemistorakennetta eikä sen CSS/JS-tiedostoja. Ydinjärjestelmä lisää pakolliset CSS/JS-tiedostot (voit silti poistaa ne tarvittaessa).

Teemassasi on oltava vain seuraavat asettelutiedostot:

layout_global.twig : näyttää kyselyyn vastaamisen sivut
layout_survey_list.twig : näyttää kyselylistan (jos tämä teema on asetettu oletukseksi)
layout_errors.twig : näyttää virheet, jotka estävät kyselyn esittämisen (väärä kyselyn ID, tyhjä ryhmä ryhmän esikatselussa jne.)
layout_user_forms.twig: näyttää käyttäjälomakkeet, kuten tunnuslomakkeen (kyselyn osallistuja) ja rekisteröitymislomakkeen.
layout_print.twig : käytetään kyselyn tulostamiseen PDF-tiedostoon
layout_printanswers.twig: tulostaa vastaukset

Näiden tiedostojen sisältö sekä se, mitä tiedostoja ne sisällyttävät, on täysin sinun päätettävissäsi. Kaikki muut Vanillassa olevat tiedostot ja hakemistot ovat täysin valinnaisia, joten voit järjestää koodisi haluamallasi tavalla.

Jos luet käyttöliittymän renderöintikoodia, huomaat, että nämä tiedostonimet esiintyvät siinä suoraan. Siksi ne ovat pakollisia.

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

Sisältö

Vanillan tiedostossa layout_global.twig näet, että käytämme muuttujaa nimeltä "include_content" päättämään, mitä näytetään 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 kertoo, mikä toiminto on parhaillaan käynnissä: kysymysten näyttäminen? lähetyksen tuloksen näyttäminen? Tyhjennä kaikki -toiminto? jne. Kuten näet, Vanillassa luodaan yksi sisällytettävä tiedosto toimintoa kohden. Jos siis haluat tietää toimintojen luettelon, tarkista Vanillan hakemisto views/subviews/content ja poista "twig"-tiedostopääte: 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

Jos olet aiemmin luonut teeman LimeSurveyn 2.x-versioille, huomaat, että useimmat näistä vastaavat LimeSurvey 2.x:n vanhoja pstpl-tiedostoja. Teemassasi ei kuitenkaan ole mitään velvoitetta luoda näitä tiedostoja näillä nimillä tähän hakemistoon. Voisit esimerkiksi lisätä tiedostoon layout_global.twig yhden jättimäisen switch-rakenteen, jossa on kunkin toiminnon haluttu HTML.

Manifesti config.xml

Teeman manifesti sisältää teemasi tärkeimmät tiedot. Kun asennat teeman, manifestin sisältö ladataan tietokantaan kahteen eri tauluun: template ja template_configuration. Joka kerta kun muokkaat teeman manifestia, sinun on siis poistettava teeman asennus ja asennettava se uudelleen (tai vain nollattava se). Koska tämä on ikävää teeman kehityksen aikana, voit pakottaa XML-tiedoston suoran käytön tietokantamerkintöjen sijaan. Voit tehdä sen kytkemällä config.php-tiedostossa virheenkorjaustilan päälle ja asettamalla 'force_xmlsettings_for_survey_rendering' arvoon true.

Metadata-osio

Ei mitään monimutkaista: vain teemasi tärkeimmät tiedot. Ne tallennetaan tauluun 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>

Muutama huomautus:

name: käytetään avaimena tietokannassa. Sen on siis oltava yksilöllinen, eikä siinä saa olla erikoismerkkejä (ei välilyöntejä). Huomaa, että isoja ja pieniä kirjaimia ei huomioida
Title: käytetään teeman nimen näyttämiseen eri listoissa. Siinä voi olla erikoismerkkejä
description: käytetään kyselyn teemojen pääluettelossa. Se voi sisältää erikoismerkkejä ja jopa HTML-koodia käyttämällä
extends: valinnainen, määrittää emoteemat. Jos jokin tiedosto (twig/js/css/jpg jne.) puuttuu tästä teemasta, sitä etsitään emoteemasta

Jos olet laajentanut jotakin kolmesta ydinteemasta (Vanilla, Bootswatch, Fruity), voit vaihtaa "extends"-arvon emoteemasta toiseen. Teema on tietysti nollattava.

Tiedosto-osio

Tämä on tärkeä osio. Se tallennetaan tauluun template_configuration kenttiin files_css, files_js, files_print_css JSON-taulukoina.

Esim: Material Premium -teeman tiedosto-osio:

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

Kaikki tässä osiossa olevat CSS/JS-tiedostot ladataan kyselyn käynnistyessä (ajax-tilassa. Jos ajax-tila on pois päältä, kaikki tiedostot ladataan tietysti uudelleen jokaisella sivulla).

Ne lisätään Yii-resurssipakettiin (Asset Packet), joka perustuu teeman nimeen. Kun resurssienhallinta (Asset Manager) on päällä (virheenkorjaustila ollessa pois päältä), nämä tiedostot kopioidaan tmp-hakemistoon teeman muiden tiedostojen kanssa (joten voit käyttää CSS:ssä ja JS:ssä suhteellisia polkuja kuvatiedostojen löytämiseen). Yiin resurssienhallinnasta: https://www.yiiframework.com/wiki/148/understanding-assets Yiin paketeista: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

Ne käyttävät periytymisjärjestelmää. Jos lisäät teemaan CSS/JS-tiedoston, mutta sitä ei ole kyseisessä teemassa, järjestelmä etsii sitä kaikista teeman emoteemoista ja käyttää ensimmäistä löytämäänsä. Jos siis käyttäjä laajentaa teemaasi teeman muokkaimella, kaikki nämä tiedostot periytyvät hänen teemaansa. Avainsanat viittaavat tähän periytymisjärjestelmään.

add : lisää tiedoston teemaan ja kaikkiin sen perineisiin teemoihin
replace: korvaa emoteeman tiedoston
remove: poistaa tiedoston mistä tahansa paketista, jopa ydinpaketista (versiosta 3.14 alkaen)

Muista, että voit asettaa config.php-tiedostossa 'force_xmlsettings_for_survey_rendering', jolloin asetukset luetaan XML:stä tietokannan sijaan (nollausta ei tarvita). Tämä helpottaa XML-tiedostojen muutosten testaamista, eikä teemaa tarvitse poistaa ja asentaa uudelleen jokaisen XML-muutoksen jälkeen.

Muutama huomautus näistä avainsanoista:

Periytymisvinkkejä

Kuten aiemmin selitettiin, "add"-avainsana voi viitata tiedostoon, joka sijaitsee jossakin yläteemassa. Voit siis "lisätä" tiedoston tässä osiossa, vaikka tiedosto ei olisi omassa teemassasi vaan jossakin sen yläteemoista. Järjestelmä etsii tiedostoa kaikista yläteemoista ja käyttää ensimmäistä löytämäänsä. Jos tiedostoa ei löydy, config-tiedostossa on virheenkorjaustila päällä ja yleisissä asetuksissa JavaScriptin käyttöliittymän virheenkorjaustila on päällä, konsoliin tulee varoitus. Esimerkiksi jos lisäämme teemaan my_theme rivin <add>css/unexisting.css</add>, konsolissa näkyy:

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

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

Jos virheenkorjaustila ei ole päällä, virheitä ei näytetä lainkaan. Järjestelmä ohittaa virheelliset add-määritykset.

Milloin käyttää add-avainsanaa, milloin replace-avainsanaa ja milloin voin jättää asian yläteeman varaan?

Ensinnäkin: add ja replace ovat täsmälleen sama avainsana. Voit käyttää kumpaa tahansa, järjestelmä toimii samoin. Ne on erotettu toisistaan ihmislukijoita varten, jotta tarkoituksesi ymmärretään.

Et voi lisätä tiedostoa, jolla on sama nimi kuin yläteemassa: se korvaa aina yläteeman tiedoston. Esimerkiksi jos sinulla on tiedosto "my_mother_theme/foo.css" ja lisäät aliteemaan tiedoston "foo.cs", teemaan lisätään vain "daughter_theme/foo.css". Jos haluat säilyttää tiedoston "my_mother_theme/foo.css", valitse tiedostolle "daughter_theme/foo.css" toinen nimi, esimerkiksi "daughter_theme/bar.css". Avainsanaa "add" voi siis käyttää "replace"-avainsanan tavoin.

Jos mietit syytä: tämä helpottaa huomattavasti periytyvän teeman automaattista luomista, sillä tiedosto-osion kopiointi toimii sellaisenaan (add-sanaa ei tarvitse vaihtaa replace-sanaksi tiedostoa laajennettaessa).

Selvennetään asiaa Fruity-teeman esimerkillä. Tässä sen CSS-tiedosto-osio:

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

Jos katsot Fruityn tiedostoa custom.css, se on täsmälleen sama kuin Vanillan vastaava. Voisimme poistaa tiedoston custom.css Fruitystä, jolloin Vanillan tiedosto ladattaisiin. Voisimme myös poistaa rivin <replace>custom.css</replace> Fruityn manifestista, jolloin Vanillan määritystä käytettäisiin ja Vanillan custom.css ladattaisiin.

Miksi siis käytämme riviä <replace>custom.css</replace> Fruityn manifestissa? Vastaus on helppo: haluamme loppukäyttäjän voivan laajentaa Fruity-teemaa, muokata tiedostoa omassa paikallisessa teemassaan ja ladata tämän muokatun tiedoston periytyvästä teemastaan. Ymmärrät asian laajentamalla Fruityn ja tutkimalla laajennettua teemaa. Laajennetussa teemassa ei ole edes tiedostoa custom.css, joten Fruityn tiedostoa käytetään. Mutta jos käyttäjä luo tämän tiedoston laajennettuun teemaan (napsauttamalla Teeman muokkaimessa kohtaa "Laajenna"), tiedosto ladataan hänen teemastaan.

Yleisesti ottaen: Jos luot teeman tyhjästä etkä laajenna mitään teemaa, käytä add-määritystä CSS- ja JS-tiedostojesi lisäämiseen. Helppoa. Jos luot teeman, joka laajentaa toista teemaa, etkä halua käyttäjien voivan laajentaa yläteeman CSS- tai JS-tiedostoa: älä käytä add-määritystä manifestissasi. Tiedostot ladataan silti yläteeman asetusten mukaisesti. Jos luot teeman, joka laajentaa toista teemaa, ja haluat korvata yläteeman tiedoston: käytä replace-avainsanaa (add-avainsanalla on sama tulos). Jos luot teeman, joka laajentaa toista teemaa, etkä korvaa tiettyä CSS- tai JS-tiedostoa, mutta haluat käyttäjien voivan laajentaa kyseistä tiedostoa: käytä manifestissa kyseiselle tiedostolle "replace"-määritystä. Vaikka et korvaisi tiedostoa, replace-avainsanan käyttö manifestissa sallii käyttäjän tehdä sen, jos hän haluaa.

Vain tämä viimeinen tapaus vaatii hieman ajatustyötä, kaikki muut tapaukset ovat yksinkertaisia.

Voit rekisteröidä CSS- ja JS-tiedostoja myös suoraan Twig-koodista. Nämä tiedostot ladataan vain, kun kyseistä Twig-tiedostoa kutsutaan. Jos haluat käyttäjien voivan periä nämä JS- ja CSS-tiedostot Teeman muokkaimesta, muista käyttää funktioita Template:RegisterTemplateCssFile('my style.css') ja Template:RegisterTemplateScript('my script.js'). Jos et käytä näitä funktioita, teemasi voi toimia, mutta sen periytyminen ei toimi. Logiikka on sama kuin funktiossa Template:Image('my picture.jpg').

Remove-avainsana

Remove-avainsana on käytettävissä vasta versiosta 3.14 alkaen. Sillä voit poistaa minkä tahansa CSS-tiedoston mistä tahansa paketista, myös ydinpaketeista. Sitä käytetään Material Premium -teemassa Awesome Bootstrap Checkboxin tiedostojen poistamiseen:

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

Käytä siis täsmälleen samaa syntaksia kuin paketin tiedostossa (esim. pelkkä "awesome-bootstrap-checkbox.css" ilman kansiopolkua ei toimisi). Löydät ydinpakettien ja niiden tiedostojen täydellisen listan tiedostoista /application/config/packages.php ja config/third_party.php. Esimerkiksi tiedostolle 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',
        ),

Toinen tapa löytää remove-tagissa käytettävä tarkka nimi on ottaa asset manager käyttöön (poistamalla virheenkorjaustila käytöstä tai asettamalla konfiguraatiossa 'use_asset_manager'=>true). Tällöin käytettävä polku on se, joka on tmp-hakemistossa satunnaisen hakemiston jälkeen. Esimerkiksi tiedostolle awesome-bootstrap-checkbox.css:

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

Tiedostot, joita ei pidä poistaa:

jquery-3.1.1.min.js : tarvitaan

jquery-migrate-3.0.0.min.js : tarvitaan

survey.js : tarvitaan

moment-with-locales.min.js : tarvitaan päivämääräkysymystyypissä (ja luultavasti joissakin muissa)

em_javascript.js : tarvitaan kaikessa ExpressionScriptin JavaScriptissä

Asetukset-osio

Tämä osio koskee teemasi asetuksia. Sitä käytetään taulun template_configuration kentän "options" täyttämiseen JSON-taulukkona.

Lisätietoja

Theme:Available function

Joitakin huomautuksia

HUOMAA: jos muokkaat teeman XML-tiedostoa, sinun on poistettava teeman asennus ja asennettava teema uudelleen, jotta muutokset otetaan huomioon.

HUOM: Voit välttää tämän pakottamalla XML-tiedoston käytön tietokannan sijaan. Ota config.php-tiedostossa virheenkorjaustila käyttöön ja poista kommenttimerkit riviltä:

'force_xmlsettings_for_survey_rendering' => true, // Poista kommenttimerkit, jos haluat pakottaa XML-tiedoston käytön tietokannan sijaan (helpottaa teeman kehitystä)

Ole varovainen: kaikki ladataan XML-tiedostosta (myös asetukset jne.)

HUOM: Jos muokkaat CSS- ja JS-tiedostoja käsin (käyttämättä Teeman muokkainta) ja virheenkorjaustila on pois päältä, voit nyt pakottaa resurssien tyhjennyksen. Napsauta "Yleiset asetukset" -sivun "Yleiset"-välilehdellä painiketta "Tyhjennä resurssivälimuisti".

HUOM: Jos poistat osion

Pääluvut

Uusi teemajärjestelmä LS3.x:ssä

From LimeSurvey Manual