Edytor motywów

Wprowadzenie

Motyw ankiety określa, jak ankieta wygląda dla uczestników: układ strony, kolory, czcionki, logo oraz stylizację każdego pytania. Motywy są tworzone z szablonów Twig, CSS i JavaScript i wykorzystują Bootstrap 5 jako framework CSS.

Wiele typowych zmian nie wymaga żadnego kodu. Logo, kolory, czcionki i kilka ustawień wyświetlania można zmienić za pomocą opcji motywu. Edytora motywów opisanego na tej stronie użyj wtedy, gdy chcesz pójść dalej: dodać własny CSS lub JavaScript, zmienić kod HTML strony albo przesłać obrazy i inne pliki dla swojego motywu.

LimeSurvey zawiera następujące główne motywy ankiet:

• Fruity TwentyThree (fruity_twentythree): motyw domyślny.
• Bootstrap Vanilla (vanilla): prosty motyw bazowy dla programistów, którzy chcą stworzyć własny motyw oparty na Bootstrap.
• Fruity (fruity) i Bootswatch (bootswatch): oba rozszerzają Bootstrap Vanilla.

Wygląd poszczególnych typów pytań jest kontrolowany przez motywy pytań, a nie przez motyw ankiety. Aby zmienić kod HTML typu pytania, utwórz motyw pytań.

Zanim zaczniesz

Aby korzystać z edytora motywów, potrzebujesz globalnego uprawnienia Motywy (zobacz uprawnienia globalne) lub musisz być superadministratorem. Rozszerzenie motywu wymaga prawa Utwórz, zapisanie zmian wymaga prawa Aktualizacja, a usunięcie motywu lub zresetowanie pliku wymaga prawa Usuń.

  Motyw z błędami może uniemożliwić korzystanie z każdej ankiety, która go używa. Przetestuj zmiany w podglądzie ankiety, zanim użyjesz motywu w aktywnej ankiecie.

Motywów głównych nie można edytować: rozwiń je

Motywy główne są aktualizowane razem z LimeSurvey, dlatego nie można ich zmieniać bezpośrednio. Aby dostosować taki motyw, rozwiń go. Rozwinięcie tworzy nowy motyw użytkownika, który dziedziczy wszystko po motywie nadrzędnym. Twój motyw zawiera tylko pliki, które zmienisz; wszystko inne jest pobierane z motywu nadrzędnego. Dzięki temu Twój motyw nadal otrzymuje poprawki błędów i ulepszenia, gdy LimeSurvey aktualizuje motyw nadrzędny.

Aby rozwinąć motyw, wykonaj jedną z poniższych czynności:

• Przejdź do Konfiguracja > Motywy, otwórz menu akcji (⋯) na końcu wiersza motywu i kliknij Rozwiń, lub
• otwórz motyw w edytorze motywów i kliknij Rozwiń na pasku narzędzi.

Wprowadź nazwę nowego motywu. Edytor motywów otworzy następnie Twój nowy motyw.

Gdzie przechowywane są motywy

• Motywy główne: themes/survey/ w Twojej instalacji LimeSurvey.
• Motywy użytkownika (rozwinięte, przesłane lub zaimportowane): upload/themes/survey/.

Pliki motywu użytkownika możesz też edytować bezpośrednio na serwerze za pomocą własnego edytora. Upewnij się, że serwer WWW nadal może odczytywać i zapisywać te pliki, aby można było dalej korzystać także z edytora motywów.

Edytor motywów

Aby otworzyć edytor motywów, przejdź do Konfiguracja > Motywy, otwórz menu akcji (⋯) na końcu wiersza motywu i kliknij Edytor motywów.

Jeśli otworzysz motyw główny, zobaczysz informację, że jest to motyw standardowy, wraz z odnośnikiem do jego rozwinięcia. Możesz przeglądać jego pliki i podgląd, ale nie możesz zapisywać zmian.

Pasek narzędzi

• Eksport: pobiera motyw jako plik ZIP.
• Rozwiń: tworzy nowy motyw, który dziedziczy po tym motywie (zobacz powyżej).
• Zmień nazwę: zmienia nazwę motywu. Dostępne tylko dla motywów użytkownika.
• Usuń: usuwa motyw. Nie można usunąć motywu ustawionego jako domyślny.
• Motyw: przełącza edytor motywów na inny motyw.
• Ekran: wybiera, która strona ankiety jest wyświetlana w podglądzie i które pliki są wymienione do edycji. Dostępne ekrany: Pytanie, Ankiety, Powitanie, Zakończony, Oceny, Błąd, Wyczyść wszystko, Wczytaj, Zapisz, Rejestracja, Drukuj odpowiedzi, Publiczne statystyki, PDF, Przekroczono kwoty, Nawigacja i Uczestnik.

