Teeman muokkain

Johdanto

Kyselyn teema määrittää, miltä kyselysi näyttää osallistujille: sivun asettelun, värit, fontit, logot ja jokaisen kysymyksen tyylin. Teemat rakennetaan Twig-malleilla, CSS:llä ja JavaScriptillä, ja niiden CSS-kehyksenä käytetään Bootstrap 5:tä.

Monet yleiset muutokset eivät vaadi koodia lainkaan. Logoa, värejä, fontteja ja useita näyttöasetuksia voi muuttaa teeman asetuksilla. Käytä tällä sivulla kuvattua teeman muokkainta, kun haluat edetä pidemmälle: lisätä oman CSS:n tai JavaScriptin, muuttaa sivun HTML:ää tai ladata teemaasi kuvia ja muita tiedostoja.

LimeSurveyn mukana tulevat nämä kyselyn valmisteemat:

• Fruity TwentyThree (fruity_twentythree): Oletusteema.
• Bootstrap Vanilla (vanilla): Yksinkertainen perusteema kehittäjille, jotka haluavat rakentaa oman Bootstrap-pohjaisen teemansa.
• Fruity (fruity) ja Bootswatch (bootswatch): Molemmat laajentavat Bootstrap Vanillaa.

Yksittäisten kysymystyyppien ulkoasua hallitaan kysymysteemoilla, ei kyselyn teemalla. Jos haluat muuttaa kysymystyypin HTML:ää, luo kysymysteema.

Ennen kuin aloitat

Teeman muokkaimen käyttö edellyttää yleistä Teemat-oikeutta (katso yleiset oikeudet) tai superylläpitäjän asemaa. Teeman laajentaminen vaatii Luo-oikeuden, muutosten tallentaminen Päivitä-oikeuden ja teeman poistaminen tai tiedoston nollaaminen Poista-oikeuden.

  Virheellinen teema voi tehdä jokaisesta sitä käyttävästä kyselystä käyttökelvottoman. Testaa muutoksesi kyselyn esikatselulla ennen kuin otat teeman käyttöön julkaistussa kyselyssä.

Valmisteemoja ei voi muokata: laajenna niitä

Valmisteemat päivitetään LimeSurveyn mukana, joten niitä ei voi muuttaa suoraan. Jos haluat mukauttaa teemaa, laajenna sitä. Laajentaminen luo uuden käyttäjän teeman, joka perii kaiken emoteemaltaan. Teemasi sisältää vain muuttamasi tiedostot, ja kaikki muu otetaan emoteemasta. Näin teemasi saa edelleen virhekorjaukset ja parannukset, kun LimeSurvey päivittää emoteeman.

Voit laajentaa teemaa kahdella tavalla:

• Siirry kohtaan Asetukset > Teemat, avaa teeman rivin lopussa oleva toimintovalikko (⋯) ja napsauta Laajenna, tai
• Avaa teema teeman muokkaimessa ja napsauta työkalupalkin kohtaa Laajenna.

Anna uudelle teemalle nimi. Teeman muokkain avaa sitten uuden teemasi.

Teemojen tallennuspaikat

• Valmisteemat: themes/survey/ LimeSurvey-asennuksessasi.
• Käyttäjän teemat (laajennetut, ladatut tai tuodut teemat): upload/themes/survey/.

Voit myös muokata käyttäjän teeman tiedostoja suoraan palvelimella omalla editorillasi. Varmista jälkeenpäin, että verkkopalvelin voi edelleen lukea ja kirjoittaa tiedostoja, jotta voit jatkaa myös teeman muokkaimen käyttöä.

Teeman muokkain

Avaa teeman muokkain siirtymällä kohtaan Asetukset > Teemat, avaamalla teeman rivin lopussa oleva toimintovalikko (⋯) ja napsauttamalla Teeman muokkain.

Jos avaat valmisteeman, huomautus kertoo, että kyseessä on vakioteema, ja tarjoaa linkin sen laajentamiseen. Voit katsoa sen tiedostoja ja esikatselua, mutta et voi tallentaa muutoksia.

Työkalupalkki

