Témaszerkesztő

Bevezetés

A kérdőívtéma határozza meg, hogyan néz ki a kérdőív a résztvevők számára: az oldalelrendezést, a színeket, a betűtípusokat, a logókat és minden kérdés stílusát. A témák Twig sablonokkal, CSS-sel és JavaScripttel készülnek, CSS keretrendszerként pedig a Bootstrap 5-öt használják.

Sok gyakori módosításhoz egyáltalán nincs szükség kódra. A logót, a színeket, a betűtípusokat és több megjelenítési beállítást a témabeállításokkal lehet módosítani. Az ezen az oldalon ismertetett témaszerkesztőt akkor használja, ha többet szeretne: saját CSS-t vagy JavaScriptet ad hozzá, módosítja egy oldal HTML-kódját, vagy képeket és egyéb fájlokat tölt fel a témájához.

A LimeSurvey a következő alapvető kérdőívtémákkal érkezik:

• Fruity TwentyThree (fruity_twentythree): Az alapértelmezett téma.
• Bootstrap Vanilla (vanilla): Egyszerű alaptéma fejlesztőknek, akik saját Bootstrap-alapú témát szeretnének készíteni.
• Fruity (fruity) és Bootswatch (bootswatch): Mindkettő a Bootstrap Vanilla kiterjesztése.

Az egyes kérdéstípusok megjelenését a kérdéstémák szabályozzák, nem a kérdőívtéma. Egy kérdéstípus HTML-kódjának módosításához hozzon létre egy kérdéstémát.

Mielőtt elkezdi

A témaszerkesztő használatához szüksége van a globális Témák jogosultságra (lásd: globális jogosultságok), vagy szuperüzemeltetőnek kell lennie. A téma kiterjesztéséhez a Létrehozás jog kell, a módosítások mentéséhez a Módosítás, a téma törléséhez vagy egy fájl alapállapotba állításához pedig a Törlés.

  A hibás téma használhatatlanná teheti az összes olyan kérdőívet, amely használja. Mielőtt a témát éles kérdőívben használná, tesztelje a módosításokat a kérdőív előnézetével.

Az alapvető témák nem szerkeszthetők: terjessze ki őket

Az alapvető témák a LimeSurvey-vel együtt frissülnek, ezért nem módosíthatja őket közvetlenül. Testreszabásukhoz terjessze ki a témát. A kiterjesztés létrehoz egy új felhasználói témát, amely mindent örököl a szülőtémától. A témája csak a módosított fájlokat tartalmazza, minden más a szülőtémából származik. Így a témája a szülőtéma LimeSurvey általi frissítésekor is megkapja a hibajavításokat és fejlesztéseket.

Egy téma kiterjesztéséhez:

• Lépjen a Rendszerbeállítások > Témák oldalra, nyissa meg a téma sorának végén lévő műveletmenüt (⋯), és kattintson a Kiterjesztés lehetőségre, vagy
• Nyissa meg a témát a témaszerkesztőben, és kattintson az eszköztár Kiterjesztés gombjára.

Adjon nevet az új témának. A témaszerkesztő ezután megnyitja az új témát.

Hol vannak a témák tárolva

• Alaptémák: themes/survey/ a LimeSurvey telepítésében.
• Felhasználói témák (kiterjesztett, feltöltött vagy importált témák): upload/themes/survey/.

A felhasználói témák fájljait közvetlenül a szerveren is szerkesztheti saját szerkesztőjével. Győződjön meg róla, hogy a webszerver ezután is tudja olvasni és írni a fájlokat, hogy a témaszerkesztőt továbbra is használhassa.

A témaszerkesztő

A témaszerkesztő megnyitásához lépjen a Rendszerbeállítások > Témák oldalra, nyissa meg a téma sorának végén lévő műveletmenüt (⋯), és kattintson a Témaszerkesztő lehetőségre.

Ha alaptémát nyit meg, egy megjegyzés tájékoztatja, hogy ez egy szabványos téma, és egy hivatkozást kínál a kiterjesztéséhez. Megtekintheti a fájljait és az előnézetet, de a módosításokat nem mentheti.

Eszköztár