Edycja plików

Panele po prawej stronie wyświetlają pliki używane przez wybrany ekran:

• Pliki segmentów ekranu: szablony Twig, które budują stronę.
• Pliki JavaScript
• Pliki CSS
• Inne pliki: obrazy, czcionki i wszelkie inne pliki motywu.

Kliknij nazwę pliku, aby otworzyć go w edytorze. Pliki oznaczone jako Dziedziczony pochodzą z motywu nadrzędnego. Dziedziczony plik nadal możesz edytować: przycisk pod edytorem ma wtedy etykietę Kopiuj do lokalnego motywu i zapisz zmiany, a zapisanie kopiuje plik do Twojego motywu wraz ze zmianami. Od tej chwili zamiast pliku motywu nadrzędnego używana jest Twoja kopia.

Pliki należące do Twojego motywu mają przycisk Resetuj. Reset usuwa Twoją kopię, więc ponownie używany jest plik z motywu nadrzędnego.

Przesyłanie plików

Użyj pola przesyłania na dole panelu Inne pliki, aby dodać do motywu obrazy, czcionki lub inne pliki. Przesłane pliki są przechowywane w folderze files/ motywu. Domyślnie można przesyłać obrazy (gif, ico, jpg, jpeg, png) oraz pliki następujących typów: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq i lsg. Administrator może zmienić te listy za pomocą ustawień allowedthemeimageformats i allowedthemeuploads w pliku config.php.

Aby wyświetlić przesłany obraz w pliku Twig, użyj funkcji image():

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

W plikach CSS odwołuj się do przesłanych plików za pomocą ścieżki względnej do folderu css, na przykład url('../files/background.jpg').

Podgląd

Pod edytorem podgląd pokazuje wybrany ekran z przykładową zawartością. Użyj przycisków Mobilny, 640x480, 800x600, 1024x768 i Pełny, aby sprawdzić stronę przy różnych rozmiarach ekranu.

Podgląd używa przykładowych danych i może nie pokazywać każdego stylu dokładnie tak, jak w prawdziwej ankiecie. Zawsze sprawdzaj swoje zmiany także w podglądzie prawdziwej ankiety.

Importowanie i eksportowanie motywów

• Aby przenieść motyw do innej instalacji LimeSurvey, kliknij Eksport na pasku narzędzi edytora motywów. Motyw zostanie pobrany jako plik ZIP.
• Aby zainstalować motyw z pliku ZIP, przejdź do Konfiguracja > Motywy i kliknij Prześlij i zainstaluj.

Jak zbudowany jest motyw

Folder motywu

Folder motywu zawiera:

• config.xml: Manifest motywu: nazwa, motyw nadrzędny, pliki CSS i JavaScript, opcje motywu oraz ekrany wyświetlane w edytorze motywów.
• views/: Szablony Twig. layout_global.twig to główny układ większości stron ankiety. Inne układy są używane na stronach specjalnych, na przykład layout_survey_list.twig dla publicznej listy ankiet i layout_errors.twig dla stron błędów. Folder views/subviews/ zawiera mniejsze szablony dołączane przez układy.
• css/ i scripts/: Pliki CSS i JavaScript motywu.
• files/: Obrazy i inne pliki używane przez motyw.
• options/: Strona opcji motywu.

Szablony Twig

Szablony otrzymują dane ankiety w zmiennej aSurveyInfo. Aby zobaczyć całą jej zawartość, włącz tryb debugowania w pliku application/config/config.php i dodaj tę linię na końcu elementu body w pliku layout_global.twig:

{{ dump(aSurveyInfo) }}

Funkcje, których możesz używać w szablonach, opisano w artykule Dostępne funkcje Twig. Ze względów bezpieczeństwa szablony działają w piaskownicy, więc dostępne są tylko te funkcje.

config.xml

Sekcja <files> zawiera listę plików CSS i JavaScript ładowanych na stronach ankiety:

• <add> dodaje plik. Jeśli motyw nadrzędny ma już plik o tej samej nazwie, Twój plik go zastępuje.
• <remove> zapobiega ładowaniu pliku motywu nadrzędnego.

Nie musisz ponownie wymieniać plików motywu nadrzędnego: i tak zostaną załadowane.

LimeSurvey odczytuje plik config.xml podczas instalacji motywu i zapisuje ustawienia w bazie danych. Po zmianie pliku config.xml zainstalowanego motywu przejdź do Konfiguracja > Motywy, otwórz menu akcji (⋯) motywu i kliknij Resetuj, aby ponownie wczytać plik.

Dodawanie własnego CSS i JavaScript

Każdy motyw główny ma dwa pliki zarezerwowane na Twój własny kod:

• css/custom.css: Ładowany po wszystkich innych plikach CSS, więc jego reguły nadpisują style motywu.
• scripts/custom.js: Ładowany po własnym kodzie JavaScript motywu.

Gdy rozszerzasz motyw, to właśnie te pliki należy zmieniać. Dodawaj swój CSS do pliku custom.css zamiast edytować główne pliki CSS motywu, aby Twój motyw nadal otrzymywał aktualizacje motywu nadrzędnego.

Aby dodać więcej plików, prześlij je i wymień w sekcji <files> pliku config.xml Twojego motywu. Użyj nazwy pliku, która nie istnieje w motywie nadrzędnym, w przeciwnym razie Twój plik zastąpi plik motywu nadrzędnego:

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

Strony ankiety są domyślnie ładowane przy użyciu Ajax, więc przeglądarka nie ładuje całej strony od nowa, gdy uczestnik przechodzi na następną stronę. Uruchamiaj swój kod JavaScript zarówno przy pierwszym załadowaniu strony, jak i przy każdym załadowaniu strony przez Ajax:

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

Stylizacja pytań za pomocą CSS

Wszystkie przykłady w tej sekcji należy umieścić w pliku custom.css Twojego motywu.

Klasy strony

Elementy <html> i <body> mają klasy, których możesz użyć do stylizowania całych stron:

• html: Kod języka (na przykład en) i kierunek tekstu (dir-ltr lub dir-rtl).
• body: Nazwa motywu i każdego motywu nadrzędnego (na przykład fruity_twentythree), czcionka (na przykład font-ibm-sans), język (na przykład lang-en) oraz brand-logo, gdy wyświetlane jest logo.

Klasy kontenera pytania

Każde pytanie jest opakowane w element z klasą question-container. Ma on również:

• Klasę typu pytania (zobacz tabelę poniżej).
• mandatory: Pytanie jest obowiązkowe lub częściowo obowiązkowe.
• input-error: Odpowiedź nie przeszła walidacji lub nie udzielono odpowiedzi na pytanie obowiązkowe.
• missing: Pytanie nadal ma pytania bez odpowiedzi, a uczestnik już je minął.
• ls-hidden i ls-irrelevant: Pytanie jest ukryte przez swój warunek.
• ls-hidden-attribute: Pytanie jest ukryte przez ustawienie „Zawsze ukrywaj to pytanie”.
• Wszelkie klasy wpisane w ustawieniu pytania Klasy CSS (w sekcji Widok). Użyj tego do stylizowania pojedynczych pytań.

Na przykład obowiązkowe pytanie Lista (radio), na które nie udzielono odpowiedzi:

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

Klasy typów pytań

Typ pytania	Klasa	Kod typu
Skala 5-punktowa	.choice-5-pt-radio	5
Tabela	.array-flexible-row	F
Tabela (skala 5-punktowa)	.array-5-pt	A
Tabela (skala 10-punktowa)	.array-10-pt	B
Tabela (wzrost/bez zmian/spadek)	.array-increase-same-decrease	E
Tabela (liczby)	.array-multi-flexi	:
Tabela (teksty)	.array-multi-flexi-text	;
Tabela (tak/nie wiem/nie)	.array-yes-uncertain-no	C
Tabela w kolumnach	.array-flexible-column	H
Tabela dwóch skal	.array-flexible-dual-scale	1
Data/czas	.date	D
Równanie	.equation	*
Przesyłanie pliku	.upload-files	|
Płeć	.gender	G
Bardzo długi dowolny tekst	.text-huge	U
Wersja językowa	.language	I
Lista (rozwijana)	.list-dropdown	!
Lista (radio)	.list-radio	L
Lista z komentarzem	.list-with-comment	O
Długi dowolny tekst	.text-long	T
Wielokrotny wybór	.multiple-opt	M
Wielokrotny wybór z komentarzami	.multiple-opt-comments	P
Wielokrotna wartość liczbowa	.numeric-multi	K
Wielokrotny krótki tekst	.multiple-short-txt	Q
Wartość liczbowa	.numeric	N
Ranking	.ranking	R
Krótki dowolny tekst	.text-short	S
Tekst	.boilerplate	X
Tak/Nie	.yes-no	Y