• Vie: Lataa teeman ZIP-tiedostona.
• Laajenna: Luo uuden teeman, joka perii tämän teeman (katso yllä).
• Nimeä uudelleen: Nimeää teeman uudelleen. Käytettävissä vain käyttäjän teemoille.
• Poista: Poistaa teeman. Oletusteemaksi asetettua teemaa ei voi poistaa.
• Teema: Vaihtaa teeman muokkaimen toiseen teemaan.
• Ruutu: Valitsee, mikä kyselyn sivu näytetään esikatselussa ja mitkä tiedostot luetellaan muokattaviksi. Ruudut ovat: Kysymys, Kyselylista, Tervetuloa, Valmis, Arvioinnit, Virhe, Tyhjennä kaikki, Lataa, Tallenna, Rekisteröityminen, Tulosta vastaukset, Julkiset tilastot, PDF, Kiintiö ylitetty, Navigointi ja Osallistuja.

Tiedostojen muokkaaminen

Oikealla olevat paneelit luettelevat valitun ruudun käyttämät tiedostot:

• Näytön osien tiedostot: Sivun rakentavat Twig-mallit.
• JavaScript-tiedostot
• CSS-tiedostot
• Muut tiedostot: Kuvat, fontit ja muut teeman tiedostot.

Avaa tiedosto muokkaimessa napsauttamalla sen nimeä. Tiedostot, joissa on merkintä Peritty, tulevat emoteemasta. Voit silti muokata perittyä tiedostoa: muokkaimen alla oleva painike on silloin Kopioi paikalliseen teemaan ja tallenna muutokset, ja tallentaminen kopioi tiedoston teemaasi muutoksinesi. Tästä lähtien käytetään omaa kopiotasi emoteeman tiedoston sijaan.

Teemaasi kuuluvissa tiedostoissa on Nollaa-painike. Nollaus poistaa kopiosi, jolloin emoteeman tiedostoa käytetään taas.

Tiedostojen lataaminen

Käytä Muut tiedostot -paneelin alaosassa olevaa latauskenttää lisätäksesi teemaasi kuvia, fontteja tai muita tiedostoja. Ladatut tiedostot tallennetaan teeman files/-kansioon. Oletuksena voit ladata kuvia (gif, ico, jpg, jpeg, png) sekä näitä tiedostotyyppejä: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq ja lsg. Ylläpitäjäsi voi muuttaa näitä luetteloita config.php-tiedoston asetuksilla allowedthemeimageformats ja allowedthemeuploads.

Jos haluat näyttää ladatun kuvan Twig-tiedostossa, käytä image()-funktiota:

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

Viittaa CSS-tiedostoissa ladattuihin tiedostoihin polulla, joka on suhteessa css-kansioon, esimerkiksi url('../files/background.jpg').

Esikatselu

Muokkaimen alapuolella oleva esikatselu näyttää valitun näkymän esimerkkisisällöllä. Painikkeilla Matkapuhelin, 640x480, 800x600, 1024x768 ja Täysi voit tarkistaa sivun eri näyttökoilla.

Esikatselussa käytetään esimerkkitietoja, eikä se välttämättä näytä kaikkia tyylejä täsmälleen samalla tavalla kuin oikea kysely. Tarkista muutokset aina myös kyselyn esikatselussa.

Teemojen tuonti ja vienti

• Jos haluat siirtää teeman toiseen LimeSurvey-asennukseen, napsauta teeman muokkaimen työkalupalkissa Vie. Teema ladataan ZIP-tiedostona.
• Jos haluat asentaa teeman ZIP-tiedostosta, siirry kohtaan Asetukset > Teemat ja napsauta Lataa & asenna.

Teeman rakenne

Teeman kansio

Teeman kansio sisältää seuraavat:

• config.xml: Teeman määritystiedosto: nimi, ylätason teema, CSS- ja JavaScript-tiedostot, teeman asetukset ja teeman muokkaimessa näytettävät näkymät.
• views/: Twig-mallipohjat. layout_global.twig on useimpien kyselysivujen pääasettelu. Muita asetteluja käytetään erikoissivuille, esimerkiksi layout_survey_list.twig julkiselle kyselylistalle ja layout_errors.twig virhesivuille. Kansio views/subviews/ sisältää pienemmät mallipohjat, jotka asettelut sisällyttävät.
• css/ ja scripts/: Teeman CSS- ja JavaScript-tiedostot.
• files/: Teeman käyttämät kuvat ja muut tiedostot.
• options/: Teeman asetusten sivu.

Twig-mallipohjat

Mallipohjat saavat kyselyn tiedot muuttujassa aSurveyInfo. Jos haluat nähdä kaiken, mitä se sisältää, ota virheenkorjaustila käyttöön tiedostossa application/config/config.php ja lisää tämä rivi tiedoston layout_global.twig body-elementin loppuun:

{{ dump(aSurveyInfo) }}

