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

<languages />

__TOC__
=Wprowadzenie=

Uwaga: w poprzednich wersjach LimeSurvey pliki definiujące wygląd ankiety, sposób jej prezentacji pod względem kolorów, czcionek, układu i (niektórych) zachowań nazywano „szablonem”. Ze względu na nowe spostrzeżenia nazywa się to teraz „motywem”, podczas gdy szablon jest zarezerwowany na przykład dla ankiet.

Na tej stronie dowiesz się, jak:

* Użyj nowego systemu motywów LimeSurvey 3.0.
* Użyj dziedziczenia, aby zarządzać własnymi motywami.
* Dodaj zdjęcie do swojego motywu
* Zarządzaj opcjami motywu dla swoich ankiet i grup ankiet

<hr/>

LimeSurvey 3 wprowadza zupełnie nowy system silnika motywów, oparty na Twig 1.29, Bootstrap, umożliwiający dziedziczenie motywów i opcje motywów. Całkowicie usuwa stary system zastępczych słów kluczowych. Teraz można dostosować 100% kodu HTML frontendu. Na przykład w starym systemie motywów istniało słowo kluczowe {ASSESSMENTS}, które w momencie wykonywania zostało zastąpione kodem HTML oceny. Projektant motywów nie miał możliwości dostosowania tego kodu HTML (poza użyciem JavaScript). Teraz istnieje plik o nazwie Assessments.twig, który zawiera logikę (napisaną w Twig) służącą do generowania tego kodu HTML. Na tych stronach wyjaśnimy, jak korzystać z tego nowego silnika motywów.

<div class="simplebox">[[File:help.png]] Nie będziemy tutaj szczegółowo omawiać działania Twiga. Jest to swego rodzaju bardzo uproszczony PHP, który oferuje wysoki poziom bezpieczeństwa dzięki systemowi „sandbox” (zobaczymy to bardziej szczegółowo w części dotyczącej kodu rdzenia Theme Engine). Jeśli znasz już PHP, jego opanowanie będzie niezwykle łatwe. Jeśli nie znasz PHP, nauczenie się go powinno być całkiem łatwe. Proszę zapoznać się z dokumentacją Twig 1.X:
https://twig.symfony.com/</div>

=Edycja przy użyciu interfejsu administracyjnego=
==lista motywów==
Na panelu administracyjnym znajduje się teraz pole umożliwiające dostęp do listy motywów:
[[Plik:Template list.jpg|thumb|800px |center|baseline|border|''Lista motywów po nowej instalacji RC3'']]
<br /> 
Lista jest podzielona na 5 kolumn:
* podgląd motywu: to tylko plik obrazu o nazwie „preview.png” w katalogu głównym motywu
* „tytuł” motywu jako określony w manifeście (config.xml w katalogu głównym motywu)
* opis motywu: ciąg znaków ustawiony w manifeście
* typ motywu: Motyw podstawowy (dostarczany z LimeSurvey), Motyw użytkownika (dodany do katalogu przesyłania), motyw XML (nie załadowany do bazy danych)
* Rozszerza: jeśli motyw rozszerza inny motyw, jego nazwa zostanie tutaj wskazana
* Niektóre przyciski akcji:
** Zainstaluj: to załaduje manifest motywu, aby dodać go do bazy danych i udostępnić do wyboru na poziomie ankiety
** Odinstaluj: usunie wpisy konfiguracyjne motywu z bazy danych
** Edytor motywów: to przekieruje Cię do edytora motywów
** Opcja motywu: poprowadzi Cię do globalnej konfiguracji opcji motywu