• Exportálás: A témát ZIP-fájlként tölti le.
• Kiterjesztés: Új témát hoz létre, amely ettől örököl (lásd fent).
• Átnevezés: Átnevezi a témát. Csak felhasználói témáknál érhető el.
• Törlés: Törli a témát. Az alapértelmezettként beállított téma nem törölhető.
• Téma: Átváltja a témaszerkesztőt egy másik témára.
• Képernyő: Kiválasztja, melyik kérdőívoldal látszik az előnézetben, és mely fájlok szerepelnek a szerkeszthető fájlok között. A képernyők: Kérdés, Kérdővlista, Üdvözlő, Befejezett, Értékelések, Hiba, Összes törlése, Betöltés, Mentés, Regisztráció, Válaszok nyomtatása, Nyilvános statisztikák, PDF, A kvótákat túllépték, Navigáció és Résztvevő.

Fájlok szerkesztése

A jobb oldali panelek a kiválasztott képernyő által használt fájlokat listázzák:

• Képernyőrész-fájlok: Az oldalt felépítő Twig sablonok.
• JavaScript fájlok
• CSS fájlok
• További fájlok: A téma képei, betűtípusai és minden egyéb fájlja.

Kattintson egy fájl nevére, hogy megnyissa a szerkesztőben. Az Örökölt jelölésű fájlok a szülőtémából származnak. Az örökölt fájlokat is szerkesztheti: ilyenkor a szerkesztő alatti gomb felirata Másolás helyi témába és a változások mentése, és a mentés a módosításokkal együtt átmásolja a fájlt a témájába. Ettől kezdve a saját másolata lesz használatban a szülő fájlja helyett.

A témájához tartozó fájlokon van egy Alapállapotba gomb. Ez törli a másolatot, így újra a szülőtéma fájlja lesz használatban.

Fájlok feltöltése

A További fájlok panel alján lévő feltöltési mezővel képeket, betűtípusokat vagy más fájlokat adhat a témájához. A feltöltött fájlok a téma files/ mappájában tárolódnak. Alapértelmezés szerint képeket (gif, ico, jpg, jpeg, png) és a következő fájltípusokat töltheti fel: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq és lsg. Az üzemeltető ezeket a listákat a config.php fájl allowedthemeimageformats és allowedthemeuploads beállításaival módosíthatja.

Feltöltött kép Twig fájlban való megjelenítéséhez használja az image() függvényt:

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

CSS fájlokban a feltöltött fájlokra a css mappához viszonyított relatív úttal hivatkozzon, például url('../files/background.jpg').

Előnézet

A szerkesztő alatt az előnézet mintatartalommal mutatja a kiválasztott képernyőt. A Mobil, 640x480, 800x600, 1024x768 és Teljes gombokkal ellenőrizheti az oldalt különböző képernyőméreteken.

Az előnézet mintaadatokat használ, ezért előfordulhat, hogy nem minden stílus jelenik meg pontosan úgy, mint egy valódi kérdőívben. A módosításokat mindig ellenőrizze egy valódi kérdőív előnézetében is.

Témák importálása és exportálása

• Ha egy témát egy másik LimeSurvey-telepítésre szeretne átvinni, kattintson az Exportálás gombra a témaszerkesztő eszköztárán. Ezzel a téma ZIP-fájlként letöltődik.
• Téma ZIP-fájlból történő telepítéséhez lépjen a Rendszerbeállítások > Témák oldalra, és kattintson a Feltöltés és telepítés gombra.

Hogyan épül fel egy téma

Témamappa

A témamappa a következőket tartalmazza:

• config.xml: A téma jegyzékfájlja: név, szülőtéma, CSS- és JavaScript-fájlok, témabeállítások, valamint a témaszerkesztőben megjelenő képernyők.
• views/: A Twig sablonok. A layout_global.twig a legtöbb kérdőívoldal fő elrendezése. Más elrendezések különleges oldalakhoz tartoznak, például a layout_survey_list.twig a nyilvános kérdőívlistához, a layout_errors.twig pedig a hibaoldalakhoz. A views/subviews/ mappa az elrendezésekbe beillesztett kisebb sablonokat tartalmazza.
• css/ és scripts/: A téma CSS- és JavaScript-fájljai.
• files/: A téma által használt képek és egyéb fájlok.
• options/: A témabeállítások oldala.

Twig sablonok

A sablonok az aSurveyInfo változóban kapják meg a kérdőív adatait. Ha látni szeretné a teljes tartalmát, kapcsolja be a hibakeresési módot az application/config/config.php fájlban, majd adja hozzá ezt a sort a layout_global.twig fájlban a body elem végéhez:

{{ dump(aSurveyInfo) }}

A sablonokban használható függvényekről lásd az Elérhető Twig függvények oldalt. Biztonsági okokból a sablonok sandboxban futnak, ezért csak ezek a függvények érhetők el.