Mallipohjissa käytettävistä funktioista kerrotaan sivulla Available Twig functions. Tietoturvasyistä mallipohjat suoritetaan hiekkalaatikossa, joten vain nämä funktiot ovat käytettävissä.

config.xml

Osio <files> luettelee CSS- ja JavaScript-tiedostot, jotka ladataan kyselysivuilla:

• <add> lisää tiedoston. Jos ylätason teemassa on jo samanniminen tiedosto, oma tiedostosi korvaa sen.
• <remove> estää ylätason teeman tiedoston lataamisen.

Ylätason teeman tiedostoja ei tarvitse luetella uudelleen: ne ladataan joka tapauksessa.

LimeSurvey lukee config.xml-tiedoston, kun teema asennetaan, ja tallentaa asetukset tietokantaan. Kun olet muuttanut asennetun teeman config.xml-tiedostoa, siirry kohtaan Asetukset > Teemat, avaa teeman toimintovalikko (⋯) ja napsauta Nollaa ladataksesi tiedoston uudelleen.

Oman CSS:n ja JavaScriptin lisääminen

Jokaisessa valmisteemassa on kaksi tiedostoa, jotka on varattu omalle koodillesi:

• css/custom.css: Ladataan kaikkien muiden CSS-tiedostojen jälkeen, joten sen säännöt ohittavat teeman tyylit.
• scripts/custom.js: Ladataan teeman oman JavaScriptin jälkeen.

Kun laajennat teemaa, nämä ovat muokattavat tiedostot. Lisää CSS-koodisi tiedostoon custom.css sen sijaan, että muokkaisit teeman pääasiallisia CSS-tiedostoja, jotta teemasi saa edelleen ylätason teeman päivitykset.

Jos haluat lisätä tiedostoja, lataa ne ja luettele ne teemasi config.xml-tiedoston osiossa <files>. Käytä tiedostonimeä, jota ei ole ylätason teemassa, muuten tiedostosi korvaa ylätason teeman tiedoston:

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

Kyselysivut ladataan oletuksena Ajaxilla, joten selain ei lataa koko sivua uudelleen, kun osallistuja siirtyy seuraavalle sivulle. Suorita JavaScriptisi sekä ensimmäisen sivun latauksessa että jokaisessa Ajax-sivun latauksessa:

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

Kysymysten tyylittely CSS:llä

Kaikki tämän osion esimerkit lisätään teemasi custom.css-tiedostoon.

Sivuluokat

Elementeillä <html> ja <body> on luokkia, joiden avulla voit tyylitellä kokonaisia sivuja:

• html: Kielikoodi (esimerkiksi en) ja tekstin suunta (dir-ltr tai dir-rtl).
• body: Teeman ja jokaisen ylätason teeman nimi (esimerkiksi fruity_twentythree), fontti (esimerkiksi font-ibm-sans), kieli (esimerkiksi lang-en) sekä brand-logo, kun logo näytetään.

Kysymyssäiliön luokat

Jokainen kysymys on kääritty elementtiin, jonka luokka on question-container. Sillä on lisäksi seuraavat luokat:

• Kysymystyypin luokka (katso alla oleva taulukko).
• mandatory: Kysymys on pakollinen tai pehmeästi pakollinen.
• input-error: Vastaus ei läpäissyt validointia tai pakolliseen kysymykseen ei vastattu.
• missing: Kysymyksessä on edelleen vastaamattomia osia ja osallistuja on jo siirtynyt sen ohi.
• ls-hidden ja ls-irrelevant: Kysymys on piilotettu sen ehdon perusteella.
• ls-hidden-attribute: Kysymys on piilotettu sen asetuksella "Piilota kysymys aina".
• Kaikki kysymyksen asetukseen CSS-luokka/luokat (kohdassa Näytä) syötetyt luokat. Käytä tätä yksittäisten kysymysten tyylittelyyn.

Esimerkiksi pakollinen Lista (radiopainikkeet) -kysymys, johon ei ole vastattu:

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

Kysymystyyppien luokat

