View source for New Template System in LS3.x/hu

<languages />

__TOC__
=Bevezetés=

Ne feledje: a LimeSurvey korábbi verzióiban azokat a fájlokat, amelyek meghatározzák a felmérés megjelenését, színek, betűtípusok, elrendezés és (bizonyos) viselkedés tekintetében, "sablonnak" nevezték. Az új meglátások miatt ezt most "témának" nevezik, míg a sablon például felmérések számára van fenntartva.

Ezen az oldalon megtudhatja, hogyan:

* Használja a LimeSurvey 3.0 új témarendszerét
* Használja az öröklődést saját témáinak kezeléséhez.
* Adjon hozzá egy képet a témához
* Kezelje a felmérések és felmérési csoportok témabeállításait

<hr/>

A LimeSurvey 3 egy teljesen új témamotor-rendszert mutat be, amely a Twig 1.29-en, a Bootstrapen alapul, és lehetővé teszi a téma öröklését és a témabeállításokat. Teljesen eltávolítja a régi cserekulcsszó-rendszert. Így most a frontend HTML 100%-a testreszabható. Például a régi témarendszerben volt egy {ASSESSMENTS} kulcsszó, amelyet a végrehajtás során az értékelési HTML váltott fel. Egy tématervezőnek nem volt módja testreszabni ezt a HTML-t (a JavaScript használatával). Most van egy assessments.twig nevű fájl, amely tartalmazza a HTML létrehozásához szükséges logikát (a Twig nyelven írva). Ezeken az oldalakon néhány magyarázatot adunk az új témamotor használatáról.

<div class="simplebox">[[File:help.png]] Itt nem részletezzük a Twig működését. Ez egy nagyon leegyszerűsített PHP, amely magas szintű biztonságot kínál a „sandbox” rendszernek köszönhetően (erről részletesebben a Theme Engine Core kóddal foglalkozó részben olvashatunk). Ha már ismeri a PHP-t, akkor rendkívül könnyű lesz elsajátítania. Ha nem ismeri a PHP-t, akkor is elég könnyű megtanulnia. Kérjük, tekintse meg a Twig 1.X dokumentációját:
https://twig.symfony.com/</div>

=Szerkesztés az adminisztrátori felület használatával=
==témalista==
Az adminisztrációs irányítópulton van egy mező a témalista eléréséhez:
[[Fájl:Sablonlista.jpg|thumb|800px |center|baseline|border|''A témalista az RC3 friss telepítése után'']]
<br /> 
A lista 5 oszlopra oszlik:
* a téma előnézete: ez csak egy „preview.png” nevű képfájl a téma gyökerében
* a téma „címe”, mint a jegyzékben megadott (config.xml a téma gyökerében)
* a téma leírása: egy karakterlánc a manifestben
* a téma típusa: Alaptéma (a LimeSurvey-vel együtt), Felhasználói téma (hozzáadva a feltöltési könyvtárba), XML téma (nincs betöltve az adatbázisba)
* Kiterjed: ha a téma kiterjeszt egy másik témát, akkor itt megjelenik a neve
* Néhány műveletgomb:
** Telepítés: it betölti egy téma jegyzékét, hogy hozzáadja az adatbázishoz, és elérhetővé teszi a felmérés szintjén történő kiválasztáshoz
** Eltávolítás: törli egy téma konfigurációs bejegyzéseit az adatbázisban
** Témaszerkesztő: it átirányítja a témaszerkesztőbe
** Téma opció: ez vezeti el a témabeállítások globális konfigurációját

==Témaszerkesztő==
<div class="simplebox"> [[File:help.png]] Ez a dokumentáció feltételezi, hogy már tudja, hogyan kell használni a témaszerkesztőt az LS előző verziójában.</div> 
<br> 
A témaszerkesztőt a lehető legközelebb tartottuk az eredetihez. Tehát amikor megnyit egy alaptémát, nem szerkesztheti azt. De most a „másolás” gomb helyett van egy „kiterjesztés gomb”.
<br> 
[[Fájl:Extends default.png|center|baseline|border|''Most '''kiterjeszted''' a témát'']]

====A téma öröklődésének fogalmának gyors áttekintése====

Az LS3-ban egy téma örökölhet egy másik témát, „kibővíthet” egy másik témát. Ez azt jelenti, hogy a témakönyvtár gyakorlatilag üres lesz, csak az eredetitől eltérő fájlok (nézetek, stíluslapok, szkriptek, források stb.) lesznek benne. Ezzel könnyen létrehozhat egy témát a különböző felhasználók számára anélkül, hogy sok különböző témát kellene karbantartania. Például: lehet saját házi témája, majd egy változata egy cégnek (logójával, stílusával, esetleg a honlapjára mutató hivatkozással a láblécben stb.), egy másik verzió egy másik cégnek stb. frissíti a CSS-t vagy az egyéni témája globális elrendezését, akkor minden tőle örökölt téma automatikusan frissül. Vegye figyelembe, hogy az öröklődés rekurzív: egy téma kiterjeszthet egy témát, amely kiterjeszt egy másikat stb.

<div class="simplebox">[[File:help.png]] Ez azt is jelenti, hogy ha kiterjeszti a LimeSurvey egyik alaptémáját, továbbra is profitálhat a frissítésekből.</div>

====Újdonságok a felhasználói felületen====

A LimeSurvey monokróm témájának kiterjesztéséhez lépjen a Téma listára, kattintson a Monokróm téma „Témaszerkesztő” gombra. Ezután kattintson az „extend” gombra, és érvényesítse az új „extends_monochrome” nevet.

Ha most a feltöltési könyvtárba lép (a file/ftp kliensével), látni fogja, hogy létrejött egy új könyvtár: '''upload/themes/extends_monochrome'''
Egy XML fájlt és könyvtárakat tartalmaz , de a legtöbb könyvtár üres. Nincs benne sem nézet, sem CSS, sem JS. De továbbra is kiválaszthatja ezt a témát normálként egy felmérésből, és pontosan úgy fog kinézni, mint a monokróm téma.

[[File:Extends monochrome empty.jpg|center|baseline|border|''A témafa (könyvtár és fájlok) közvetlenül a létrehozása után. Gyakorlatilag üres'']]

<div class="simplebox">[[File:help.png]] Az eredeti témából származó források (jpg, png stb.) a téma kiterjesztésekor másolásra kerülnek. Ennek az az oka, hogy ha helyileg másol egy CSS-fájlt az eredeti témáról, és az ezekre a fájlokra hivatkozik (mint a background-image utasításban), akkor meg kell találnia ezeket a képeket az aktuális téma elérési útjában.</div>