config.xml

A <files> szakasz felsorolja a kérdőívoldalakon betöltött CSS- és JavaScript-fájlokat:

• Az <add> hozzáad egy fájlt. Ha a szülőtémában már van azonos nevű fájl, az Ön fájlja felváltja azt.
• A <remove> megakadályozza, hogy a szülőtéma egy fájlja betöltődjön.

A szülőtéma fájljait nem kell újra felsorolnia: azok így is betöltődnek.

A LimeSurvey a téma telepítésekor beolvassa a config.xml fájlt, és a beállításokat az adatbázisban tárolja. Ha módosítja egy telepített téma config.xml fájlját, lépjen a Rendszerbeállítások > Témák oldalra, nyissa meg a téma műveleti menüjét (⋯), és kattintson az Alapállapotba lehetőségre a fájl újratöltéséhez.

Saját CSS és JavaScript hozzáadása

Minden alaptémában két fájl van fenntartva a saját kódja számára:

• css/custom.css: Az összes többi CSS-fájl után töltődik be, így a szabályai felülírják a téma stílusait.
• scripts/custom.js: A téma saját JavaScriptje után töltődik be.

Téma kiterjesztésekor ezeket a fájlokat érdemes módosítani. A CSS-t a téma fő CSS-fájljainak szerkesztése helyett a custom.css fájlhoz adja hozzá, hogy a témája továbbra is megkapja a szülőtéma frissítéseit.

További fájlok hozzáadásához töltse fel őket, és sorolja fel a téma config.xml fájljának <files> szakaszában. Olyan fájlnevet használjon, amely nem létezik a szülőtémában, különben az Ön fájlja felváltja a szülő fájlját:

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

A kérdőívoldalak alapértelmezés szerint Ajaxszal töltődnek be, így a böngésző nem tölti be újra a teljes oldalt, amikor a résztvevő a következő oldalra lép. A JavaScriptet az első oldalbetöltéskor és minden Ajax-oldalbetöltéskor is futtassa:

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

Stíluskérdések CSS-sel

Az ebben a szakaszban szereplő összes példa a téma custom.css fájljába kerül.

Oldalosztályok

A <html> és a <body> elemek olyan osztályokat tartalmaznak, amelyekkel egész oldalakat stílusozhat:

• html: A nyelvkód (például en) és a szövegirány (dir-ltr vagy dir-rtl).
• body: A téma és az egyes szülőtémák neve (például fruity_twentythree), a betűtípus (például font-ibm-sans), a nyelv (például lang-en), valamint a brand-logo, ha a logó megjelenik.

Kérdéstároló-osztályok

Minden kérdést egy question-container osztályú elem fog közre. Ez további osztályokat is hordoz:

• A kérdéstípus osztálya (lásd az alábbi táblázatot).
• mandatory: A kérdés kötelező vagy lágyan kötelező.
• input-error: A válasz nem felelt meg az érvényesítésnek, vagy egy kötelező kérdésre nem érkezett válasz.
• missing: A kérdésnek még vannak megválaszolatlan részei, és a résztvevő már továbblépett rajta.
• ls-hidden és ls-irrelevant: A kérdést a feltétele elrejti.
• ls-hidden-attribute: A kérdést a „Mindig rejtse el ezt a kérdést” beállítás elrejti.
• A kérdés CSS osztály(ok) beállításában (a Megjelenítés alatt) megadott osztályok. Ezzel egyes kérdéseket stílusozhat.

Például egy kötelező, megválaszolatlan Lista (rádiógombos) kérdés:

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

Kérdéstípus-osztályok

Kérdés típusa	Osztály	Típuskód
5 pontos választás	.choice-5-pt-radio	5
Tömb	.array-flexible-row	F
Mátrix (5 alternatívás feleletválasztással)	.array-5-pt	A
Mátrix (10 alternatívás feleletválasztással)	.array-10-pt	B
Tömb (Növekedés/Változatlan/Csökkenés)	.array-increase-same-decrease	E
Tömb (Számok)	.array-multi-flexi	:
Tömb (Szövegek)	.array-multi-flexi-text	;
Tömb (Igen/Talán/Nem)	.array-yes-uncertain-no	C
Tömb oszlopként	.array-flexible-column	H
Két skálás tömb	.array-flexible-dual-scale	1
Dátum/idő	.date	D
Egyenlet	.equation	*
Fájl feltöltése	.upload-files	|
Nem	.gender	G
Óriás szabadszöveg	.text-huge	U
Nyelv kapcsoló	.language	I
Legördülő lista	.list-dropdown	!
Lista (rádiógombos)	.list-radio	L
Lista megjegyzéssel	.list-with-comment	O
Hosszú szabadszöveg	.text-long	T
Többválaszos	.multiple-opt	M
Többválaszos indoklással/megjegyzéssel	.multiple-opt-comments	P
Több számot kérő bemenet	.numeric-multi	K
Több rövid szöveg	.multiple-short-txt	Q
Numerikus bemenet	.numeric	N
Rangsorolás	.ranking	R
Rövid szabadszöveg	.text-short	S
Szövegkijelzés	.boilerplate	X
Igen/Nem	.yes-no	Y