Kysymyksen tyyppi	Luokka	Tyyppikoodi
5 pisteen valinta	.choice-5-pt-radio	5
Taulukko	.array-flexible-row	F
Taulukko (5 pisteen valinta)	.array-5-pt	A
Taulukko (10 pisteen valinta)	.array-10-pt	B
Taulukko (Kasvata/Sama/Pienennä)	.array-increase-same-decrease	E
Taulukko (Numerot)	.array-multi-flexi	:
Taulukko (tekstit)	.array-multi-flexi-text	;
Taulukko (Kyllä/epävarma/ei)	.array-yes-uncertain-no	C
Taulukko sarakkeen mukaan	.array-flexible-column	H
Kaksiasteikkoinen ryhmä	.array-flexible-dual-scale	1
Päivämäärä/aika	.date	D
Yhtälö	.equation	*
Tiedoston lähetys	.upload-files	|
Sukupuoli	.gender	G
Hyvin pitkä vapaateksti	.text-huge	U
Kielenvaihto	.language	I
Lista (pudotusvalikko)	.list-dropdown	!
Lista (radiopainikkeet)	.list-radio	L
Lista kommentilla	.list-with-comment	O
Pitkä vapaateksti	.text-long	T
Monivalinta	.multiple-opt	M
Monivalinta kommenteilla	.multiple-opt-comments	P
Useita numeerisia syötteitä	.numeric-multi	K
Useita lyhyitä tekstikenttiä	.multiple-short-txt	Q
Numeerinen syöte	.numeric	N
Sijoitus	.ranking	R
Lyhyt vapaateksti	.text-short	S
Tekstin näyttö	.boilerplate	X
Kyllä/Ei	.yes-no	Y

Kysymyksen osien luokat

Kysymyssäiliön sisällä vastausalue käyttää näitä luokkia. Jotkin niistä riippuvat kysymyksen näyttöasetuksista: esimerkiksi Taulukko (Numerot) käyttää eri luokkia, kun se näyttää valintaruutuja pudotusvalikoiden sijaan.

Luokka	Käyttötarkoitus	Käyttävät (esimerkkejä)
.ls-answers	Elementti, joka sisältää kaikki vastausvaihtoehdot	Kaikki kysymystyypit
.answers-list	Vastausvaihtoehtojen lista tai rivi	Lista (radiopainikkeet), Monivalinta, Sijoitus, useimpien taulukoiden rivit
.subquestion-list, .questions-list	Alikysymysten lista tai taulukko	Taulukot, Useita lyhyitä tekstikenttiä, Useita numeerisia syötteitä
.answer-item	Yksi vastausvaihtoehto tai syöte	Lähes kaikki kysymystyypit
.noanswer-item	"Ei vastausta" -vaihtoehto	Taulukot, 5 pisteen valinta, Lista kommentilla
.question-item	Alikysymys, joka on myös vastaus	Monivalinta, Useita lyhyitä tekstikenttiä, Useita numeerisia syötteitä
.radio-list	Radiopainikkeiden lista tai rivi	Lista (radiopainikkeet), 5 pisteen valinta, Lista kommentilla, radiopainiketaulukoiden rivit
.radio-array	Radiopainikkeiden taulukko	Taulukko, Taulukko (5 pisteen valinta), Taulukko (10 pisteen valinta), Taulukko (Kasvata/Sama/Pienennä), Taulukko (Kyllä/epävarma/ei)
.radio-item	Yksi radiopainike nimiöineen	Lista (radiopainikkeet), 5 pisteen valinta, Lista kommentilla, radiopainiketaulukot
.checkbox-list	Valintalaatikoiden lista	Monivalinta, Monivalinta kommenteilla
.checkbox-array	Valintalaatikoiden taulukko	Taulukko (Numerot) valintalaatikoiden asettelulla
.checkbox-item	Yksi valintalaatikko nimiöineen	Monivalinta, Monivalinta kommenteilla, Taulukko (Numerot) valintalaatikoiden asettelulla
.checkbox-text-item	Valintalaatikko ja tekstikenttä	Monivalinta kommenteilla
.comment-item	Valintalaatikon vieressä oleva kommenttikenttä	Monivalinta kommenteilla
.text-list	Tekstikenttien lista	Useita lyhyitä tekstikenttiä, Useita numeerisia syötteitä
.text-item	Yksi tekstikenttä	Lyhyt, pitkä ja hyvin pitkä vapaateksti, Useita lyhyitä tekstikenttiä, Taulukko (tekstit)
.number-list, .numeric-item	Numeeriset syötteet	Useita numeerisia syötteitä, Numeerinen syöte
.number-array	Numeenisten syötteiden taulukko	Taulukko (Numerot), Taulukko (tekstit)
.text-array	Tekstikenttien taulukko	Taulukko (tekstit), Taulukko (Numerot)
.dropdown-array, .dropdown-list, .dropdown-item	Pudotusvalikkoja sisältävät taulukot, rivit ja solut	Taulukko (Numerot), Kaksiasteikkoinen ryhmä pudotusvalikoilla
.date-item	Päivämääräsyöte	Päivämäärä/aika
.upload-item	Tiedoston lähetyksen alue	Tiedoston lähetys
.answertext	Alikysymyksen teksti taulukon rivillä	Taulukot
.col-answers	Alikysymysten tekstien sarake	Taulukot
.ls-heading	Vastausvaihtoehtojen otsikkorivi	Taulukot
.ls-odd, .ls-even	Vuorottelevat rivit	Taulukot
.ls-label-xs-visibility	Nimiö, joka näkyy vain pienillä näytöillä ja ruudunlukijoille	Taulukoiden solut
.ls-input-group-extra	Syötteen etuliite tai jälkiliite	Lyhyt vapaateksti, Numeerinen syöte, Useita lyhyitä tekstikenttiä, Useita numeerisia syötteitä
.ls-js-hidden	Piilotettu, kun JavaScript on käytössä	Kaksiasteikkoinen ryhmä, Lista (radiopainikkeet)
.ls-no-js-hidden	Piilotettu, kun JavaScript ei ole käytössä	Sijoitus
.ls-js-hidden-sr	Piilotettu, kun JavaScript on käytössä, mutta ruudunlukijat lukevat sen silti	Sijoitus