Klasy dla części pytania

Wewnątrz kontenera pytania obszar odpowiedzi używa tych klas. Niektóre zależą od ustawień wyświetlania pytania: na przykład Tabela (liczby) używa innych klas, gdy wyświetla pola wyboru zamiast list rozwijanych.

Klasa	Zastosowanie	Używana przez (przykłady)
.ls-answers	Element zawierający wszystkie opcje odpowiedzi	Wszystkie typy pytań
.answers-list	Lista lub wiersz opcji odpowiedzi	Lista (radio), Wielokrotny wybór, Ranking, wiersze większości tabel
.subquestion-list, .questions-list	Lista lub tabela podpytań	Tabele, Wielokrotny krótki tekst, Wielokrotna wartość liczbowa
.answer-item	Jedna opcja odpowiedzi lub jedno pole wprowadzania	Prawie wszystkie typy pytań
.noanswer-item	Opcja „Brak odpowiedzi”	Tabele, Skala 5-punktowa, Lista z komentarzem
.question-item	Podpytanie, które jest jednocześnie odpowiedzią	Wielokrotny wybór, Wielokrotny krótki tekst, Wielokrotna wartość liczbowa
.radio-list	Lista lub wiersz przycisków radio	Lista (radio), Skala 5-punktowa, Lista z komentarzem, wiersze tabel z przyciskami radio
.radio-array	Tabela przycisków radio	Tabela, Tabela (skala 5-punktowa), Tabela (skala 10-punktowa), Tabela (wzrost/bez zmian/spadek), Tabela (tak/nie wiem/nie)
.radio-item	Jeden przycisk radio z etykietą	Lista (radio), Skala 5-punktowa, Lista z komentarzem, tabele z przyciskami radio
.checkbox-list	Lista pól wyboru	Wielokrotny wybór, Wielokrotny wybór z komentarzami
.checkbox-array	Tabela pól wyboru	Tabela (liczby) z formą pola wyboru
.checkbox-item	Jedno pole wyboru z etykietą	Wielokrotny wybór, Wielokrotny wybór z komentarzami, Tabela (liczby) z formą pola wyboru
.checkbox-text-item	Pole wyboru z polem tekstowym	Wielokrotny wybór z komentarzami
.comment-item	Pole komentarza obok pola wyboru	Wielokrotny wybór z komentarzami
.text-list	Lista pól tekstowych	Wielokrotny krótki tekst, Wielokrotna wartość liczbowa
.text-item	Jedno pole tekstowe	Krótki, długi i bardzo długi dowolny tekst, Wielokrotny krótki tekst, Tabela (teksty)
.number-list, .numeric-item	Pola liczbowe	Wielokrotna wartość liczbowa, Wartość liczbowa
.number-array	Tabela pól liczbowych	Tabela (liczby), Tabela (teksty)
.text-array	Tabela pól tekstowych	Tabela (teksty), Tabela (liczby)
.dropdown-array, .dropdown-list, .dropdown-item	Tabele, wiersze i komórki z listami rozwijanymi	Tabela (liczby), Tabela dwóch skal z listami rozwijanymi
.date-item	Pole daty	Data/czas
.upload-item	Obszar przesyłania pliku	Przesyłanie pliku
.answertext	Tekst podpytania w wierszu tabeli	Tabele
.col-answers	Kolumna z tekstami podpytań	Tabele
.ls-heading	Wiersz nagłówka z opcjami odpowiedzi	Tabele
.ls-odd, .ls-even	Naprzemienne wiersze	Tabele
.ls-label-xs-visibility	Etykieta widoczna tylko na małych ekranach i dla czytników ekranu	Komórki tabel
.ls-input-group-extra	Prefiks lub sufiks pola wprowadzania	Krótki dowolny tekst, Wartość liczbowa, Wielokrotny krótki tekst, Wielokrotna wartość liczbowa
.ls-js-hidden	Ukryty, gdy JavaScript jest aktywny	Tabela dwóch skal, Lista (radio)
.ls-no-js-hidden	Ukryty, gdy JavaScript nie jest aktywny	Ranking
.ls-js-hidden-sr	Ukryty, gdy JavaScript jest aktywny, ale nadal odczytywany przez czytniki ekranu	Ranking