==Edytor motywów==
<div class="simplebox"> [[File:help.png]] Ta dokumentacja zakłada, że wiesz już, jak korzystać z Edytora motywów w poprzedniej wersji LS.</div> 
<br> 
Edytor motywów został utrzymany możliwie najbliżej oryginału. Zatem po otwarciu motywu podstawowego nie można go edytować. Ale teraz zamiast przycisku „kopiuj” masz „przycisk rozszerzania”.
<br> 
[[Plik:Rozszerza domyślny.png|center|baseline|border|''Teraz '''rozszerzasz'' motyw'']]

====Szybki przegląd koncepcji dziedziczenia motywu====

W LS3 motyw może teraz dziedziczyć z innego motywu, może także „rozszerzać” inny motyw. Oznacza to, że katalog motywu będzie praktycznie pusty, będzie zawierał jedynie pliki (widoki, arkusze stylów, skrypty, zasoby itp.), które różnią się od oryginalnych. Dzięki temu łatwo będzie Ci stworzyć flotę motywów dla różnych użytkowników, bez konieczności utrzymywania wielu różnych motywów. Przykładowo: możesz mieć motyw własnej roboty, potem wersję dla firmy (z jej logo, stylem, może linkiem do strony w stopce itp.), inną wersję dla innej firmy itp. Jeśli wtedy zaktualizujesz CSS lub globalny układ swojego niestandardowego motywu, wszystkie motywy, które z niego dziedziczą, zostaną zaktualizowane automatycznie. Należy pamiętać, że dziedziczenie jest rekurencyjne: motyw może rozszerzać motyw, który rozszerza inny itd.

<div class="simplebox">[[File:help.png]] Oznacza to również, że jeśli rozszerzysz jeden z głównych motywów LimeSurvey, nadal będziesz korzystać z jego aktualizacji.</div>

====Nowości w interfejsie użytkownika====

Aby rozszerzyć motyw Monochromatyczny w LimeSurvey, przejdź do listy Motywów, kliknij przycisk „Edytor motywów” motywu Monochromatycznego. Następnie kliknij „rozszerz” i zatwierdź nową nazwę „extends_monochrome”.

Jeśli teraz przejdziesz do katalogu przesyłania (za pomocą klienta plików/ftp), zobaczysz, że został utworzony nowy katalog: '''upload/themes/extends_monochrome'''
Zawiera plik XML i katalogi , ale większość katalogów jest pusta. Nie ma ani widoków, ani CSS, ani JS. Jednak nadal możesz wybrać ten motyw z ankiety jako zwykły i będzie on wyglądał dokładnie tak, jak motyw monochromatyczny.

[[File:Extends monochromatyczny pusty.jpg|center|baseline|border|''Drzewo motywów (katalog i pliki) tuż po jego utworzeniu. Jest praktycznie pusty'']]

<div class="simplebox">[[File:help.png]] Zasoby (jpg, png itp.) z oryginalnego motywu są kopiowane podczas rozszerzania motywu. Dzieje się tak dlatego, że jeśli lokalnie skopiujesz plik CSS z oryginalnego motywu i jeśli odnosi się on do tych plików (jak w instrukcji obrazu tła), będzie musiał znaleźć te obrazy w bieżącej ścieżce motywu.</div>

Edytor motywu Extends_monochrome wygląda następująco:
[[Plik:Edycja Extends Monochrome.jpg|center|baseline|border|'' Edycja motywu Extends_monochrome'']]
<br /><br /> 
Nie ma dużej różnicy w stosunku do starego edytora motywów. Wymieńmy najważniejsze:
<br /> 
* Słowo kluczowe '''inherited''' na liście plików. Oznacza to, że pliku nie ma w katalogu motywu i zostanie użyty plik z oryginalnego motywu.
[[File:Inherited.jpg|center]]
<br> 
* Główny edytor ( [https://ace.c9.io ACE Editor ]) pokazuje zawartość wybranego pliku. Pliki zawierają nie tylko HTML, CSS czy JS, ale także instrukcje Twig. Te instrukcje Twig dają nam możliwość przeniesienia logiki do widoków tematycznych, które wcześniej znajdowały się głęboko w rdzeniu, a które teraz można dostosować.
[[Plik:Kod Twig w edytorze.jpg|center|''Some twig kod dla listy ankiet'']]
<br> 
* Dlatego w rozwijanym menu wyboru w górnym menu dostępnych jest teraz więcej typów ekranów. Zauważysz strony takie jak „Lista ankiet”, „Wczytaj”, „Zapisz”, „Błąd”, „Rejestracja”, „Oceny”, „Drukuj odpowiedzi”, które nie były wcześniej dostępne lub których tak naprawdę nie mogłeś dostosować wcześniej.
[[Plik:Newscreens editables.jpg|195px|center|''Teraz możesz dostosować wszystkie ekrany'']]
<br /> 
* Link „wskazówka” na dole listy plików umożliwia Twigowi dodanie obrazu do kodu HTML
[[Plik:Tip image.png|605px|center]]
<br /> 
* Przycisk „zapisz zmiany” staje się przyciskiem „Kopiuj do motywu lokalnego i zapisz zmiany”
[[File:Copytolocal.png|360px|center]]

====Krótki przykład: dodanie zdjęcia ====

Przycisk „Kopiuj do motywu lokalnego i zapisz zmiany” zrobi dokładnie to, co mówi: jeśli dokonasz edycji czegokolwiek w pliku, a następnie klikniesz ten przycisk, plik zostanie skopiowany do edytowanego motywu i zapisz zmiany.
<br> 
Przykładowo: kliknij plik układ_global.twig, następnie tuż przed zawartością bloku ({% block content %}) dodaj tekst „TEST” i kliknij przycisk. Możesz zobaczyć, że etykieta pliku została zmieniona z „dziedziczonej” na „lokalna”, a teraz przycisk jest prostym przyciskiem „zapisz zmiany”. 
[[Plik:After Edition.png|center|''zaraz po kliknięciu przycisku'']]
<br> 
Jeśli otworzysz eksplorator plików i przejdziesz do katalogu upload/themes/extends_monochrome/views/, zobaczysz, że zawiera on tylko jeden plik, plik układ_global.twig i że znajduje się tam ciąg „TEST”.!N ![[Plik:Drzewo z układem globalnym strzałka.png|center|''Teraz plik jest obecny w Twoim motywie'']]
<br><br> 
Teraz zamiast losowego tekstu dodamy obrazek. Jeśli klikniesz na link z wskazówką, wyświetli się informacja:
<br> 
Aby użyć obrazka w pliku .twig:
'''{{ image('./files/myfile.png', 'alt-text dla mojego pliku', {"class": "mojaklasa" }) }}'''
<br> 
Jeśli przeczytałeś dokumentację Twiga (a powinieneś był to zrobić w tym momencie), wiesz, że '''{{function( ) }}<nowiki /> „” wyświetli wynik funkcji na ekranie. Tutaj funkcją jest image( ). 

<div class="simplebox">[[File:help.png]] Jeśli ciekawi Cię, co robi, możesz znaleźć to w kodzie tutaj (wersja RC3): [https://github.com/LimeSurvey/LimeSurvey/blob/f3737a75e428f604d68d2e5ba958f3eba3eba2e1 /application/core/LS_Twig_Extension.php#L219-L237 funkcja image() w RC3]
Jeśli nie rozumiesz kodu: nie martw się, nie musisz wiedzieć, jak to działa, ale po co go używać i jak go używać.
</div> 
<br> 
Powinieneś używać funkcji image() z dwóch powodów:
* Funkcja image przegląda motyw, aby znaleźć obraz. Jeśli motyw, nad którym pracujesz, jest rozszerzony na inny motyw i jeśli skopiujesz plik do miejsca, w którym lokalnie wstawiłeś obraz, ale obraz ten nie zostanie skopiowany do motywu lokalnego, przejdzie on przez drzewo dziedziczenia motywu, aby znaleźć miejsce to zdjęcie to.
* Będzie korzystać z menedżera zasobów, co poprawi wydajność Twojego motywu. Więcej informacji na ten temat znajdziesz w dokumentacji Yii Asset Manager: http://www.yiiframework.com/wiki/148/understanding-assets/

<div class="simplebox">
A więc, aby dodać zdjęcie do motywu:
* po prostu prześlij je jak zwykle za pomocą narzędzia do przesyłania plików po prawej stronie, a następnie dodaj je w dowolnym miejscu w dowolnym pliku twig:
'''{ { image('./files/myfile.png') }}'''

* Jeśli chcesz dodać alternatywny tekst do swojego zdjęcia (dla czytników ekranu i sprawdzania poprawności HTML), dodaj:
{{ image('./files/myfile.png'), ''' 'mój tekst alternatywny' ' '' }}

* Jeśli chcesz dodać atrybut klasy i dodać do niego identyfikator:
{{ image('./files/myfile.png'), 'mój tekst alternatywny', ''' {“class”: “a_nice_css_class ”, „id”: „any_id”} ''' }}
</div>

====Niektóre rzeczy na naszej liście DO ZROBIENIA====
* Daj użytkownikom możliwość przesłania niestandardowego pliku podglądu z samego edytora
* Dodaj przycisk umożliwiający usunięcie pliku lokalnego i powrót do instrukcja dziedziczona
* Skopiuj tylko obraz użyty w plikach CSS (poprzez wyszczególnienie ich w manifeście jako plik do skopiowania)
* Przypomnij, który motyw rozszerza bieżący (jeśli istnieje)

==Opcje motywu==
Kolejną nowością LS3 jest strona opcji motywu. Jak zobaczymy później, twórcy motywów mogą tworzyć własne opcje, a nawet własną stronę opcji administratora. Tutaj szybko zobaczymy, jak działa strona opcji Motywów podstawowych. Aby uzyskać dostęp do opcji motywu na poziomie globalnym: kliknij „opcje motywu” na liście motywów
===Opcje zaawansowane===


{{QS:Edytor motywów - opcje zaawansowane}}

===Proste opcje===

Strona opcji Simple pochodzi z samego szablonu. Robi się to poprzez plik twig i trochę javascriptu w katalogu /options motywu:
https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Uszkodzony link)
<div class="simplebox"> [[File:help.png]] Ta strona może mieć zupełnie inny motyw, dlatego gorąco zachęcamy dostawców motywów do stworzenia własnego wyglądu i stylu.</div>

[[File:Options.png|kciuk|750px|centrum]]
<br><br> 
Prosta strona opcji po prostu wypełnia zaawansowane formularze. Możesz to zobaczyć, włączając lub wyłączając ustawienie na prostej stronie i obserwując, jak odpowiednie dane wejściowe w formularzu zaawansowanym są odpowiednio modyfikowane. Na przykład w prostych opcjach szablonu domyślnego, jeśli zmienisz motyw Bootswatch na „Ciemny”, a następnie klikniesz kartę opcji zaawansowanych (nawet bez zapisywania), zobaczysz, że pole „Cssframework Css” zmieniło się z

{"zamień": [["css/bootstrap.css","css/flatly.css"]]}<br> 
do<br> 
{"zamień": [["css/bootstrap.css","css/darkly.css"]]}
<br> 
Oto różne proste opcje motywów Core:
*'''Tryb Ajax:''' Czy następna strona powinna zostać załadowana poprzez ajax (szybciej), czy poprzez przeładowanie strony (lepiej do celów debugowania)!
*'''Obraz tła:''' jeśli ustawiony na Tak, obraz o nazwie wzór.png zostanie załadowany (zostanie zastąpiony przez selektor plików w Master)
*'''Kontener Box:''' jeśli ustaw na Nie, pytania nie będą zawarte w ramce (więc możesz używać dużych tablic większych niż szerokość ekranu)
*'''Brandlogo:''' jeśli ustawione na nie, nazwa ankiety będzie brzmieć pokazane na górnym pasku, w przeciwnym razie możesz wybrać jeden z obrazów w katalogu plików, który będzie używany jako obraz logo.
*'''Animuj treść:''' jeśli ustawione na tak, możesz wybrać jedną z animacji do zastosowania po załadowaniu treści ankiety
*'''Animacja pytania:''' to samo z pytaniami
*'''Animacja alertów:''' to samo z alertami
*'''Bootstrap motyw:''' tutaj możesz wybrać motyw Bootstrap do załadowania. Pochodzą z Bootswatch https://bootswatch.com/3/
<br> 
Biblioteka używana do animacji to animate.css: https://daneden.github.io/animate.css/
Oczywiście dostawca motywów może dodać własną bibliotekę animacji lub w ogóle nie dodawać żadnej biblioteki animacji.

<div class="simplebox">[[File:help.png]] Motywy monochromatyczne korzystają z tego samego motywu kolorów bootstrap, co interfejs administratora. Nie używają systemu zastępowania frameworka CSS, ale po prostu dodają plik CSS. Ilustruje więc inny sposób radzenia sobie z niestandardowymi motywami dla dostawców motywów.</div>

===System dziedziczenia===

W poprzedniej części widzieliśmy, że motyw może rozszerzać inny motyw. Konfiguracja motywu może również dziedziczyć z innej konfiguracji motywu. Oznacza to, że dla danego motywu możesz mieć konfigurację pod adresem 

* poziom globalny (ten, który właśnie widzieliśmy dostępny z listy tematów)
* na poziomie grupy ankiety
* ostatni na poziomie ankiety. 

Każdy parametr na pewnym poziomie może dziedziczyć z wyższego poziomu: dziedziczenie grupy ankiet. Najpierw przyjrzyjmy się poziomowi grupy ankiety.

====Na poziomie grupy ankiety====

Rzeczywiście, jedną z innych wielkich nowości LS3 jest system grup ankietowych. Możesz teraz tworzyć różne grupy w celu porządkowania ankiet. Aby uzyskać do niej dostęp należy przejść do listy ankiet, a następnie kliknąć na zakładkę grupy ankiet:
[[File:Surveygroup.png|thumb|800px|center|''Zakładka grupy ankiet'']]
<br> 
Na tej liście znajdują się dwa przyciski akcji. Jeśli grupa jest pusta, możesz ją usunąć. W przeciwnym razie zawsze możesz go edytować. Klikając przycisk edycji, przejdziesz do strony konfiguracji grupy ankiet:
[[File:Surveygroupedit.png|thumb|800px|center|''Edytowanie domyślnej grupy ankiet'']]
<br> 
Trzecia zakładka na tej stronie nazywa się „Opcje szablonu dla tej grupy ankiet”. Jeśli na nią klikniesz, zobaczysz tę samą listę motywów, co na liście motywów, z tą różnicą, że tutaj widoczny jest tylko przycisk opcji (do edytora motywów można dotrzeć tylko z listy głównej).
<br> 
Teraz, jeśli klikniesz opcję Szablon domyślny, zobaczysz następujący komunikat:
[[File:Option group inherit.png|thumb|800px|center|''W grupie ankiet opcje szablonu są dziedziczone domyślnie'']]
<br> 
* '''Dziedzicz wszystko''' oznacza, że cała konfiguracja zostanie odziedziczona z poziomu konfiguracji globalnej. 
* Jeśli przejdziesz do „strony opcji zaawansowanych”, zobaczysz, że wszystkie pola są ustawione na dziedziczenie.
* Jeśli klikniesz „nie” dla opcji „Dziedzicz wszystko” w prostych opcji, ponownie zobaczysz stronę bardzo podobną do strony opcji globalnych. Jedyna różnica polega na tym, że dla każdego pola można ustawić wartość tak, nie lub dziedziczyć; a każdy selektor listy rozwijanej ma wartość „dziedzicz”. 
[[Plik:Inherit group.png|thumb|800px|center|''Każde ustawienie może mieć wartość dziedziczoną'']]

<div class="simplebox">[[File:help.png]] Grupa ankiety może być dzieckiem innej grupy. W tym przypadku będzie dziedziczyć po swoim rodzicu.</div>

====Na poziomie ankiety====
Podczas edycji ankiety, w menu na lewym pasku zobaczysz nową pozycję „Opcje motywu”. Spowoduje to przejście do strony opcji Motywu wybranego dla bieżącej ankiety. Znajdziesz ten sam system dziedziczenia, co w grupie ankiety, ale tym razem opcja dziedziczenia oznacza, że ustawienie zostanie odziedziczone z grupy ankiety ankiety. 
[[File:Options survey.png|thumb|800px|center|''Theme Options at Survey Level'']]

==Przykład przypadku użycia==
Załóżmy, że używasz tego samego motywu dla różnych firm (A i B). Ustawiasz swoje ulubione opcje na poziomie globalnym (np.: ajax włączony, animacja ciała ze wsunięciem, alerty z impulsem). Następnie tworzysz grupę ankiet dla każdej firmy: grupę ankiet dla firmy A, która będzie hostować wszystkie ankiety tej firmy, oraz ankietę dla firmy B, która będzie hostować wszystkie ankiety firmy B. Na tym poziomie możesz ustawić tylko logo i tło, a pozostałe opcje zostaną odziedziczone. Zatem wszystkie ankiety w grupie A będą korzystały z logo firmy A, a wszystkie ankiety z grupy B – logo firmy B. W przypadku jednej z ankiet firmy A możesz użyć innego tła w powiązaniu z tematem ankiety: wystarczy zmienić tło w opcjach na poziomie ankiety. Jeśli ktoś w firmie B powie Ci, że alert pulsujący jest zbyt agresywny i wolałby coś płynniejszego, na przykład zanikanie, po prostu zmieniasz animację alertu na poziomie Grupy ankiet B i wszystkie ankiety w tej grupie będą teraz korzystać z tej animacji. Jeżeli firma A zmieni swoje logo, możesz je zmienić na poziomie Grupy Ankiet A, a wszystkie badania tej grupy będą korzystały z nowego logo.
<br> 
<div class="simplebox"> Przykłady te opierają się na bieżących opcjach motywu podstawowego. Ale oczywiście, jeśli jesteś dostawcą motywów lub potrafisz pisać skrypty za pomocą twig, możesz dodać własne opcje. Możesz na przykład dodać opcję „stopka informacyjna”, w której możesz dodać dane, takie jak strona internetowa firmy lub numer telefonu, aby uzyskać pomoc. Następnie, jeśli firma A ma różne działy i różne numery telefonów, możesz po prostu utworzyć jedną podgrupę dla każdego działu w Grupie ankiety A. Każda podgrupa będzie miała swój własny numer telefonu w tych opcjach.</div>

= Często zadawane pytania dotyczące dostosowywania motywu =

Znajdziesz tutaj odpowiedzi na pytania zadane na forum, które mogą pomóc w dostosowaniu motywu.

==Dostosowywanie CSS/JS: skonsultuj się z menedżerem zasobów („dlaczego moje zmiany nie zostały zastosowane?”) ==
<br />

Jeśli próbujesz zaktualizować CSS/JS motywu, bezpośrednio edytując kod w swoim ulubionym edytorze, możesz być zaskoczony, że Twoje zmiany nie zostaną zastosowane.

<br />

Od wersji 2.50 LS używa menedżera zasobów Yii:
[http://www.yiiframework.com/wiki/148/understanding-assets/ Dokumentacja Yii o aktywach]
<br />

Przenosi pliki CSS/JS motywu do podkatalogu tmp/ z losowym ciągiem znaków (np.: „tmp/1ef64ml/”). Jeśli więc dokonasz jakichkolwiek zmian w pliku css/js i poinformujesz o tym menedżera zasobów, pliki zostaną skopiowane do nowego podkatalogu z nową nazwą, dzięki czemu pamięć podręczna przeglądarki użytkownika zostanie zaktualizowana i zobaczą nowy css/js . W przeciwnym razie musieliby wyczyścić pamięć podręczną przeglądarki. 

<br />

Tutaj linki CSS w nagłówku, gdy menedżer zasobów jest włączony:
<br /> 
[[File:Assets on vanilla.jpg]]
<br /> Jak widać, wszystkie odnoszą się do podfolderów tmp/. 

<br />

Tutaj linki CSS w nagłówku, gdy menedżer zasobów jest wyłączony:
<br /> 
[[File:Asset off.png]]
<br /> Jak widać, wskazują one na prawdziwe pliki motywu. 

<br />

<div class="simplebox">[[File:help.png]] Oczywiście, jeśli AssetCenter nie będzie wiedział, że zmieniłeś plik, stary plik ze starego katalogu tmp/pozostanie niezmieniony, a Twoje zmiany nigdy nie zostaną zastosowane.</div>

Tak więc, kiedy edytujesz CSS/JS motywu, masz różne możliwości:
*'''Możesz użyć Edytora motywów LS:''' Zajmuje się on zarządzaniem zasobami i nie musisz nie martw się o nic
*'''Możesz włączyć tryb debugowania:''' wyłączy to menedżera zasobów, więc wywoływane będą prawdziwe pliki css/js twoich motywów (ale wtedy musisz odświeżyć pamięć podręczną przeglądarki przy każdym ładowaniu)
* '''Możesz odświeżyć pamięć podręczną zasobów''': z Ustawienia globalne -> Ogólne -> Wyczyść pamięć podręczną zasobów

[[File:Clearassets-ls3 3.png]]

<div class="simplebox">[[File:help.png]] '''Używanie edytora motywów do edycji niestandardowego CSS jest zdecydowanie najlepszym rozwiązaniem.'''</div>


Korzystanie z edytora motywów pomoże Ci zrozumieć architekturę nowego silnika motywów.
Ponadto, jeśli dostosowujesz Fruity, uważaj na specyfikację CSS: większość definicji wykorzystuje selektor „.fruity” (jeden z klas element ciała)

== Dodawanie własnych czcionek do mojego motywu ==
=== Prosty sposób: użycie Google Font CDN ===
Bootswatch Survey Theme korzysta z Google Font CDN. Rzućmy okiem, jak to działa:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css

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

Następnie czcionka Lato jest używana poprzez reguły CSS:
https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72
<syntaxhighlight lang="css"> 
ciało {
 ...
 rodzina czcionek: "Lato";
 ...
}
</syntaxhighlight>

Możesz w ten sposób użyć dowolnej czcionki Google w swoim niestandardowym motywie. Oczywiście powinieneś usunąć selektor czcionek z opcji swojego motywu. Usuń te linie w options.twig:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

=== Używanie czcionek lokalnych ===
Oczywiście możesz także pobrać pliki czcionek i używać ich z lokalnego serwera, a nie z Google CDN (lepiej dla prywatności). Aby mieć przykład, jak to zrobić, tutaj nasza lokalna wersja czcionki noto:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css
<syntaxhighlight lang="css"> 
@czcionka {
 rodzina czcionek: 'Noto Sans';
 waga czcionki: 300;
 styl czcionki: normalny;
 src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...
</syntaxhighlight>

Możesz użyć bardzo podobnej definicji w pliku css motywu, a następnie skopiować plik NotoSans-Regular.ttf do folderu css/font-src/ motywu. 

Następnie zastosuj tę czcionkę do swojego ciała (lub dowolnego innego elementu), jak powyżej, i usuń domyślną opcję selektora czcionek.

=== Tworzenie własnego selektora czcionek w opcjach ===
Na razie nie można łatwo użyć podstawowego selektora czcionek, aby dodać własną czcionkę w opcjach. Musimy najpierw dać użytkownikowi końcowemu możliwość przesyłania niestandardowych pakietów (patrz następny akapit: Spojrzenie na selektor czcionek Fruity) 
<br> 
Oto jak postępować:
<br> 
*Dodaj dwie czcionki (my_custom_font i my_custom_other_font) do swojego motywu, używając CDN lub serwera lokalnego. 
*Następnie w pliku css dodaj dwie nowe klasy:
<br> 
<syntaxhighlight lang="css"> 
.font-my_custom_font {
 rodzina czcionek: 'my_custom_font ';
}
.font-my_custom_other_font {
 rodzina czcionek: 'my_custom_other_font';
}
</syntaxhighlight> 
*W pliku XML swojego motywu dodaj opcję czcionki (domyślną będzie my_custom_font) :
<syntaxhighlight lang="xml"> 
<options> 
 ....
 <font>moja_niestandardowa_czcionka</font> 
</options> 
</syntaxhighlight>

* w Option.twig dodaj selektor czcionek, dodając te linie (na razie nietestowane, więc przyjdź poskarżyć się na forum, jeśli to nie działa):
<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'> {{ "Moje niestandardowe czcionki" | T }}</div> 
<div class='panel-body'> 
<div class='form-group row'> 
 <label for='simple_edit_font' class='control-label'>{{ "Wybierz czcionkę:" | t }}</label> 
<div class='col-sm-12'> 
<select class='form-control selector_option_value_field' id='simple_edit_font' name='font'> 
 {% if templateConfiguration.sid nie jest pusty lub templateConfiguration.gsid nie jest pusty %} //Czy nie powinien to być „motyw” zamiast „szablon”?
 {% ustawione opcje czcionki = opcje czcionki ~ '<option value = "inherit" > Dziedziczyć</option> ' %}
 {% endif %}
<optgroup  label="{{ "My Custom fonts" | t }}"> 
<option class="font-my_custom_font"     value="custom_font"   data-font-package=""  > Zwyczaj</option> 
<option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package=""  > Inny</option> 
</optgroup> 
 
</select> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</syntaxhighlight>

<br>
Teraz Twoi użytkownicy powinni mieć możliwość wyboru pomiędzy tymi dwiema czcionkami.

=== Rzut oka na selektor czcionek Fruity ===
W przyszłości umożliwimy użytkownikowi końcowemu przesyłanie własnych pakietów zasobów, w tym pakietów czcionek. Ułatwi to wszelkie dostosowywanie czcionek. 
<br> 
Aby zrozumieć pakiety Yii:
<br> 
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
<br> 
<br> Pakiety 
LimeSurvey są zdefiniowane w różnych plikach. Pakiety czcionek są zdefiniowane tutaj:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
<br> 
Na przykład pakiet czcionek Noto jest zdefiniowany tutaj:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53
<br> 
<syntaxhighlight lang="php">

    'font-noto' => array(
 'devBaseUrl' => 'zasoby/czcionki/',
 'basePath' => 'czcionki',
 'css' => array(
 ' noto.css',
 ),
 ),
</syntaxhighlight> 
<br> 
Zawierający plik noto.css znajduje się tutaj:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
<br> 
Zwróć uwagę na definicję klasy css ".font-noto" na jej końcu:
<syntaxhighlight lang="css"> 
@czcionka {
 rodzina czcionek: 'Noto Sans';
 ...
}
...
.font-noto{
 rodzina czcionek: 'Noto Sans';
}

</syntaxhighlight>
<br> 
Następnie w motywie Vanilla czcionka noto jest używana poprzez dodanie pakietu noto i zdefiniowanie opcji czcionki noto:
<br> 
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79

<syntaxhighlight lang="xml">
<packages> 
 ....
<add> czcionka-noto</add> 
</packages> 
</syntaxhighlight > 
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58
<br> 
<syntaxhighlight lang="xml"> 
<options> 
 ....
 <font>uwaga</font> 
</options> 
</syntaxhighlight> 
<br> 
Następnie czcionka klasy treści jest definiowana przy użyciu tej wartości:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76
<syntaxhighlight lang="html"> 
<body class=" ...  font-{{  aSurveyInfo.options.font }} ... " ... > 
</syntaxhighlight>

Oczywiście plik XML zawiera tylko domyślne wartości konfiguracji motywu. Ale w rzeczywistości te wartości są zdefiniowane i odczytywane w bazie danych (tabela „konfiguracja_szablonu” (Pytanie: „szablon_” z „motyw_”?) jako ciągi json. Plik Option.js po prostu używa wartości selektora czcionki prostej opcji aby zmienić wartość w formularzu karty zaawansowanej:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

Kiedy zatem dostępna będzie funkcja „prześlij pakiet zasobów”, łatwo będzie dodać skrypt skanujący wszystkie istniejące pakiety czcionek w celu dodania ich do selektora.

== Dodawanie opcji motywu do kontrolowania rozmieszczenia i wyświetlania elementów ankiety ==
W tym samouczku pokażemy, jak dodać opcje do rozszerzonego motywu, aby wyświetlać elementy ankiety w różnych lokalizacjach. W tym przypadku utworzymy opcje motywu, aby tytuł ankiety był wyświetlany w dwóch różnych lokalizacjach.
<div class="simplebox"> [[File:help.png]] Dla uproszczenia tutorial oparliśmy na rozszerzeniu motywu „bootswatch” w LimeSurvey w wersji 3.4.3.</div> 
=== Utwórz niestandardowy motyw ===
#Rozszerz motyw „bootswatch” zgodnie z powyższym opisem.
#Skopiuj plik <span style="color: #BA2121;">niestandardowe.css</span> do motywu lokalnego zgodnie z powyższym opisem.
===Utwórz nowe opcje motywu===
#Skopiuj zawartość <span style="color: #BA2121;">/themes/survey/bootswatch/options/</span> do <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/options/</span> .
#Otwórz <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/ options/options.twig</span> w edytorze i znajdź „{# Motyw Bootstrap Bootswatch #}”. Bezpośrednio przed swoim rodzicem<nowiki><div class='row'></nowiki> element, dodaj to:<syntaxhighlight lang="html"> 
 {# Niestandardowa nazwa ankiety w pasku nawigacyjnym #}
<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'>Nazwa ankiety w pasku nawigacyjnym</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'/> 
 Tak n!</label> 
 <label class="btn btn-default">
 <input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> 
 Nie!</label> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class='row'> 
<hr/> 
</div>

		{# Niestandardowa nazwa ankiety poniżej paska postępu #}
<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'>Nazwa ankiety poniżej paska postępu</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'/> 
 Tak n!</label> 
 <label class="btn btn-default">
 <input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> 
 Nie!</label> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class='row'> 
<hr/> 
</div></syntaxhighlight> 
#Otwórz <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/config.xml</span> i dodaj dwa elementy do bloku „opcje”, aby wyglądało to tak:<syntaxhighlight lang="xml"><options> 
<ajaxmode> NA</ajaxmode> 
 ...
<surveyname1> NA</surveyname1> 
<surveyname2> NA</surveyname2> 
</options></syntaxhighlight> 
#To powinno dać ci dwie nowe opcje na ekranie Opcje motywu, takie jak ta:<br /> [[File:Tutorial_tp_1_1.png]]

===Zmodyfikowany widok tytułu ankiety na pasku nawigacyjnym===
#Utwórz nowy katalog <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/views/subviews/header/ .</span> 
#Kopiuj <span style="color: #BA2121;">/themes/survey/vanilla/ widoki/subviews/header/nav_bar.twig</span> do tego nowego katalogu.
#Otwórz <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/header/nav_bar.twig</span> i znajdź „{# Opcja logo #}”. W tym miejscu zmodyfikuj instrukcję IF dla logo/nazwy ankiety, aby wyglądała następująco:<syntaxhighlight lang="html"> 
 {# Opcja logo #}
 {% if( aSurveyInfo.options.brandlogo == "on") %}
 <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container"  {{ aSurveyInfo.attr.navbarbrand }}  > 
 {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-Response"}) }}
</div> 
 {% endif %}
 {% if( aSurveyInfo.options.surveyname1 == "on") %}
<div class="{{ aSurveyInfo.class.navbarbrand }}"  {{ aSurveyInfo.attr.navbarbrand }} > 
 {{ aSurveyInfo.name }}
</div> 
 {% endif %}</syntaxhighlight> 
#Dodaj coś takiego do <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/css/custom.css</span> :<syntaxhighlight lang="css"> .navbar-brand {
 wysokość linii: 60px;
 rozmiar czcionki: 32px;
}</syntaxhighlight> 
#Przełącz opcję motywu „Nazwa ankiety w pasku nawigacyjnym” na „Tak”
#Powinieneś zobaczyć to:<br /> [[Plik:Tutorial_tp_1_2.png]]
===Zmodyfikowany widok tytułu ankiety pod paskiem postępu===
#Utwórz nowy katalog <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews</span> .
#Skopiuj <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig</span> do tego nowego katalogu.
#Otwórz <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container .twig</span> i dodaj<nowiki><h1></nowiki> element nazwy ankiety. Wygląda to więc tak: <syntaxhighlight lang="html"><div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}>
 
 {# Niestandardowa nazwa ankiety #}
 {% if( aSurveyInfo.options.surveyname2 == "on") %}
<h1 class="custom-survey-name"> {{ aSurveyInfo.name }}</h1> 
 {% endif %}
 
 {# Nazwa grupy #}
 {{ include('./subviews/survey/group_subviews/nazwa_grupy.twig') }}
 
 {# Opis grupy #}
 {{ include('./subviews/survey/group_subviews/group_desc.twig') }}
 
 {#
 ZADAWAJ PYTANIA
 
 To jest główna część. Wyświetli każde pytanie dla tej grupy
 #}
 
<!-- PRESENT THE QUESTIONS --> 
 {% dla pytania w aGroup.aQuestions %}
 {{ include('./subviews/survey/question_container.twig') }}
 {% endfor %}
 
<!-- Hidden inputs --> 
 {% if aGroup.show_last_group == true %}
<input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' /> 
 {% endif %}
 
 {% if aGroup.show_last_answer == true %}
<input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' /> 
 {% endif %}
</div></syntaxhighlight> 
# Dodaj coś takiego do <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/css/custom.css</span> :<syntaxhighlight lang="css"> .navbar-brand {
 wysokość linii: 60ph1.nazwa-ankiety niestandardowej {
 margines: 0;
 wyrównanie tekstu: do środka;
}</syntaxhighlight> 
#Przełącz opcję motywu „Nazwa ankiety poniżej paska postępu” na „Tak”
#Powinieneś zobaczyć to:<br /> [[Plik:Tutorial_tp_1_3.png]]

===Pobrania===
* Przykładowy rozszerzony motyw: [[Media:Test_survey_names.zip]]

=Tworzenie motywu od podstaw=
Dokumentacja już wkrótce.

Na razie dam tylko kilka wskazówek.

==Struktura motywu==

=== Pliki i katalogi ===
Tworząc motyw od zera, nie musisz szanować struktury plików/katalogów/css/js z Vanilli. 
 Obowiązkowy css/js jest dodawany przez rdzeń (nadal możesz go usunąć, jeśli zajdzie taka potrzeba)

Jedyne pliki, jakie musi zawierać Twój motyw, to pliki układu:

* '''layout_global.twig''' : renderuj strony do ankiet
* ''layout_survey_list.twig''' : renderuj listę ankiet (jeśli ten motyw jest ustawiony jako domyślny)
* '' „layout_errors.twig”: używany do renderowania błędów blokujących renderowanie ankiety. (zły identyfikator ankiety, pusta grupa w grupie podglądu itp.)
* ''layout_user_forms.twig''': renderuje formularze użytkownika takie jak: token (uczestnik ankiety) i zarejestruj się.
* '' 'layout_print.twig''': używany do drukowania ankiety w formacie pdf
* ''layout_printanswers.twig''': drukuje odpowiedzi

Zawartość tych plików, pliki, które zawierają lub nie, zależy wyłącznie od Ciebie. 
Wszystkie inne pliki i katalogi, które znajdziesz w Vanilli, są całkowicie opcjonalne, możesz zorganizować swój kod tak, jak chcesz.

<div class="simplebox">[[File:help.png]] Jeśli przeczytasz kod renderujący frontend, zobaczysz, że nazwy tych plików pojawiają się bezpośrednio w nim. Dlatego są obowiązkowe. 
Np.: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462
</div>

=== Treść ===

W pliku Layout_global.twig Vanilli zobaczysz, że używamy zmiennej o nazwie „include_content”, aby zdecydować, co pokazać
https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/ układ_global.twig#L114-L115

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

aSurveyInfo.include_content informuje Cię, jaka akcja jest aktualnie wykonywana: wyświetlanie pytań? pokazuje wynik przesłania? wyświetlanie jasnego wszystkiego? itp
Jak widać, w wersji waniliowej tworzymy jeden plik, który będzie dołączany do akcji. Jeśli więc chcesz poznać listę akcji, po prostu sprawdź katalog wanilii „views/subviews/content” i usuń rozszerzenie „twig” :
https://github.com/LimeSurvey/LimeSurvey /tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content

* '''clearall.twig''' 
* '''pierwsza strona.twig'' 
* '''load.twig'' 
* '''mainrow.twig''' 
* '''main.twig''' 
* '''optin.twig'' 
* '''optout.twig'' 
* '''outerframe.twig'' ' 
* '''printanswers.twig''' 
* '''quotas.twig''' 
* ''register.twig''' 
* '''zapisz.twig ''' 
* '''submit_preview.twig''' 
* '''submit.twig''' 
* '''userforms.twig''' 

Jeśli utworzyłeś już je dla wersji 2.x LimeSurvey, zauważysz, że większość z nich odpowiada starym plikom pstpl dla limesurvey 2.x. 
Ponownie, w twoim motywie nie masz obowiązku tworzenia tych plików o tych nazwach w tym katalogu. Możesz na przykład po prostu dodać gigantyczny przełącznik w pliku układ_global.twig z żądanym kodem HTML dla każdej akcji.

=== Manifest config.xml ===

Manifest motywu zawiera główne informacje na jego temat. Po zainstalowaniu motywu zawartość manifestu zostanie załadowana do bazy danych, w dwóch różnych tabelach: szablon i szablon_konfiguracja. Dlatego za każdym razem, gdy modyfikujesz manifest motywu, musisz go odinstalować i zainstalować ponownie (lub po prostu zresetować). Ponieważ ten proces jest denerwujący podczas tworzenia motywu, możesz wymusić bezpośrednie użycie pliku XML zamiast wpisów DB. Aby to zrobić, w config.php włącz tryb debugowania i ustaw „force_xmlsettings_for_survey_rendering” na true.

==== Sekcja metadanych ====

Nic skomplikowanego: tylko główne informacje na temat Twojego motywu. Zostanie on umieszczony w tabeli templates_configuration  

<syntaxhighlight lang="xml">
<metadata> 
<name> nazwa_twojego_motywu</name> 
<title> Tytuł Twojego motywu</title> 
<creationDate> 16.10.2017</creationDate> 
<author> Twoje imię</author> 
<authorEmail> twój@email.org</authorEmail> 
<authorUrl> http://www.twojastrona.org</authorUrl> 
<copyright> Twoje prawa autorskie</copyright> 
<license> Licencja na Twój motyw</license> 
<version> wersję swojego motywu</version> 
<apiVersion> 3</apiVersion> 
<description> Opis Twojego motywu</description> 
<extends> motyw_rodzica</extends> 
</metadata> 
</syntaxhighlight>


Kilka uwag:
* '''name''': będzie używany jako klucz w bazie danych. Musi więc być unikalny i nie powinien zawierać żadnych znaków specjalnych (żadnych spacji). Pamiętaj, że przypadki nie będą brane pod uwagę
* '''Tytuł''': będzie używany do wyświetlania nazwy motywu na różnych listach. Może zawierać znaki specjalne
* '''opis''': będzie używany na głównej liście tematów ankiety. Może zawierać znaki specjalne, a nawet kod HTML za pomocą 
* '''extends''': opcjonalne, definiuje motywy nadrzędne. Jeśli więc w tym motywie nie ma żadnego pliku (twig/js/css/jpg itp.), będzie on szukał go w motywie nadrzędnym


<div class="simplebox">[[File:help.png]] Jeśli rozszerzyłeś jeden z 3 głównych motywów (Vanilla, Bootswatch, Fruity), możesz zmienić wartość „rozszerza” z jednego motywu nadrzędnego na drugi. Oczywiście będziesz musiał zresetować motyw.</div>





==== Sekcja plików ====

Ten jest ważny. Zostanie on umieszczony w tabeli template_configuration, w polu files_css, files_js, files_print_css jako tablice json.  

Np.: sekcja plików motywu Material Premium:

<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/motyw.css</replace> 
<replace> css/niestandardowy.css</replace> 
<remove> niesamowite-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> skrypty/custom.js</replace> 
</js> 
<print_css> 
<add> css/print_theme.css</add> 
</print_css> 
</files> 
</syntaxhighlight>

Wszystkie pliki CSS/JS znajdujące się w tej sekcji zostaną załadowane po uruchomieniu ankiety (w trybie ajax. Jeśli tryb ajax jest wyłączony, to oczywiście wszystkie pliki będą ładowane ponownie na każdej stronie). 


Zostaną dodane do pakietu zasobów Yii na podstawie nazwy motywu. Zatem gdy AssetCenter jest włączony (tryb debugowania wyłączony), pliki te zostaną skopiowane do katalogu tmp wraz z resztą motywu (aby można było użyć ścieżki względnej w CSS i JS, aby dotrzeć do plików obrazów). 
O menedżerze zasobów w Yii: https://www.yiiframework.com/wiki/148/understanding-assets 
O pakietach w Yii: http://www.yiiframework.com/doc/api/1.1 /CClientScript#szczegóły-pakietów


Będą korzystać z systemu dziedziczenia. Oznacza to, że jeśli dodasz plik CSS/JS do motywu, ale nie ma go w motywie, silnik sprawdzi wszystkie motywy macierzyste tego motywu i użyje pierwszego, który znajdzie. Jeśli więc użytkownik rozszerzy Twój motyw za pomocą edytora motywów, wszystkie te pliki zostaną odziedziczone w jego motywie. Słowa kluczowe odnoszą się do tego systemu dziedziczenia.


* '''add''' : doda plik do motywu i do całego odziedziczonego motywu
* '''replace''': zastąpi plik motywu macierzystego
* „usuń”: usunie plik z „dowolnego” pakietu, nawet pakietu podstawowego (od wersji 3.14)

<div class="simplebox">[[File:help.png]] Pamiętaj, że możesz ustawić w config.php 'force_xmlsettings_for_survey_rendering', aby konfiguracja była odczytywana z XML zamiast z DB (bez potrzeby resetowania). Ułatwi to testowanie modyfikacji plików XML i zapobiegnie konieczności odinstalowywania/ponownej instalacji motywu przy każdej modyfikacji pliku XML</div>


Kilka uwag na temat tych słów kluczowych: 


===== Wskazówki dotyczące dziedziczenia =====
Jak wyjaśniono wcześniej, słowo kluczowe "add" może odnosić się do pliku znajdującego się w jednym z motywów macierzystych. Możesz więc „dodać” plik w tej sekcji i nadal nie mieć tego pliku w swoim motywie, ale w jednym z jego motywów nadrzędnych. Silnik sprawdzi wszystkie motywy nadrzędne i użyje pierwszego, który znajdzie. Jeśli nie może znaleźć pliku, a tryb debugowania jest włączony w konfiguracji, a tryb debugowania frontendu js jest włączony w ustawieniach globalnych, w konsoli zostanie wyświetlony komunikat z ostrzeżeniem. Np.: jeśli dodamy my_theme:<add> css/nieistniejący.css</add> , w konsoli zobaczymy:

<syntaxhighlight lang="">
 (¯`·._.·(¯`·._.· Błąd konfiguracji motywu ·._.·´¯)·._.·´¯) 

Nie można znaleźć pliku „css/unexisting.css” zdefiniowanego w motywie „my_theme” 
</syntaxhighlight>

Jeśli tryb debugowania jest wyłączony, żaden błąd nie będzie widoczny. Silnik po prostu zignoruje nieprawidłowe instrukcje add.



===== Kiedy używać dodawania, kiedy zastępować, kiedy mogę po prostu pozostawić to motywowi nadrzędnemu? =====

Po pierwsze: dodaj i zamień to to samo słowo kluczowe. Możesz użyć jednego lub drugiego, silnik zrobi to samo. Są one odrębne dla ludzkich czytelników, więc rozumieją, jaki był Twój zamiar. 


Nie możesz dodać pliku o tej samej nazwie co motyw macierzysty: zawsze go zastąpi. np.: Jeśli masz plik o nazwie „moj_motyw_matki/foo.css” i dodasz plik o nazwie „foo.cs” w motywie potomnym, do motywu zostanie dodany tylko „motyw_mój_marki/foo.css”. Jeśli chcesz zachować „motyw_mój_matki/foo.css”, po prostu wybierz inną nazwę dla „motywu_córki/foo.css”, np. „motyw_córki/bar.css”. Zatem słowo kluczowe „dodaj” może zostać użyte jako słowo kluczowe „zamień”. 


Jeśli zastanawiasz się dlaczego: znacznie ułatwia to automatyczne generowanie odziedziczonego motywu, kopiowanie sekcji pliku działa od razu po wyjęciu z pudełka (nie ma potrzeby zmiany nazwy „dodaj” na „zamień” podczas rozszerzania pliku). 


Aby to wyjaśnić, weźmy przykład Fruity. Oto sekcja pliku css:


<syntaxhighlight lang="xml">
<css> 
<add> css/variations/sea_green.css</add> 
<replace> css/animate.css</replace> 
<replace> css/motyw.css</replace> 
<replace> css/niestandardowy.css</replace> 
</css> 
</syntaxhighlight>


Jeśli spojrzysz na plik custom.css w języku owocowym, jest on dokładnie taki sam jak plik waniliowy. Moglibyśmy usunąć plik niestandardowy.css znajdujący się w Fruity, załadowałby się plik waniliowy. Moglibyśmy usunąć to oświadczenie<replace> niestandardowe CSS</replace> z manifestu Fruity, zostanie użyta instrukcja z wanilii i załadowany zostanie waniliowy plik custom.css. 


Dlaczego więc używamy tego stwierdzenia<replace> niestandardowe CSS</replace> w owocowym manifeście? Odpowiedź jest prosta: ponieważ chcemy, aby użytkownik końcowy mógł rozszerzyć motyw Fruity, zmodyfikować plik w swoim motywie lokalnym i załadować ten zmodyfikowany plik z odziedziczonego motywu. Aby zrozumieć, po prostu rozszerz Fruity i spójrz na rozszerzony motyw. Rozszerzony motyw nie ma nawet pliku custom.css. Zatem zostanie użyty owocowy. Ale: jeśli użytkownik utworzy ten plik w rozszerzonym motywie (klikając „rozszerz” w edytorze motywów), wówczas plik ten zostanie załadowany z jego motywu. 


Ogólnie rzecz biorąc: 
Jeśli tworzysz motyw od zera, nie rozszerzając żadnego motywu, po prostu użyj instrukcji add, aby dodać pliki css/js. To proste.
Jeśli tworzysz motyw rozszerzający inny motyw i nie chcesz, aby użytkownicy mogli rozszerzać plik css/js z motywu macierzystego: nie używaj instrukcji add w swoim manifeście. Pliki będą nadal ładowane z konfiguracji motywu macierzystego.
Jeśli tworzysz motyw rozszerzający inny motyw i chcesz zastąpić plik z motywu macierzystego: użyj słowa kluczowego zamień (słowo kluczowe add będzie miało taki sam skutek) 
Jeśli tworzysz motyw rozszerzający inny motyw, jeśli nie zastępujesz danego pliku z css/js, ale chcesz, aby użytkownicy mogli rozszerzać ten plik: użyj w swoim manifeście instrukcji „replace” dla ten plik. Nawet jeśli nie zastąpisz pliku, używając słowa kluczowego zamień w manifeście: pozwalasz użytkownikowi to zrobić, jeśli chce to zrobić.  


Tylko ten ostatni przypadek wymaga trochę gimnastyki umysłowej, aby go zrozumieć, wszystkie pozostałe przypadki są trywialne.



<div class="simplebox">[[File:help.png]] 
Możesz także rejestrować pliki CSS i JS bezpośrednio z kodu twig. Pliki te zostaną załadowane tylko wtedy, gdy zostanie wyświetlony monit o plik twig. Jeśli chcesz, aby użytkownicy mogli dziedziczyć pliki JS/Css z edytora motywów, pamiętaj o użyciu funkcji {{registerTemplateCssFile('my_style.css')}} i {{registerTemplateScript('my_script.js')}} . Jeśli nie użyjesz tych funkcji, Twój motyw może działać, ale dziedziczenie po nim zostanie przerwane. To ta sama logika, co funkcja {{image('my_picture.jpg')}}
</div>

===== Słowo kluczowe usuwania =====

Słowo kluczowe „remove” jest dostępne dopiero od wersji 3.14. Za pomocą tego możesz usunąć dowolny plik css/plik z dowolnego pakietu, nawet podstawowego. Jest używany w motywie Material Premium do usuwania plików pola wyboru Awseome Bootstrap:

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

więc powinieneś użyć tej samej składni, co plik pakietu (np. samo „awesome-bootstrap-checkbox.css” bez ścieżki folderu nie działałoby). Pełną listę pakietów podstawowych i ich plików znajdziesz w plikach /application/config/packages.php i config/ Third_party.php. Na przykład dla Awesome-bootstrap-checkbox.css:
https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56

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


Innym sposobem znalezienia dokładnej nazwy do użycia w tagu usuwania jest włączenie menedżera zasobów (wyłączenie trybu debugowania lub ustawienie „use_asset_manager”=>true w konfiguracji). Następnie ścieżką do użycia będzie ta znajdująca się tuż za katalogiem losowym w katalogu tmp. Na przykład dla 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>

Pliki, których nie należy usuwać:

'''jquery-3.1.1.min.js''': potrzebne

'''jquery-migrate-3.0.0.min.js''': potrzebne

'''survey.js''': potrzebne

'''moment-with-locales.min.js''': potrzebne dla typu pytania dotyczącego daty (i innych, jak sądzę)

'''em_javascript.js''' : wymagany dla wszystkich JavaScript ExpressionScript

==== Sekcja opcji ====

Ta sekcja jest zależna od opcji Twojego motywu. Będzie on używany do zasilania pól „opcji” tabeli template_configuration jako tablicy json.

=== Dalsze informacje ===

* [[Motyw:Dostępna funkcja]]

== Kilka notatek ==

'''UWAGA''': jeśli edytujesz plik XML motywu, musisz odinstalować i ponownie zainstalować motyw, aby został wzięty pod uwagę. 

„UWAGA”: aby tego uniknąć, możesz wymusić użycie XML zamiast DB. W config.php włącz tryb debugowania i usuń komentarz:

'force_xmlsettings_for_survey_rendering' => true, // Odkomentuj, jeśli chcesz wymusić użycie pliku XML zamiast bazy danych (w celu łatwego tworzenia motywu) 

Uważaj: wszystko zostanie załadowane z XML (w tym opcje itp.)


„UWAGA”: jeśli ręcznie edytujesz pliki CSS/JS (bez korzystania z Edytora motywów) i jeśli tryb debugowania jest wyłączony, możesz teraz wymusić opróżnienie zasobu. W „Ustawieniach globalnych”, „Zakładce Ogólne” kliknij przycisk „Wyczyść pamięć podręczną zasobów”.

'''UWAGA''': jeśli usuniesz sekcję