Kohdassa Lista (radiopainikkeet) "Ei vastausta" -vaihtoehdon luokka on no-anwser-item (juuri tällä kirjoitusasulla) eikä noanswer-item.

Esimerkiksi tämä on Lista (radiopainikkeet) -kysymyksen vastausten HTML-koodi:

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

Validoinnin ja vihjeiden luokat

Validointivihjeillä (kuten "Valitse sopiva vaihtoehto" tai "Anna luku väliltä 1–10") on aina luokka ls-em-tip. Kun osallistuja vastaa, LimeSurvey lisää luokan ls-em-success, kun vihjeen sääntö täyttyy, ja luokan ls-em-error, kun se ei täyty. Näin voit muotoilla nämä kaksi tilaa eri tavoin. Vihjeet, jotka on piilotettu kysymyksen Piilota vihje -asetuksella, saavat luokan hide-tip.

Jokaisella vihjeellä on myös sen tyyppiä vastaava luokka:

Luokka	Vihje
.em_default	Kysymystyypin oletusvihje (esimerkiksi "Valitse sopiva vaihtoehto")
.em_num_answers	Vastausten vähimmäis- tai enimmäismäärä
.em_value_range	Vähimmäis- tai enimmäisarvo
.em_sum_range	Arvojen vähimmäis- tai enimmäissumma
.em_sum_equals	Arvojen summan on oltava annettu kokonaissumma
.em_value_integer	Vain kokonaisluvut sallitaan
.em_numbers_only	Vain luvut sallitaan
.em_other_numbers_only	Vain luvut sallitaan "Muu"-kentässä
.em_other_comment_mandatory	"Muu"-vaihtoehto on valittu, mutta sen tekstikenttä on tyhjä
.em_regex_validation	Vastauksen on vastattava validointimallia
.em_q_fn_validation	Kysymyksen vahvistusyhtälö
.em_sq_fn_validation	Alikysymyksen validoinnin kaava

Oikealta vasemmalle kirjoitettavat (RTL) kielet

Oikealta vasemmalle kirjoitettavilla kielillä <html>-elementillä on luokka dir-rtl, ja valmisteemat lataavat pää-CSS-tiedostostaan RTL-version. Käytä CSS:ssäsi luokkaa .dir-rtl sääntöihin, jotka koskevat vain oikealta vasemmalle kirjoitettavia kieliä.

Vinkit ja niksit

Nämä ohjeet lisätään valmisteemasta laajentamasi teeman custom.css-tiedostoon (tai Twig-tiedostoon, jos niin mainitaan). Korvaa esimerkeissä #c0392b omalla värilläsi.

Vaihda radiopainikkeiden ja valintalaatikoiden väri

Jos haluat käyttää jotakin Fruity TwentyThree -teeman mukana tulevaa väriä, valitse Teemaväri teeman asetuksissa. Teeman asetuksissa voit myös valita toisen Valintakuvakkeen.

Jos haluat jonkin muun värin, lisää CSS-koodia custom.css-tiedostoon. Valmisteemat piirtävät omat radiopainikkeensa ja valintalaatikkonsa selaimen oletuselementtien sijaan, joten värin vaihtaminen tarkoittaa näiden piirrettyjen elementtien muokkaamista.