W typie Lista (radio) opcja „Brak odpowiedzi” ma klasę no-anwser-item (z taką pisownią) zamiast noanswer-item.

Na przykład tak wygląda kod HTML odpowiedzi pytania Lista (radio):

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

Klasy walidacji i podpowiedzi

Podpowiedzi walidacyjne (takie jak „Proszę wybrać jedną z następujących odpowiedzi” lub „Proszę wprowadzić liczbę od 1 do 10”) zawsze mają klasę ls-em-tip. Gdy uczestnik odpowiada na pytanie, LimeSurvey dodaje klasę ls-em-success, jeśli reguła podpowiedzi jest spełniona, oraz ls-em-error, jeśli nie jest, dzięki czemu można inaczej stylizować oba stany. Podpowiedzi ukryte za pomocą ustawienia pytania Ukryj podpowiedź otrzymują klasę hide-tip.

Każda podpowiedź ma również klasę określającą jej typ:

Klasa	Podpowiedź
.em_default	Domyślna podpowiedź dla danego typu pytania (na przykład „Proszę wybrać jedną z następujących odpowiedzi”)
.em_num_answers	Minimalna lub maksymalna liczba odpowiedzi
.em_value_range	Minimalna lub maksymalna wartość
.em_sum_range	Minimalna lub maksymalna suma wartości
.em_sum_equals	Suma wartości musi być równa podanej wartości
.em_value_integer	Dozwolone są tylko liczby całkowite
.em_numbers_only	Dozwolone są tylko liczby
.em_other_numbers_only	W polu „Inne” dozwolone są tylko liczby
.em_other_comment_mandatory	Wybrano opcję „Inne”, ale jej pole tekstowe jest puste
.em_regex_validation	Odpowiedź musi pasować do wzorca walidacji
.em_q_fn_validation	Równanie walidacji pytania
.em_sq_fn_validation	Równanie walidacji podpytania

Języki pisane od prawej do lewej (RTL)

W przypadku języków pisanych od prawej do lewej element <html> ma klasę dir-rtl, a motywy główne ładują wersję RTL swojego głównego pliku CSS. Użyj .dir-rtl w swoim CSS dla reguł, które mają dotyczyć wyłącznie języków pisanych od prawej do lewej.

Wskazówki i wskazówki

Poniższe przepisy należy umieścić w pliku custom.css (lub w pliku Twig, jeśli tak zaznaczono) motywu utworzonego przez rozszerzenie motywu głównego. W przykładach zastąp #c0392b własnym kolorem.

Zmiana koloru przycisków opcji i pól wyboru

Aby użyć jednego z kolorów dostępnych w motywie Fruity TwentyThree, wybierz Kolor motywu w opcjach motywu. W opcjach motywu można także wybrać inną Ikonę zaznaczenia.

Aby użyć dowolnego innego koloru, dodaj CSS do pliku custom.css. Motywy główne rysują własne przyciski opcji i pola wyboru zamiast domyślnych elementów przeglądarki, więc zmiana koloru oznacza zmianę tych narysowanych elementów.

Fruity TwentyThree:

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

Bootstrap Vanilla, Fruity i Bootswatch:

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

Zadbaj o odpowiedni kontrast między kolorem a tłem, aby uczestnicy z osłabionym wzrokiem nadal widzieli, które odpowiedzi są zaznaczone.

Powiększanie przycisków opcji i pól wyboru

Większe przyciski opcji i pola wyboru łatwiej dotknąć na telefonach i tabletach. To rozwiązanie działa we wszystkich motywach głównych:

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

W motywie Fruity TwentyThree dodaj także odstęp między przyciskami opcji a tekstem odpowiedzi:

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

Wartości do około 1,4 działają bez dodatkowych zmian. Przy większych wartościach kontrolki zaczynają nachodzić na tekst odpowiedzi i krawędzie wierszy tabel na małych ekranach, dlatego trzeba także dodać więcej odstępu wokół nich.