A kérdés részeinek osztályai

A kérdéstárolón belül a választerület ezeket az osztályokat használja. Némelyik a kérdés megjelenítési beállításaitól függ: például a Tömb (Számok) más osztályokat használ, ha legördülő listák helyett jelölőnégyzeteket jelenít meg.

Osztály	Mire szolgál	Használja (példák)
.ls-answers	Az összes válaszlehetőséget tartalmazó elem	Minden kérdéstípus
.answers-list	Válaszlehetőségek listája vagy sora	Lista (rádiógombos), Többválaszos, Rangsorolás, a legtöbb tömb sorai
.subquestion-list, .questions-list	Alkérdések listája vagy táblázata	Tömbök, Több rövid szöveg, Több számot kérő bemenet
.answer-item	Egy válaszlehetőség vagy beviteli mező	Szinte minden kérdéstípus
.noanswer-item	A „Nincs válasz” lehetőség	Tömbök, 5 pontos választás, Lista megjegyzéssel
.question-item	Egy alkérdés, amely egyben válasz is	Többválaszos, Több rövid szöveg, Több számot kérő bemenet
.radio-list	Rádiógombok listája vagy sora	Lista (rádiógombos), 5 pontos választás, Lista megjegyzéssel, rádiógombos tömbök sorai
.radio-array	Rádiógombok táblázata	Tömb, Mátrix (5 alternatívás feleletválasztással), Mátrix (10 alternatívás feleletválasztással), Tömb (Növekedés/Változatlan/Csökkenés), Tömb (Igen/Talán/Nem)
.radio-item	Egy rádiógomb a címkéjével	Lista (rádiógombos), 5 pontos választás, Lista megjegyzéssel, rádiógombos tömbök
.checkbox-list	Jelölőnégyzetek listája	Többválaszos, Többválaszos indoklással/megjegyzéssel
.checkbox-array	Jelölőnégyzetek táblázata	Tömb (Számok) jelölőnégyzetes elrendezéssel
.checkbox-item	Egy jelölőnégyzet a címkéjével	Többválaszos, Többválaszos indoklással/megjegyzéssel, Tömb (Számok) jelölőnégyzetes elrendezéssel
.checkbox-text-item	Jelölőnégyzet szövegmezővel	Többválaszos indoklással/megjegyzéssel
.comment-item	A jelölőnégyzet melletti megjegyzésmező	Többválaszos indoklással/megjegyzéssel
.text-list	Szöveges beviteli mezők listája	Több rövid szöveg, Több számot kérő bemenet
.text-item	Egy szöveges beviteli mező	Rövid, hosszú és óriás szabadszöveg, Több rövid szöveg, Tömb (Szövegek)
.number-list, .numeric-item	Numerikus beviteli mezők	Több számot kérő bemenet, Numerikus bemenet
.number-array	Numerikus beviteli mezők táblázata	Tömb (Számok), Tömb (Szövegek)
.text-array	Szöveges beviteli mezők táblázata	Tömb (Szövegek), Tömb (Számok)
.dropdown-array, .dropdown-list, .dropdown-item	Legördülő listákat tartalmazó táblázatok, sorok és cellák	Tömb (Számok), Két skálás tömb legördülő listákkal
.date-item	A dátumbevitel	Dátum/idő
.upload-item	A fájlfeltöltési terület	Fájl feltöltése
.answertext	Az alkérdés szövege egy tömb sorában	Tömbök
.col-answers	Az alkérdések szövegeit tartalmazó oszlop	Tömbök
.ls-heading	A válaszlehetőségeket tartalmazó fejlécsor	Tömbök
.ls-odd, .ls-even	Váltakozó sorok	Tömbök
.ls-label-xs-visibility	Olyan címke, amely csak kis képernyőkön és képernyőolvasók számára látható	Tömbök cellái
.ls-input-group-extra	A beviteli mező előtagja vagy utótagja	Rövid szabadszöveg, Numerikus bemenet, Több rövid szöveg, Több számot kérő bemenet
.ls-js-hidden	Rejtett, ha a JavaScript aktív	Két skálás tömb, Lista (rádiógombos)
.ls-no-js-hidden	Rejtett, ha a JavaScript nem aktív	Rangsorolás
.ls-js-hidden-sr	Rejtett, ha a JavaScript aktív, de a képernyőolvasók mégis felolvassák	Rangsorolás