Az expands_monochrome téma témaszerkesztője így néz ki:
[[Fájl:Editing extends monochrome.jpg|center|baseline|border|'' Editing extends_monochrome theme'']]
<br /><br /> 
Nincs nagy különbség a régi témaszerkesztőhöz képest. Soroljuk fel a főbbeket:
<br /> 
* Az '''örökölt''' kulcsszó a fájllistában. Ez azt jelenti, hogy a fájl nem található a témakönyvtárban, és az eredeti témából származó fájl kerül felhasználásra.
[[Fájl:Inherited.jpg|center]]
<br> 
* A főszerkesztő ( [https://ace.c9.io ACE editor ] ) mutatja a kiválasztott fájl tartalmát. A fájlok nem csak HTML-t, CSS-t vagy JS-t tartalmaznak, hanem Twig utasításokat is. Ezek a Twig utasítások lehetőséget adnak arra, hogy logikát toljunk a téma nézeteihez, amelyek korábban mélyen a magban helyezkedtek el, és amelyek most testreszabhatók.
[[Fájl:Twig code in editor.jpg|center|''Some gally kód, a felmérési listához'']]
<br> 
* Ezért most több képernyőtípus érhető el a felső menü legördülő választójában. Olyan oldalakat fog észrevenni, mint például a „Felmérés lista”, „Betöltés”, „Mentés”, „Hiba”, „Regisztráció”, „Értékelések”, „Válaszok nyomtatása”, amelyek korábban nem voltak elérhetők, vagy amelyeket nem igazán tudott előtt testreszabható.
[[Fájl:Newscreens editables.jpg|195px|center|''Most már az összes képernyőt személyre szabhatja'']]
<br /> 
* A fájllista alján található 'tipp' hivatkozás megadja a Twig módot, hogy képet adjon a HTML-ben
[[Fájl:Tip picture.png|605px|középre]]
<br /> 
* A 'Változtatások mentése' gomb a '''Másolás helyi témába és a változtatások mentése''' gomb lesz
[[Fájl:Copytolocal.png|360px|center]]

====Gyors példa: kép hozzáadása ====

A ''Másolás helyi témába és módosítások mentése'' gomb pontosan azt teszi, amit ír: ha szerkeszt valamit a fájlon belül, majd rákattint arra a gombra, a fájl átmásolja a szerkesztett témába, és mentse el a változtatásokat.
<br> 
Például: kattintson a layout_global.twig fájlra, majd közvetlenül a blokktartalom elé ( {% block content %}) adja hozzá a „TESZT” szöveget, és kattintson a gombra. Látható, hogy a fájl címkéje „örökölt”-ről „helyi”-re változott, és a gomb most egy egyszerű gomb '''módosítások mentése'''. 
[[Fájl:After edition.png|center|''közvetlenül a gombra kattintás után'']]
<br> 
Ha megnyit egy fájlkezelőt, és belép a upload/themes/extends_monochrome/views/ könyvtárba, látni fogja, hogy az csak egy fájlt tartalmaz, a layout_global.twig fájlt és a „TEST” karakterláncot.
[[Fájl:Fa globális elrendezéssel arrow.png|center|''Most a fájl jelen van a témában'']]
<br><br> 
Most a véletlenszerű szöveg hozzáadása helyett egy képet adunk hozzá. Ha rákattint a tipp linkjére, akkor azt fogja mondani:
<br> 
Kép használatához .twig fájlban:
'''{{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass" }) }}'''
<br> 
Ha elolvasta a Twig dokumentációját (és ezt most meg kellett volna tennie), akkor tudja, hogy '''{{ function( ) }}<nowiki /> A '''' egy függvény eredményét visszhangozza a képernyőn. Itt a függvény az image( ). 

<div class="simplebox">[[File:help.png]] Ha kíváncsi arra, hogy mit csinál, itt találja meg a kódban (az RC3 verziója): [https://github.com/LimeSurvey/LimeSurvey/blob/f3737a75e428f604d68d2e5ba95e8f3eba /application/core/LS_Twig_Extension.php#L219-L237 image() függvény az RC3-ban]
Ha nem érti a kódot: ne aggódjon, nem kell tudnia, hogyan működik, de miért használja és hogyan kell használni.
</div> 
<br> 
Az image() függvényt két okból érdemes használni:
* A függvénykép végigfut a témán, hogy megtalálja a képet. Ha a témát, amelyen dolgozik, egy másik témára is kiterjesztették, és ha a fájlt oda másolja, ahová a képet beszúrta, de a kép nem a helyi témában van másolva, akkor a téma öröklési fán keresztül keresi, hol ez a kép.
* Az eszközkezelőt fogja használni, így javítja a téma teljesítményét. További információért tekintse meg a Yii Asset Manager dokumentációját: http://www.yiiframework.com/wiki/148/understanding-assets/

<div class="simplebox">
Tehát, hogy képet adjon a témájához:
*, csak töltse fel a szokásos módon a jobb oldali fájlfeltöltővel, majd adja hozzá a kívánt helyre bármilyen gallyfájlban:
'''{ { image('./files/myfile.png') }}'''

* Ha alternatív szöveget szeretne hozzáadni a képéhez (képernyőolvasókhoz és HTML-ellenőrzéshez), adja hozzá:
{{ image('./files/myfile.png'), ''' 'az alternatív szövegem' ' '' }}

* Ha szeretne hozzáadni egy class attribútumot, és hozzá szeretne adni egy azonosítót:
{{ image('./files/myfile.png'), 'az én alternatív szövegem', ''' {"class": "a_nice_css_class ”, „id”: „any_id”} ''' }}
</div>

====Néhány dolog a TO-DO listánkon====
* Adja meg a felhasználóknak, hogy egyéni előnézeti fájlt töltsenek fel magából a szerkesztőből
* Adjon hozzá egy gombot a helyi fájl törléséhez, és visszatérjen a öröklött utasítás
* Csak a CSS-fájlokban használt képet másolja át (másolandó fájlként a manifestben felsorolva)
* Emlékeztessen, hogy az aktuális téma melyik témát terjeszti ki (ha van)

==Témabeállítások==
Az LS3 másik újdonsága a témabeállítások oldala. Mint később látni fogjuk, a téma létrehozói létrehozhatják saját beállításaikat, sőt saját adminisztrátori beállítási oldalukat is. Itt gyorsan meglátjuk, hogyan működik az Alaptémák opcióoldala. A témabeállítások globális szintű eléréséhez: kattintson a „témabeállítások” elemre a témalistában
===Speciális beállítások===


{{QS: Témaszerkesztő – speciális beállítások}}

===Egyszerű lehetőségek===

Az Egyszerű beállítás oldal magából a sablonból származik. Ez egy gallyfájl és néhány javascript segítségével készült a téma /options könyvtárában:
https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Sérült link)
<div class="simplebox"> [[File:help.png]] Ez az oldal témánként teljesen eltérő lehet, és a témaszolgáltatókat erősen javasoljuk, hogy alakítsák ki saját megjelenésüket és hangulatukat.</div>

[[Fájl:Options.png|thumb|750px|center]]
<br><br> 
Az egyszerű beállítási oldal egyszerűen kitölti a speciális űrlapbeviteli adatokat. Megtekintheti az egyszerű oldalon egy beállítás be- vagy kikapcsolásával, és megnézheti, hogyan módosul ennek megfelelően a kapcsolódó bevitel a speciális űrlapon. Például az Alapértelmezett sablon egyszerű beállításainál, ha a Bootswatch témát „Sötét”-re módosítja, majd a speciális beállítások fülére kattint (még mentés nélkül is), látni fogja, hogy a „Cssframework Css” mező megváltozott.

{"csere": [["css/bootstrap.css","css/flatly.css"]]}<br> 
to<br> 
{"csere": [["css/bootstrap.css","css/darkly.css"]]}
<br> 
Itt vannak a különböző egyszerű lehetőségek a Core témákhoz:
*'''Ajax mód:''' A következő oldalt ajax-on keresztül (gyorsabban) vagy oldalújratöltéssel (jobb hibakeresési célra) kell betölteni
*'''Háttérkép:''' ha Igen értékre van állítva, akkor a minta.png nevű kép betöltődik (a Master-ben egy fájlválasztó váltja fel)
*'''Box konténer:''' ha a Nem értékre állítva a kérdések nem lesznek dobozban (tehát a képernyő szélességénél nagyobb tömböket használhatsz)
*'''Brandlogo:''' ha nem értékre van állítva, akkor a kérdőív neve A felső sávban látható, különben kiválaszthatja a fájlkönyvtárban lévő képek egyikét, hogy logóképként használhassa.
*'''Animate body:''' Ha yes-re van állítva, akkor az animációk közül választhat a kérdőív törzsének betöltésekor alkalmazni kell
*'''Animált kérdés:''' ugyanaz a kérdésekkel
*'''Figyelmeztetések animálása:''' Ugyanez a figyelmeztetésekkel
*'''Bootstrap theme:''' Itt kiválaszthat egy betöltendő Bootstrap témát. A Bootswatchtól származnak: https://bootswatch.com/3/
<br> 
Az animációkhoz használt könyvtár az animate.css: https://daneden.github.io/animate.css/
Természetesen a témaszolgáltató hozzáadhat saját animációs könyvtárat vagy egyáltalán nem.

<div class="simplebox">[[File:help.png]] A monokróm témák ugyanazt a bootstrap színtémát használják, mint az adminisztrátori felhasználói felület. Nem a css keretrendszer helyettesítő rendszerét használják, hanem egyszerűen hozzáadnak egy CSS-fájlt. Tehát egy másik módszert mutat be a témaszolgáltatók egyéni témáinak kezelésére.</div>

===Öröklési rendszer===

Az előző részben láthattuk, hogy egy téma kiterjeszthet egy másik témát. Egy témakonfiguráció örökölhet egy másik témakonfigurációt is. Ez azt jelenti, hogy egy adott témához a következő címen lehet konfigurációt megadni 

* globális szinten (amelyet az imént láttunk elérhetővé a témalistáról)
* felmérési csoportszinten
* egy utolsó a felmérés szintjén. 

Minden paraméter egy bizonyos szinten örökölhet a felső szintről: felmérési csoport öröklődése. Először lássuk a felmérés csoport szintjét.

====A felmérés csoport szintjén====

Valóban, az LS3 másik nagy újdonsága a felmérési csoportrendszer. Mostantól különböző csoportokat hozhat létre felmérései szervezéséhez. Az eléréséhez lépjen a felmérés listára, majd kattintson a felmérés csoport fülére:
[[Fájl:Surveygroup.png|thumb|800px|center|''A felmérés csoportok lapja'']]
<br> 
Ebben a listában két műveletgombja van. Ha a csoport üres, törölheti. Egyébként mindig szerkesztheti. A szerkesztés gombra kattintva eléri a Survey Group konfigurációs oldalát:
[[Fájl:Surveygroupedit.png|thumb|800px|center|''Alapértelmezett felmérési csoport szerkesztése'']]
<br> 
Az oldal harmadik lapja a „Sablonbeállítások ehhez a felmérési csoporthoz”. Ha rákattint, ugyanazt a témalistát fogja látni, mint a témalistában, csak itt csak az opció gomb látható (a témaszerkesztő csak a fő listáról érhető el).
<br> 
Most, ha rákattint a Default Template opcióra, ezt fogja látni:
[[Fájl:Option group inherit.png|thumb|800px|center|''A Survey Groupnál a sablon beállításai öröklődnek alapértelmezés szerint'']]
<br> 
* Az '''Mindent örököl''' azt jelenti, hogy az összes konfigurációt a globális konfigurációs szintről örököljük. 
* Ha a '''speciális beállítások oldalra''' lép, látni fogja, hogy az összes mező öröklésre van beállítva.
* Ha a "Nem" gombra kattint a "Mindent örököl" mezőben. egyszerű beállításokat, akkor ismét egy nagyon hasonló oldalt fog látni a globális opciók oldalához. Az egyetlen különbség az, hogy minden mezőben beállíthatja azt, hogy igen, nem vagy öröklődik; és minden legördülő választónak van egy „örököl” értéke. 
[[Fájl:Inherit group.png|thumb|800px|center|''Minden beállításnak lehet öröklött értéke'']]

<div class="simplebox">[[File:help.png]] Egy felmérési csoport lehet egy másik csoport gyermeke. Ebben az esetben a szülőtől örökli.</div>

====A felmérés szintjén====
A felmérés szerkesztésekor a bal oldali sávmenüben egy új bejegyzés jelenik meg: „Témabeállítások”. Ez az aktuális felméréshez kiválasztott téma opcióoldalára vezet. Ugyanazt az öröklési rendszert fogja megtalálni, mint a felmérési csoportban, de ezúttal az öröklés azt jelenti, hogy a beállítás a felmérés felmérési csoportjából öröklődik. 
[[Fájl:Options survey.png|thumb|800px|center|''Téma lehetőségek felmérési szinten'']]

==Példa az esetre==
Tegyük fel, hogy egyetlen témát használ különböző vállalatokhoz (A és B). A kedvencek beállításait globális szinten állíthatja be (pl.: ajax bekapcsolva, test animálása becsúsztatással, riasztások pulzussal). Ezután minden vállalathoz hozzon létre egy felmérési csoportot: egy felmérési csoportot az A vállalathoz, amely a vállalat összes felmérését, és egy felmérést a B vállalat számára, amely a B vállalat összes felmérését tartalmazza. Ezen a szinten beállíthatja csak a logót és a hátteret, és hagyod, hogy a többi opció örököljön. Tehát az A csoport összes felmérése az A vállalat logóját fogja használni, a B csoport összes felmérése pedig a B vállalat logóját. Az A vállalat egyik felméréséhez használhat egy másik hátteret a témával kapcsolatban a felmérésből: egyszerűen módosíthatja a hátteret a felmérés szintjén. Ha valaki a B vállalatnál azt mondja Önnek, hogy a pulzáló riasztás túl agresszív, és valami simábbat szeretne, például egy fade in, akkor egyszerűen módosítsa a riasztási animációt a B felmérési csoport szintjén, és a csoport összes felmérése ezt az animációt fogja használni. Ha az A cég megváltoztatja a logóját, azt az A felmérési csoport szintjén módosíthatja, és ennek a csoportnak minden felmérése az új logót fogja használni.
<br> 
<div class="simplebox"> Ezek a példák az alaptéma aktuális lehetőségein alapulnak. De természetesen, ha Ön témaszolgáltató, vagy ha egy kicsit tud szkriptet írni a twig segítségével, megadhatja saját lehetőségeit. Hozzáadhat például egy „információs lábléc” opciót, ahol olyan adatokat adhat meg, mint a vállalat webhelye vagy egy telefonszám segítségért. Ezután, ha az A vállalat különböző részlegekkel rendelkezik, különböző telefonszámokkal, akkor egyszerűen létrehozhat egy alcsoportot az A felmérési csoport minden részlegéhez. Ezekben a lehetőségekben minden alcsoportnak saját telefonszáma lesz.</div>

= GYIK a téma testreszabásával kapcsolatban =

Itt talál néhány választ a fórumon feltett kérdésekre, amelyek segíthetnek a téma testreszabásában.

==CSS/JS testreszabása: foglalkozzon az eszközkezelővel ("miért nem alkalmazzák a módosításaimat?") ==
<br />

Ha egy téma CSS/JS-ét úgy próbálja frissíteni, hogy közvetlenül szerkeszti a kódot kedvenc szerkesztőjével, meglepődhet, hogy a változtatások nem kerülnek alkalmazásra.

<br />

2.50 óta az LS a Yii eszközkezelőt használja:
[http://www.yiiframework.com/wiki/148/understanding-assets/ Yii Dokumentáció az eszközökről]
<br />

Egy téma CSS/JS fájljait egy tmp/ alkönyvtárba helyezi át egy véletlenszerű karakterlánccal (pl.: "tmp/1ef64ml/"). Tehát ha bármilyen módosítást végez egy css/js fájlon, és közli az eszközkezelővel, a fájlok egy új alkönyvtárba másolódnak új néven, így a felhasználói böngésző gyorsítótára frissül, és az új css/js fájlt látják. . Ellenkező esetben meg kell tisztítaniuk a böngésző gyorsítótárát. 

<br />

Itt a CSS hivatkozások a fejlécben találhatók, amikor az eszközkezelő be van kapcsolva:
<br /> 
[[Fájl:Assets on vanilla.jpg]]
<br /> Mint látható, mindegyik a tmp/ almappákra vonatkozik. 

<br />

Itt a CSS linkek a fejlécben, ha az eszközkezelő ki van kapcsolva:
<br /> 
[[Fájl:Asset off.png]]
<br /> Amint láthatja, a téma valódi fájljaira mutatnak. 

<br />

<div class="simplebox">[[File:help.png]] Természetesen, ha az Eszközkezelő nem tudja, hogy megváltoztatta a fájlt, a régi tmp/könyvtár régi fájlja változatlan marad, és a változtatások soha nem lesznek alkalmazva.</div>

Tehát, amikor egy téma CSS/JS fájlját szerkeszti, számos lehetősége van:
*'''Használhatja az LS témaszerkesztőt:''' az eszközkezelővel foglalkozik, és nem kell törődj bármivel
*'''Bekapcsolhatod a hibakeresési módot:''' kikapcsolja az eszközkezelőt, így a témáid valódi css/js fájljai lesznek meghívva (de akkor frissíteni kell a böngésző gyorsítótárát minden betöltésnél)
* '''Frissítheti az eszközök gyorsítótárát''': a Globális beállítások -> Általános -> Eszközgyorsítótár törlése

[[Fájl:Clearassets-ls3 3.png]]

<div class="simplebox">[[File:help.png]] '''A témaszerkesztő használata az egyéni CSS szerkesztéséhez messze a legjobb megoldás.'''</div>


A témaszerkesztő használata segít megérteni az új témamotor architektúráját.
Ha a testreszabás gyümölcsös, legyen óvatos a CSS-specifikációkkal: a legtöbb definíció a ".fruity" választót használja (az egyik osztály a test elem)

== Egyéni betűtípusok hozzáadása a témámhoz ==
=== Az egyszerű módszer: a Google Font CDN használata ===
Bootswatch Survey Theme a Google Font CDN-t használja. Nézzük meg, hogyan működik:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/cssss/minations/csflatsly.

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

Ezután a Lato betűtípust használja a CSS szabályok:
https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72
<syntaxhighlight lang="css"> 
body {
 ...
 font-family: "Lato";
 ...
}
</syntaxhighlight>

Az egyéni témában így bármilyen google betűtípust használhat. Természetesen el kell távolítania a betűtípus-választót a téma beállításai közül. Törölje ezeket a sorokat az options.twig:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.tw-L2009-L209

=== Helyi betűtípus használata ===
Természetesen letöltheti a betűtípusfájlokat, és használhatja őket a helyi szerverről a Google CDN helyett (jobb az adatvédelem érdekében). A noto font helyi verziója:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/N!css.<syntaxhighlight lang="css"> 
@font-face {
 font-family: 'Noto Sans';
 betűsúly: 300;
 betűstílus: normál;
 src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...
</syntaxhighlight>

Nagyon hasonló definíciót használhat a téma css fájljában, majd a NotoSans-Regular.ttf fájl átmásolásával a téma css/font-src/ mappájába. 

Ezután alkalmazza ezt a betűtípust a testére (vagy bármely más elemre), mint a fenti, és távolítsa el az alapértelmezett betűtípus-választót.

=== Saját betűtípus-választó létrehozása a lehetőségek között ===
Egyelőre nem tudja könnyen használni az alapvető betűtípus-választót saját betűtípus hozzáadására a lehetőségek között. Először is lehetőséget kell adnunk a végfelhasználóknak egyéni csomagok feltöltésére (lásd a következő bekezdést: Bepillantás a Fruity Font Selectorba) 
<br> 
Íme, hogyan tovább:
<br> 
*Adjon hozzá két betűtípust (my_custom_font és my_custom_other_font) a témához CDN vagy helyi szerver használatával 
*Ezután adjon hozzá két új osztályt a css fájlhoz:
<br> 
<syntaxhighlight lang="css"> 
.font-my_custom_font {
 font-family: 'my_custom_font';
}
.font-my_custom_other_font {
 font-family: 'my_custom_other_font';
}
</syntaxhighlight> 
*A téma XML-fájljában adjon hozzá egy betűtípus-beállítást (az alapértelmezett a my_custom_font) :
<syntaxhighlight lang="xml"> 
<options> 
 ....
 <font>my_custom_font</font> 
</options> 
</syntaxhighlight>

* Az option.twig-ben adjon hozzá betűtípusválasztót ezeknek a soroknak a hozzáadásával (egyelőre nem tesztelt, ezért jöjjön panaszkodni a fórumon, ha nem működik):
<syntaxhighlight lang="html"> 
 
<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'> {{ "Saját betűtípusaim" | t }}</div> 
<div class='panel-body'> 
<div class='form-group row'> 
 <label for='simple_edit_font' class='control-label'>{{ "Betűtípus kiválasztása:" | 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 %} //Nem "theme" kellene a "sablon" helyett?
 {% set fontOptions = fontOptions ~ '<option value = "inherit" > Örököl</option> ' %}
 {% endif %}
<optgroup  label="{{ "My Custom fonts" | t }}"> 
<option class="font-my_custom_font"     value="custom_font"   data-font-package=""  > Egyedi</option> 
<option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package=""  > Egyéb</option> 
</optgroup> 
 
</select> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</syntaxhighlight>

<br>
Most a felhasználók választhatnak a két betűtípus közül.

=== Betekintés a Fruity Font Selectorba ===
A jövőben lehetőséget adunk a végfelhasználóknak, hogy feltöltsék saját eszközcsomagjaikat, beleértve a betűtípuscsomagokat is. Nagyon egyszerűvé teszi a betűtípusok testreszabását. 
<br> 
A Yii csomagok megértéséhez:
<br> 
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
<br> 
<br> Az 
LimeSurvey csomagok különböző fájlokban vannak definiálva. A betűtípus-csomagok meghatározása itt található:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
<br> 
Például a Noto betűtípuscsomag itt van definiálva:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php5#3!<br> 
<syntaxhighlight lang="php">

    'font-noto' => array(
 'devBaseUrl' => 'assets/fonts/',
 'basePath' => 'betűtípusok',
 'css' => array(
' noto.css',
 ),
 ),
</syntaxhighlight> 
<br> 
A benne található noto.css fájl itt található:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/N!noto.css!<br> 
Vegye észre a css osztály ".font-noto" definícióját a végén:
<syntaxhighlight lang="css"> 
@font-face {
 font-family: 'Noto Sans';
 ...
}
...
.font-noto{
 font-family: 'Noto Sans';
}

</syntaxhighlight>
<br> 
Ezután a Vanília témában a noto betűtípus használatos a noto csomag hozzáadásával és a noto:!N betűtípus beállításának megadásával!<br> 
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79

<syntaxhighlight lang="xml">
<packages> 
 ....
<add> font-noto</add> 
</packages> 
</syntaxhighlight > 
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58
<br> 
<syntaxhighlight lang="xml"> 
<options> 
 ....
 <font>nem</font> 
</options> 
</syntaxhighlight> 
<br> 
Ezután a törzsosztály-betűtípust a következő értékkel határozzuk meg:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanillaN/global7/t!<syntaxhighlight lang="html"> 
<body class=" ...  font-{{  aSurveyInfo.options.font }} ... " ... > 
</syntaxhighlight>

Természetesen az XML-fájl csak a témakonfiguráció alapértelmezett értékeit tartalmazza. Valójában azonban ezek az értékek az adatbázisban ("template_configuration" tábla (Kérdés: "theme_" "template_"?)) json-karakterláncként vannak definiálva és olvasva. Az option.js fájl csak az egyszerű beállítás betűtípus-választójának értékét használja. az érték módosításához a speciális lap űrlapon belül:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js

Így amikor az „eszközcsomag feltöltése” funkció elérhető lesz, könnyen hozzáadhat egy szkriptet, amely átvizsgálja az összes meglévő fontcsomagot, hogy hozzáadja azokat a választóhoz.

== Témabeállítások hozzáadása a felmérési elemek elhelyezésének és megjelenítésének vezérléséhez ==
Ez az oktatóanyag bemutatja, hogyan adhat hozzá opciókat egy kiterjesztett témához a felmérési elemek különböző helyeken történő megjelenítéséhez. Ebben az esetben témalehetőségeket hozunk létre, hogy a felmérés címét két különböző helyen jelenítsük meg.
<div class="simplebox"> [[File:help.png]] Az egyszerűség kedvéért az oktatóanyagot a LimeSurvey 3.4.3-as verziójában található "bootswatch" téma kiterjesztésére fogjuk alapozni.</div> 
=== Hozzon létre egyéni témát ===
#Bővítse ki a "bootswatch" témát a fent leírtak szerint.
#Másolja <span style="color: #BA2121;">a custom.css fájlt</span> a helyi témába a fent leírtak szerint.
===Létrehozása new theme options===
#Másolja <span style="color: #BA2121;">a /themes/survey/bootswatch/options/</span> tartalmát a <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/options/</span> .
#Open <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/ options/options.twig</span> egy szerkesztőben, és keresse meg a „{# Bootstrap Bootswatch téma #}” elemet. Közvetlenül a szülője előtt<nowiki><div class='row'></nowiki> elemet, add hozzá ezt:<syntaxhighlight lang="html"> 
 {# Egyéni felmérés neve a navigációs sávban #}
<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'>A felmérés neve a navigációs sávban</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'/> 
 Igen
</label> 
 <label class="btn btn-default">
 <input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> 
 Nem!</label> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class='row'> 
<hr/> 
</div>

		{# Egyéni felmérés neve a folyamatjelző alatt #}
<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'>A felmérés neve folyamatjelző sáv alatt</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'/> 
 Igen
</label> 
 <label class="btn btn-default">
 <input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> 
 Nem!</label> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class='row'> 
<hr/> 
</div></syntaxhighlight> 
#Nyissa meg <span style="color: #BA2121;">a /upload/themes/survey/yourThemeName/config.xml</span> fájlt, és adjon hozzá két elemet az "opciók" blokkhoz, hogy így nézzen ki:<syntaxhighlight lang="xml"><options> 
<ajaxmode> tovább</ajaxmode> 
 ...
<surveyname1> tovább</surveyname1> 
<surveyname2> tovább</surveyname2> 
</options></syntaxhighlight> 
#Ez két új lehetőséget biztosít a Témabeállítások képernyőn, például:<br /> [[Fájl:Tutorial_tp_1_1.png]]

===Módosított nézet a felmérés címéhez a navigációs sávban===
#Hozzon létre egy új könyvtárat <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/views/subviews/header/</span> .
#Másolás <span style="color: #BA2121;">/themes/survey/vanilla/ views/subviews/header/nav_bar.twig</span> az új könyvtárba.
#Nyissa meg <span style="color: #BA2121;">a /themes/survey/vanilla/views/subviews/header/nav_bar.twig-ot</span> , és keresse meg a „{# Logo option #}” elemet. Ez alatt módosítsa az embléma/felmérésnév IF utasítását, így az így néz ki:<syntaxhighlight lang="html"> 
 {# Logóopció #}
 {% 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 %}</syntaxhighlight> 
#Adjon hozzá ehhez hasonlót <span style="color: #BA2121;">a /upload/themes/survey/yourThemeName/css/custom.css</span> fájlhoz:<syntaxhighlight lang="css"> .navbar-brand {
 vonalmagasság: 60 képpont;
 betűméret: 32 képpont;
}</syntaxhighlight> 
#Váltsa a "Felmérés neve a navigációs sávban" témabeállítást "Igen"-re
#Ezt kell látnia:<br /> [[File:Tutorial_tp_1_2.png]]
===Módosított nézet a felmérés címéhez a folyamatjelző sáv alatt===
#Hozzon létre egy új könyvtárat <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews</span> .
#Másolja a <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig-ot</span> az új könyvtárba.
#Nyissa <span style="color: #BA2121;">meg a /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container .twig</span> és adjunk hozzá egy<nowiki><h1></nowiki> elem a felmérés nevéhez. Tehát így néz ki: <syntaxhighlight lang="html"><div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}>
 
 {# Egyéni felmérés neve #}
 {% if( aSurveyInfo.options.surveyname2 == "on") %}
<h1 class="custom-survey-name"> {{ aSurveyInfo.name }}</h1> 
 {% endif %}
 
 {# Csoportnév #}
 {{ include('./subviews/survey/group_subviews/group_name.twig') }}
 
 {# Csoportleírás #}
 {{ include('./subviews/survey/group_subviews/group_desc.twig') }}
 
 {#
 MUTASD EL A KÉRDÉSEKET
 
 Ez a fő rész. Ez minden kérdést megjelenít a csoport számára
 #}
 
<!-- PRESENT THE QUESTIONS --> 
 {% aQuestion in aGroup.aQuestions %}
 {{ include('./subviews/survey/question_container.twig') }}
 {% endfor %}
 
<!-- Hidden inputs --> 
 {% if aGroup.show_last_group == igaz %}
<input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' /> 
 {% endif %}
 
 {% if aGroup.show_last_answer == igaz %}
<input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' /> 
 {% endif %}
</div></syntaxhighlight> 
# Adjon hozzá ehhez hasonlót <span style="color: #BA2121;">a /upload/themes/survey/yourThemeName/css/custom.css</span> fájlhoz:<syntaxhighlight lang="css"> .navbar-brand {
 line-height: 60ph1.custom-survey-name {
 margó: 0;
 text-align: center;
}</syntaxhighlight> 
#Váltsa a "Felmérés neve a folyamatjelző alatt" téma opciót "Igen"-re
#Ezt kell látnia:<br /> [[Fájl:Tutorial_tp_1_3.png]]

===Letöltések===
* Minta kiterjesztett téma: [[Média:Test_survey_names.zip]]

=Téma létrehozása a semmiből=
Hamarosan érkezik a dokumentáció.

Egyelőre csak néhány tippet adok.

==Téma felépítése==

=== Fájlok és könyvtárak ===
Amikor témát a semmiből hoz létre, nem kell tiszteletben tartania a Vanilla fájl/könyvtár szerkezetét/css/js-t. 
A kötelező css/js-t mag adja hozzá (szükség esetén még eltávolíthatja)

A témának csak az elrendezési fájlokat kell tartalmaznia:

* '''layout_global.twig''' : az oldalak megjelenítése felmérés készítéséhez
* '''layout_survey_list.twig''' : a felmérési lista megjelenítése (ha ez a téma alapértelmezettként van beállítva)
* '' 'layout_errors.twig'': olyan hibák megjelenítésére szolgál, amelyek blokkolják a felmérés megjelenítését. ( rossz felmérési azonosító, üres csoport az előnézeti csoportban stb.)
* '''layout_user_forms.twig''': megjeleníti a felhasználói űrlapokat, például: token (felmérés résztvevője), és regisztráljon.
* '' 'layout_print.twig'' : a kérdőív pdf-be történő nyomtatására szolgál
* '''layout_printanswers.twig''': a válaszok kinyomtatása

A fájlok tartalma, a bennük lévő fájlok vagy nem, teljes mértékben Önön múlik. 
Az összes többi fájl és könyvtár, amelyet a Vanilla-n talál, teljesen opcionális, nyugodtan rendezze a kódot a kívánt módon.

<div class="simplebox">[[File:help.png]] Ha elolvassa a frontend renderelő kódot, látni fogja, hogy ezek a fájlnevek közvetlenül megjelennek benne. Ezért kötelezőek. 
Pl.: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462
</div>

=== Tartalom ===

A Vanilla layout_global.twig fájljában látni fogja, hogy az „include_content” nevű változót használjuk annak eldöntésére, hogy mit jelenítsünk meg! layout_global.twig#L114-L115

<syntaxhighlight lang="php">
 {% set sViewContent = './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
 {% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %}
</syntaxhighlight>

Az aSurveyInfo.include_content megmondja, milyen művelet folyik jelenleg: kérdéseket jelenít meg? beküldési eredményt mutat? mindent tisztán mutat? stb
Amint láthatja, vaníliában egyetlen fájlt hozunk létre, amelyet cselekvéssel kell beilleszteni. Tehát ha tudni szeretné a műveletek listáját, csak ellenőrizze a vanília '''views/subviews/content''' könyvtárát, és távolítsa el a "gally" kiterjesztést :
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'' ' 
* '''válaszok kinyomtatása.twig''' 
* '''kvóták.twig''' 
* '''register.twig''' 
* '''save.twig '''' 
* '''beküldés_előnézet.twig''' 
* '''submit.twig''' 
* '''felhasználói formák.ágak''' 

Ha már létrehozott egy őket a LimeSurvey 2.x verziójához, akkor észre fogja venni, hogy a legtöbbjük megfelel a limesurvey 2.x régi pstpl fájljainak. 
Még egyszer, a témában nem köteles létrehozni ezeket a fájlokat ebben a könyvtárban ezekkel a nevekkel. Például egyszerűen hozzáadhat egy óriási kapcsolót a layout_global.twig fájlhoz a kívánt HTML-kóddal minden egyes művelethez.

=== A jegyzék config.xml ===

A téma manifestje tartalmazza a témával kapcsolatos fő információkat. Amikor telepít egy témát, a jegyzék tartalma betöltődik az adatbázisba, két különböző táblába: template és template_configuration. Tehát minden alkalommal, amikor módosítja egy téma jegyzékét, el kell távolítania, majd újra kell telepítenie (vagy egyszerűen vissza kell állítania). Mivel ez a folyamat bosszantó a téma fejlesztése során, kényszerítheti az XML-fájl közvetlen használatát a DB-bejegyzések helyett. Ehhez kapcsolja be a config.php-ben a hibakeresési módot, és a 'force_xmlsettings_for_survey_rendering' értéket igazra állítja.

==== A metaadatok szakasz ====

Semmi bonyolult: csak a témával kapcsolatos főbb információk. A templates_configuration táblába kerül  

<syntaxhighlight lang="xml">
<metadata> 
<name> a_téma_neve</name> 
<title> A téma címe</title> 
<creationDate> 2017.10.16</creationDate> 
<author> A neved</author> 
<authorEmail> your@email.org</authorEmail> 
<authorUrl> http://www.yourwebsite.org</authorUrl> 
<copyright> Az Ön szerzői joga</copyright> 
<license> A téma licence</license> 
<version> témája verziója</version> 
<apiVersion> 3</apiVersion> 
<description> A téma leírása</description> 
<extends> szülő_téma</extends> 
</metadata> 
</syntaxhighlight>


Néhány megjegyzés:
* '''name''': kulcsként lesz használva a db-ban. Tehát egyedinek kell lennie, és nem tartalmazhat speciális karaktereket (szóközök nélkül). Ne feledje, hogy az eseteket nem vesszük figyelembe
* '''Cím''': a téma nevének megjelenítésére szolgál a különböző listákban. Különleges karaktereket tartalmazhat
* '''leírás''': a felmérés téma fő listájában lesz használva. Tartalmazhat speciális karaktereket, sőt HTML kódot is az 
* használatával '''extends''': opcionális, ez határozza meg a szülőtémákat. Tehát ha valamelyik fájl nem található ebben a témában (twig/js/css/jpg stb.), akkor a szülőtémában keresi


<div class="simplebox">[[File:help.png]] Ha kiterjesztette a 3 alaptéma (Vanília, Bootswatch, Fruity) egyikét, módosíthatja az „extends” értéket egyik szülőtémáról a másikra. Természetesen vissza kell állítania a témát.</div>





==== A fájlok szakasz ====

Ez egy fontos. A template_configuration táblában, a files_css, files_js, files_print_css mezőben json tömbként kerül leküldésre.  

Pl.: a Material Premium téma fájlok része:

<syntaxhighlight lang="xml">
<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> 
</syntaxhighlight>

Az ebben a részben található összes CSS/JS fájl betöltődik a felmérés indításakor (ajax módban. Ha az ajax mód ki van kapcsolva, akkor természetesen az összes fájl újratöltésre kerül minden oldalon). 


A téma neve alapján hozzáadódnak egy Yii Asset Packethez. Tehát amikor az Asset Manager be van kapcsolva (a hibakeresési mód ki van kapcsolva), ezek a fájlok a tmp könyvtárba másolódnak a témával együtt (így a CSS-ben és a JS-ben a relatív elérési utat használhatja a képfájlok eléréséhez). 
A Yii eszközkezelőjéről: https://www.yiiframework.com/wiki/148/understanding-assets 
A Yii csomagjairól: http://www.yiiframework.com/doc/api/1.1 /CClientScript#packages-detail


Az öröklési rendszert fogják használni. Ez azt jelenti, hogy ha hozzáad egy CSS/JS fájlt egy témához, de az nincs benne a témában, akkor a motor megvizsgálja ennek a témának az összes alaptémáját, és az első talált fájlt használja. Tehát ha egy felhasználó kiterjeszti a témát a témaszerkesztővel, akkor az összes fájl öröklődik a témájában. A kulcsszavak erre az öröklési rendszerre utalnak.


* '''add''' : hozzáadja a fájlt a témához és az összes örökölt témához
* '''replace''': lecseréli az anyatéma fájlját
* '''remove''': eltávolítja a fájlt a ''''bármely''' csomagból, még az alapcsomagból is (3.14 óta)

<div class="simplebox">[[File:help.png]] Ne feledje, hogy a config.php fájlban beállíthatja a 'force_xmlsettings_for_survey_rendering'-et, hogy a konfiguráció XML-ből legyen beolvasva DB helyett (nincs szükség alaphelyzetbe állításra). Ez megkönnyíti az XML fájlok módosításainak tesztelését, és elkerüli a téma eltávolítását/újratelepítését az XML minden egyes módosításakor.</div>


Néhány megjegyzés a kulcsszavakhoz: 


===== Öröklődési tippek =====
Amint azt korábban kifejtettük, az "add" kulcsszó utalhat egy fájlra, amely az egyik alaptémában található. Tehát "hozzáadhat" egy fájlt ebben a szakaszban, de ez a fájl továbbra sem szerepel a témában, hanem az egyik szülőtémájában. A motor megvizsgálja az összes szülőtémáját, és az elsőt fogja használni. Ha nem találja a fájlt, és a hibakeresési mód be van kapcsolva a konfigurációban, és a js frontend hibakeresési mód be van kapcsolva globális beállításban, a konzolon egy üzenet figyelmeztet. Pl.: ha hozzáadunk egy my_theme-et:<add> css/unexisting.css</add> , a konzolon látni fogjuk:

<syntaxhighlight lang="">
 (¯`·._.·(¯`·._.· Témakonfigurációs hiba ·._.·´¯)·._.·´¯) 

A 'css/unexisting.css' fájl nem található a 'my_theme' témában 
</syntaxhighlight>

Ha a hibakeresési mód ki van kapcsolva, akkor semmilyen hiba nem jelenik meg. A motor figyelmen kívül hagyja a rossz hozzáadási utasításokat.



===== Mikor használja az add, mikor használja a helyettesítést, mikor hagyhatom csak a szülőtémára? =====

Először is: a hozzáadás és a csere ugyanaz a kulcsszó. Használhatja az egyiket vagy a másikat, a motor is ezt fogja tenni. Az emberi olvasók számára különállóak, így megértik, mi volt a szándékod. 


Nem adhat hozzá olyan fájlt, amely megegyezik az anyateémával: mindig lecseréli. pl.: Ha van egy "anyám_téma/foo.css" nevű fájlja, és hozzáad egy "foo.cs" nevű fájlt a leánytémához, akkor csak a "lánya_téma/foo.css" lesz hozzáadva a témához. Ha meg szeretné tartani a „my_mother_theme/foo.css” címet, csak válasszon másik nevet a „lánya_téma/foo.css” számára, például „lánya_téma/bar.css”. Tehát az "add" kulcsszó használható "csere" kulcsszóként. 


Ha kíváncsi rá, hogy miért: ez nagyban megkönnyíti az örökölt téma automatikus generálását, a fájlrész másolása már a dobozból működik (nem kell átnevezni az „add”-t „replace”-re a fájl kiterjesztésekor). 


Hogy egyértelmű legyen, vegyük a Fruity példáját. Itt a css fájl része:


<syntaxhighlight lang="xml">
<css> 
<add> css/variations/sea_green.css</add> 
<replace> css/animate.css</replace> 
<replace> css/theme.css</replace> 
<replace> css/custom.css</replace> 
</css> 
</syntaxhighlight>


Ha gyümölcsösen nézzük a custom.css fájlt, az pontosan ugyanaz, mint a vaníliás. A custom.css fájlt a fruity belsejében törölhetnénk, a vaníliás betöltődik. Eltávolíthatnánk az állítást<replace> egyéni.css</replace> a Fruity manifestből a vanilla utasítás kerül felhasználásra, és a vanilla custom.css betöltődik. 


Miért használjuk tehát az állítást<replace> egyéni.css</replace> a gyümölcsös manifeszten belül? A válasz egyszerű: mert azt akarjuk, hogy a végfelhasználó kiterjeszthesse a gyümölcsös témát, módosíthassa a fájlt a helyi témájában, és betölthesse ezt a módosított fájlt az örökölt témájából. Ahhoz, hogy megértsd, csak bővítsd gyümölcsösen, és nézd meg a kiterjesztett témát. A kiterjesztett témában még a custom.css fájl sem található. Tehát a gyümölcsöst használjuk. De: ha a felhasználó létrehozza ezt a fájlt a kiterjesztett témában (a témaszerkesztőben az "extend" gombra kattintva), akkor ez a fájl betöltődik a témájából. 


Tehát általánosságban: 
ha a semmiből hoz létre egy témát anélkül, hogy kiterjesztené a témát, csak használja az add utasítást a css/js fájlok hozzáadásához. Egyszerűen.
ha egy másik témát kiterjesztő témát hoz létre, és nem szeretné, hogy a felhasználók kiterjeszthessék a css/js fájlt az anya témáról: ne használja az add utasítást a manifestben. A fájlok továbbra is az anyatema konfigurációból töltődnek be.
ha egy másik témát kiterjesztő témát hoz létre, és le szeretne cserélni egy fájlt az alaptémáról: használja a csere kulcsszót (az add kulcsszónak ugyanaz lesz az eredménye) 
ha egy másik témát kiterjesztő témát hoz létre, ha nem cserél le egy adott fájlt css/js-ből, de szeretné, hogy a felhasználók kibővíthessék ezt a fájlt: akkor használja a "replace" utasítást a manifestben ez a fájl. Még ha nem is cseréli ki a fájlt, a jegyzékben szereplő csere kulcsszó használatával engedélyezi a felhasználónak, hogy megtegye, ha meg akarja tenni.  


Csak ez a legutolsó eset igényel egy kis szellemi torna megértését, a többi eset triviális.



<div class="simplebox">[[File:help.png]] 
CSS és JS fájlokat közvetlenül is regisztrálhat a gally kódból. Ezek a fájlok csak akkor töltődnek be, amikor a gallyfájlt kérik. Ha azt szeretné, hogy a felhasználók örökölhessék ezeket a JS/Css fájlokat a témaszerkesztőből, ne felejtse el használni a {{registerTemplateCssFile('my_style.css')}} és a {{registerTemplateScript('my_script.js')}} függvényeket. . Ha nem használja ezeket a funkciókat, a téma működhet, de az öröklődés megszakad. Ugyanaz a logika, mint a {{image('my_picture.jpg')}} függvény
</div>

===== Az eltávolítás kulcsszó =====

Az eltávolítás kulcsszó csak 3.14 óta érhető el. Ezzel bármilyen css-t/fájlt eltávolíthat bármelyik csomagból, még az alapvető csomagokból is. A Material Premium Theme programban az Awseome Bootstrap Checkbox fájljainak eltávolítására szolgál:

<syntaxhighlight lang="xml">
<remove> awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove> 
</syntaxhighlight>

ezért ugyanazt a szintaxist kell használnia, mint a csomag fájljának (pl.: "awesome-bootstrap-checkbox.css" önmagában a mappa elérési útja nélkül nem működne). Az alapvető csomagok és fájljaik teljes listája a /application/config/packages.php és a config/third_party.php fájlokban található. Például: awesome-bootstrap-checkbox.css:
https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/5-L64.

<syntaxhighlight lang="php">
 'css'=> array(
 'wesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
 ),
</syntaxhighlight>


Az eltávolítási címkében használandó pontos név megtalálásának másik módja az eszközkezelő bekapcsolása (a hibakeresési mód kikapcsolása vagy a „use_asset_manager'=>true” beállítás a konfigurációban). Ezután a használandó elérési út közvetlenül a tmp könyvtár véletlenszerű könyvtára utáni lesz. Például az awesome-bootstrap-checkbox.css:
<syntaxhighlight lang="html"> 
 <link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" /> 
</syntaxhighlight>

Fájlok, amelyeket nem szabad eltávolítani:

'''jquery-3.1.1.min.js''' : szükséges

'''jquery-migrate-3.0.0.min.js''' : szükséges

'''survey.js''' : szükséges

'''moment-with-locales.min.js''' : szükséges a dátum kérdéstípushoz (és szerintem másokhoz is)

'''em_javascript.js''' : minden ExpressionScript javascripthez szükséges

==== Az opciók szakasz ====

Ez a szakasz a témája beállításától függ. A template_configuration tábla tárolt "beállításainak" json-tömbként való betáplálására lesz használva.

=== További információ ===

* [[Téma: Elérhető funkció]]

== Néhány megjegyzés ==

''''MEGJEGYZÉS''': ha egy téma XML-fájlját szerkeszti, el kell távolítania, majd újra kell telepítenie a témát, hogy a rendszer figyelembe vegye. 

''''MEGJEGYZÉS'': ennek elkerülése érdekében a DB helyett XML-re kényszerítheti a használatát. A config.php-ben kapcsolja be a hibakeresési módot, és törölje a megjegyzéseket:

'force_xmlsettings_for_survey_rendering' => true, // Törölje a megjegyzést, ha a DB helyett az XML fájl használatát szeretné kényszeríteni (az egyszerű témafejlesztés érdekében) 

Vigyázat: minden az XML-ből lesz betöltve (beleértve a beállításokat stb.)


''''MEGJEGYZÉS'': ha manuálisan szerkeszti a CSS/JS fájlokat (a Témaszerkesztő használata nélkül), és ha a hibakeresési mód ki van kapcsolva, akkor most kényszerítheti az eszköz kiürítését. A „Globális beállítások” „Általános lapon” kattintson az „Eszközök gyorsítótárának törlése” gombra.

'''MEGJEGYZÉS''': ha eltávolítja a részt