Zmiana koloru paska postępu

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

Wyświetlanie treści tylko w jednym języku

Element <body> ma klasę z bieżącym językiem, na przykład lang-en lub lang-fr. Możesz jej użyć do wyświetlania różnych treści w zależności od języka, na przykład wiersza pomocy w stopce. Dodaj tekst dla każdego języka do pliku Twig swojego motywu, takiego jak subviews/footer/footer.twig:

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

Następnie ukryj teksty w pozostałych językach w pliku custom.css:

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

Użycie innego logo w każdej ankiecie

Nie potrzebujesz osobnego motywu dla każdego logo. Opcje motywu można ustawić dla pojedynczej ankiety: otwórz ankietę, kliknij Opcje motywu w menu Ustawienia badania i wybierz inny Plik logo. Zobacz Opcje motywu.

Wyświetlanie własnej ikony favicon

Favicon to mała ikona wyświetlana na karcie przeglądarki i w zakładkach. Motywy główne wyświetlają plik files/favicon.ico motywu. Aby użyć własnej ikony, nadaj jej nazwę favicon.ico i prześlij ją w panelu Inne pliki rozszerzonego motywu. Zastąpi ona ikonę motywu nadrzędnego.

Wyśrodkowanie logo w motywie Fruity TwentyThree

Włącz opcję Logo w opcjach motywu, a następnie dodaj do pliku custom.css następujący kod:

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

Dodawanie własnego logo do listy ankiet publicznych

Publiczna lista ankiet domyślnie wyświetla logo LimeSurvey. Aby wyświetlić własne logo:

1. Rozszerz motyw Fruity TwentyThree i otwórz swój motyw w edytorze motywów.
2. Prześlij swoje logo w panelu Inne pliki.
3. Wybierz ekran Ankiety i otwórz plik layout_survey_list.twig.
4. Znajdź element <div>, który zawiera {{ include('./ls_logo_svg.twig') }}. Zastąp cały ten element <div>, łącznie z wierszem include, kodem przedstawionym pod tymi krokami.
5. Kliknij Kopiuj do lokalnego motywu i zapisz zmiany.
6. Przejdź do Konfiguracja > Ustawienia globalne > Ogólne i wybierz swój motyw w polu Motyw listy ankiet publicznych i stron błędów.

Użyj nazwy przesłanego pliku, a jako tekstu alternatywnego nazwy swojej organizacji:

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

Zmiana okna podręcznego przesyłania plików

^{(New in 7.6.0 )} Okno podręczne, które otwiera się, gdy uczestnik przesyła pliki w pytaniu z przesyłaniem pliku, jest tworzone z pliku Twig survey/questions/answer/file_upload/modal-container.twig. Edytor motywów nie wyświetla tego pliku. Aby zmienić okno, na przykład dodać tekst pomocy, skopiuj plik z folderu application/views/ w swojej instalacji LimeSurvey do folderu views/ swojego motywu na serwerze (lub do pliku ZIP motywu przed jego zaimportowaniem), zachowując strukturę folderów: views/survey/questions/answer/file_upload/modal-container.twig. Następnie edytuj kopię. Motyw pytań dla pytania z przesyłaniem pliku może również zawierać własną kopię. Zachowaj ukryte pola formularza i identyfikatory ID w pliku, ponieważ skrypt przesyłania ich potrzebuje.

Dodawanie linii oddzielającej do tabel dwóch skal

Aby narysować pionową linię między dwiema skalami w pytaniu typu Tabela dwóch skal:

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

JavaScript w pytaniach

Aby uruchamiać JavaScript na wszystkich stronach ankiet, umieść go w pliku custom.js swojego motywu (zobacz powyżej).

Możesz też dodać skrypt do treści pojedynczego pytania lub grupy. LimeSurvey usuwa skrypty z tych treści, chyba że filtr XSS jest wyłączony dla Twojego użytkownika. Filtr nigdy nie dotyczy superadministratorów. W przypadku innych użytkowników opcja Filtruj HTML z XSS musi być wyłączona w sekcji Konfiguracja > Ustawienia globalne > Bezpieczeństwo. Rób to tylko wtedy, gdy ufasz wszystkim osobom, które mogą edytować ankiety. Szczegóły i przykłady znajdziesz w artykule Obejścia: manipulowanie ankietą w czasie działania za pomocą JavaScript.