A Lista (rádiógombos) kérdésben a „Nincs válasz” lehetőség osztálya no-anwser-item (ezzel a helyesírással) a noanswer-item helyett.

Például így néz ki egy Lista (rádiógombos) kérdés válaszainak HTML-kódja:

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

Érvényesítési és tipposztályok

Az érvényesítési tippek (például „Válasszon egyet az alábbiak közül” vagy „Kérjük, adjon meg egy 1 és 10 közötti számot”) mindig az ls-em-tip osztályt kapják. Amíg a résztvevő válaszol, a LimeSurvey hozzáadja az ls-em-success osztályt, ha a tipp szabálya teljesül, és az ls-em-error osztályt, ha nem teljesül, így a két állapotot eltérően stílusozhatja. A kérdés Tipp elrejtése beállításával elrejtett tippek a hide-tip osztályt kapják.

Minden tipp rendelkezik a típusának megfelelő osztállyal is:

Osztály	Tipp
.em_default	A kérdéstípus alapértelmezett tippje (például „Válasszon egyet az alábbiak közül”)
.em_num_answers	A válaszok minimális vagy maximális száma
.em_value_range	Minimális vagy maximális érték
.em_sum_range	Az értékek összegének minimuma vagy maximuma
.em_sum_equals	Az értékek összegének egy megadott végösszeget kell kiadnia
.em_value_integer	Csak egész számok engedélyezettek
.em_numbers_only	Csak számok engedélyezettek
.em_other_numbers_only	Az „Egyéb” mezőben csak számok engedélyezettek
.em_other_comment_mandatory	Az „Egyéb” lehetőség ki van választva, de a szövegmezője üres
.em_regex_validation	A válasznak meg kell felelnie az érvényesítési mintának
.em_q_fn_validation	Kérdésvalidáló egyenlet
.em_sq_fn_validation	Alkérdés-validáló egyenlet

Jobbról balra író (RTL) nyelvek

A jobbról balra író nyelvek esetén a <html> elem megkapja a dir-rtl osztályt, és az alaptémák a fő CSS-fájljuk RTL változatát töltik be. A csak jobbról balra író nyelvekre vonatkozó szabályokhoz használja a .dir-rtl osztályt a CSS-ben.

Tippek és trükkök

Ezek a megoldások az alaptémából bővített téma custom.css fájljába (vagy ahol jelezzük, egy Twig fájlba) kerülnek. A példákban cserélje le a #c0392b értéket a saját színére.

A választógombok és jelölőnégyzetek színének módosítása

Ha a Fruity TwentyThree témához tartozó színek egyikét szeretné használni, válasszon egy Téma színe értéket a témabeállításokban. A témabeállításokban másik Ikon ellenőrzése elemet is választhat.

Bármely más színhez adjon CSS-t a custom.css fájlhoz. Az alaptémák saját választógombokat és jelölőnégyzeteket rajzolnak a böngésző alapértelmezettjei helyett, ezért a szín módosítása ezeknek a megrajzolt elemeknek a módosítását jelenti.

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 és 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;
}

Tartson elegendő kontrasztot a szín és a háttér között, hogy a gyengénlátó résztvevők is lássák, mely válaszok vannak kiválasztva.

A választógombok és jelölőnégyzetek megnövelése

A nagyobb választógombokat és jelölőnégyzeteket könnyebb megérinteni telefonon és táblagépen. Ez minden alaptémában működik:

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

A Fruity TwentyThree témában adjon némi helyet a választógombok és a válaszszöveg közé is:

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

Az 1,4 körüli értékig további módosítás nélkül működik. Nagyobb értékeknél a vezérlők kicsi képernyőkön átfedésbe kerülnek a válaszszöveggel és a tömbsorok szélével, ezért több helyet is kell hagynia körülöttük.

A folyamatjelző sáv színének módosítása

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

Tartalom megjelenítése csak egy nyelven