Fruity TwentyThree:

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

Bootstrap Vanilla, Fruity ja Bootswatch:

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

Varmista, että värin ja taustan välillä on riittävä kontrasti, jotta heikkonäköiset osallistujat näkevät edelleen, mitkä vastaukset on valittu.

Suurenna radiopainikkeita ja valintalaatikoita

Suuremmat radiopainikkeet ja valintalaatikot on helpompi napauttaa puhelimilla ja tableteilla. Tämä toimii kaikissa valmisteemoissa:

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

Lisää Fruity TwentyThree -teemassa myös hieman tilaa radiopainikkeiden ja vastaustekstin väliin:

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

Arvot noin 1,4:ään asti toimivat ilman muita muutoksia. Suuremmilla arvoilla säätimet alkavat mennä päällekkäin vastaustekstin ja taulukon rivien reunojen kanssa pienillä näytöillä, joten niiden ympärille on lisättävä myös enemmän tilaa.

Vaihda edistymispalkin väri

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

Näytä sisältö vain yhdellä kielellä

<body>-elementillä on luokka, joka kertoo nykyisen kielen, esimerkiksi lang-en tai lang-fr. Sen avulla voit näyttää eri sisältöä kielen mukaan, esimerkiksi ohjerivin alatunnisteessa. Lisää kunkin kielen teksti teemasi Twig-tiedostoon, kuten subviews/footer/footer.twig:

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

Piilota sitten muiden kielten tekstit custom.css-tiedostossa:

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

Käytä eri logoa kyselykohtaisesti

Jokaista logoa varten ei tarvita erillistä teemaa. Teeman asetukset voidaan määrittää yksittäiselle kyselylle: avaa kysely, napsauta Teeman asetukset -kohtaa Kyselyn asetukset -valikossa ja valitse toinen Logotiedosto. Katso Teeman asetukset.

Näytä oma favicon

Favicon on pieni kuvake, joka näkyy selaimen välilehdessä ja kirjanmerkeissä. Valmisteemat näyttävät teeman tiedoston files/favicon.ico. Jos haluat käyttää omaa kuvaketta, anna sille nimi favicon.ico ja lähetä se laajentamasi teeman Muut tiedostot -paneeliin. Se korvaa pääteeman kuvakkeen.

Keskitä logo Fruity TwentyThree -teemassa

Ota teeman asetuksissa käyttöön Logo ja lisää sitten tämä custom.css-tiedostoon:

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

Lisää oma logosi julkiseen kyselylistaan

Julkinen kyselylista näyttää oletuksena LimeSurvey-logon. Näin näytät oman logosi:

1. Laajenna Fruity TwentyThree -teema ja avaa oma teemasi teeman muokkaimessa.
2. Lataa logosi Muut tiedostot -paneelissa.
3. Valitse Kyselylista-näkymä ja avaa layout_survey_list.twig.
4. Etsi <div>, joka sisältää rivin {{ include('./ls_logo_svg.twig') }}. Korvaa koko tämä <div> include-rivi mukaan lukien näiden vaiheiden alla olevalla koodilla.
5. Napsauta Kopioi paikalliseen teemaan ja tallenna muutokset.
6. Siirry kohtaan Asetukset > Yleiset asetukset > Yleinen ja valitse teemasi kohdassa Theme for public survey list and error pages.

Käytä lataamasi tiedoston nimeä ja organisaatiosi nimeä vaihtoehtoisena tekstinä:

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

Lisää erotinviiva kaksiasteikkoisiin taulukoihin

Näin piirrät pystyviivan kaksiasteikkoisen ryhmä -kysymyksen kahden asteikon väliin:

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

JavaScript kysymyksissä

Jos haluat suorittaa JavaScriptiä kaikilla kyselysi sivuilla, lisää se teemasi custom.js-tiedostoon (katso yllä).

Voit lisätä skriptin myös yksittäisen kysymyksen tai ryhmän tekstiin. LimeSurvey poistaa skriptit näistä teksteistä, ellei XSS-suodatin ole poissa käytöstä käyttäjällesi. Suodatin ei koske koskaan pääkäyttäjiä. Muiden käyttäjien kohdalla Suodata HTML (XSS suojaus) on poistettava käytöstä kohdassa Asetukset > Yleiset asetukset > Turvallisuushuomautus. Tee tämä vain, jos luotat kaikkiin, jotka voivat muokata kyselyitä. Lisätietoja ja esimerkkejä on sivulla Workarounds: Manipulating a survey at runtime using Javascript.