A <body> elem rendelkezik az aktuális nyelvet jelölő osztállyal, például lang-en vagy lang-fr. Ezzel nyelvenként eltérő tartalmat jeleníthet meg, például egy súgósort a láblécben. Adja hozzá az egyes nyelvek szövegét a téma egy Twig fájljához, például a subviews/footer/footer.twig fájlhoz:

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

Ezután rejtse el a többi nyelv szövegét a custom.css fájlban:

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

Eltérő logó használata kérdőívenként

Nincs szüksége külön témára minden logóhoz. A témabeállítások egyetlen kérdőívre is megadhatók: nyissa meg a kérdőívet, kattintson a Témabeállítások elemre a Kérdőív-beállítások menüben, és válasszon másik Logo fájl értéket. Lásd: Témabeállítások.

Egyéni favicon megjelenítése

A favicon a böngészőlapon és a könyvjelzőkben megjelenő kis ikon. Az alaptémák a téma files/favicon.ico fájlját jelenítik meg. Saját ikon használatához nevezze el favicon.ico néven, és töltse fel a bővített téma További fájlok paneljén. Ez felülírja a szülőtéma ikonját.

A logó középre igazítása a Fruity TwentyThree témában

Kapcsolja be a Logo beállítást a témabeállításokban, majd adja hozzá ezt a custom.css fájlhoz:

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

Saját logó hozzáadása a nyilvános kérdőívlistához

A nyilvános kérdőívlista alapértelmezés szerint a LimeSurvey logót jeleníti meg. Saját logó megjelenítéséhez:

1. Bővítse a Fruity TwentyThree témát, és nyissa meg a témáját a témaszerkesztőben.
2. Töltse fel a logóját a További fájlok panelen.
3. Válassza ki a Kérdővlista képernyőt, és nyissa meg a layout_survey_list.twig fájlt.
4. Keresse meg azt a <div> elemet, amely a {{ include('./ls_logo_svg.twig') }} sort tartalmazza. Cserélje le ezt az egész <div> elemet, az include sorral együtt, a lépések alatt látható kóddal.
5. Kattintson a Másolás helyi témába és a változások mentése gombra.
6. Lépjen a Rendszerbeállítások > Globális beállítások > Általános oldalra, és válassza ki a témáját a Theme for public survey list and error pages beállításnál.

Használja a feltöltött fájl nevét, alternatív szövegként pedig a szervezete nevét:

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

A fájlfeltöltési előugró ablak módosítása

^{(New in 7.6.0 )} Az előugró ablak, amely akkor nyílik meg, amikor egy résztvevő fájlokat tölt fel egy fájlfeltöltési kérdésben, a survey/questions/answer/file_upload/modal-container.twig Twig fájlból épül fel. A témaszerkesztő nem listázza ezt a fájlt. Az előugró ablak módosításához, például segítő szöveg hozzáadásához, másolja át a fájlt a LimeSurvey telepítés application/views/ mappájából a téma views/ mappájába a szerveren (vagy a téma ZIP fájljába az importálás előtt), a mappaszerkezet megtartásával: views/survey/questions/answer/file_upload/modal-container.twig. Ezután szerkessze a másolatot. A fájlfeltöltési kérdéshez tartozó kérdéstéma is tartalmazhat saját másolatot. Tartsa meg a fájlban lévő rejtett beviteli mezőket és az azonosítókat (ID-ket), mert a feltöltési szkriptnek szüksége van rájuk.

Elválasztó vonal hozzáadása a két skálás tömbökhöz

Függőleges vonal rajzolása a Két skálás tömb típusú kérdés két skálája közé:

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

JavaScript a kérdésekben

Ha JavaScriptet szeretne futtatni a kérdőívei összes oldalán, helyezze el a téma custom.js fájljában (lásd fent).

Szkriptet egyetlen kérdés vagy csoport szövegéhez is hozzáadhat. A LimeSurvey eltávolítja a szkripteket ezekből a szövegekből, hacsak az XSS-szűrő nincs kikapcsolva az Ön felhasználójánál. A szűrő a szuperadminisztrátorokra soha nem vonatkozik. Más felhasználóknál az XSS kiszűrése HTML-ből beállítást ki kell kapcsolni itt: Rendszerbeállítások > Globális beállítások > Biztonság. Ezt csak akkor tegye meg, ha megbízik mindenkiben, aki kérdőíveket szerkeszthet. Részletekért és példákért lásd: Workarounds: Manipulating a survey at runtime using Javascript.