Редактор теми

Вступ

Тема опитування визначає, як ваше опитування виглядає для учасників: макет сторінки, кольори, шрифти, логотипи та оформлення кожного питання. Теми створюються на основі шаблонів Twig, CSS і JavaScript та використовують Bootstrap 5 як CSS-фреймворк.

Багато типових змін не потребують жодного коду. Логотип, кольори, шрифти та кілька параметрів відображення можна змінити за допомогою параметрів теми. Скористайтеся редактором теми, описаним на цій сторінці, якщо потрібно піти далі: додати власний CSS або JavaScript, змінити HTML сторінки або завантажити зображення та інші файли для своєї теми.

LimeSurvey постачається з такими основними темами опитування:

• Fruity TwentyThree (fruity_twentythree): тема за замовчуванням.
• Bootstrap Vanilla (vanilla): проста базова тема для розробників, які хочуть створити власну тему на основі Bootstrap.
• Fruity (fruity) і Bootswatch (bootswatch): обидві розширюють Bootstrap Vanilla.

Вигляд окремих типів питань визначається темами питань, а не темою опитування. Щоб змінити HTML типу питання, створіть тему питання.

Перш ніж почати

Щоб користуватися редактором теми, вам потрібен глобальний дозвіл Теми (див. глобальні дозволи) або статус суперадміністратора. Для розширення теми потрібне право Створити, для збереження змін — Оновити, а для видалення теми або скидання файлу — Видалити.

  Тема з помилками може зробити непридатним кожне опитування, яке її використовує. Перевірте свої зміни за допомогою попереднього перегляду опитування, перш ніж використовувати тему в активному опитуванні.

Основні теми не можна редагувати: розширюйте їх

Основні теми оновлюються разом із LimeSurvey, тому ви не можете змінювати їх безпосередньо. Щоб налаштувати таку тему, розширте її. Розширення створює нову тему користувача, яка успадковує все від своєї батьківської теми. Ваша тема містить лише файли, які ви змінили; усе інше береться з батьківської теми. Так ваша тема й надалі отримує виправлення помилок і покращення, коли LimeSurvey оновлює батьківську тему.

Щоб розширити тему, виконайте одну з дій:

• Перейдіть до Налаштування > Теми, відкрийте меню дій (⋯) наприкінці рядка теми та натисніть Розширити, або
• Відкрийте тему в редакторі теми та натисніть Розширити на панелі інструментів.

Введіть назву нової теми. Після цього редактор теми відкриє вашу нову тему.

Де зберігаються теми

• Основні теми: themes/survey/ у вашій установці LimeSurvey.
• Теми користувача (розширені, завантажені або імпортовані теми): upload/themes/survey/.

Ви також можете редагувати файли теми користувача безпосередньо на сервері у власному редакторі. Переконайтеся, що веб-сервер після цього все ще може читати й записувати файли, щоб ви могли й надалі користуватися редактором теми.

Редактор теми

Щоб відкрити редактор теми, перейдіть до Налаштування > Теми, відкрийте меню дій (⋯) наприкінці рядка теми та натисніть Редактор теми.

Якщо ви відкриваєте основну тему, з'являється повідомлення про те, що це стандартна тема, із посиланням для її розширення. Ви можете переглядати її файли та попередній перегляд, але не можете зберігати зміни.

Панель інструментів

• Експорт: завантажує тему у вигляді ZIP-файлу.
• Розширити: створює нову тему, яка успадковує цю (див. вище).
• Перейменувати: перейменовує тему. Доступно лише для тем користувача.
• Видалити: видаляє тему. Не можна видалити тему, встановлену як тема за замовчуванням.
• Тема: перемикає редактор теми на іншу тему.
• Екран: вибирає, яка сторінка опитування відображається в попередньому перегляді та які файли доступні для редагування. Доступні екрани: Питання, Список опитувань, Привітання, Завершено, Оцінювання, Помилка, Очистити все, Завантаження, Збереження, Реєстрація, Роздрукувати відповіді, Публічна статистика, PDF, Квоти перевищені, Навігація та Учасник.

Редагування файлів

Панелі праворуч містять список файлів, що використовуються вибраним екраном:

• Файли частин екрана: шаблони Twig, які формують сторінку.
• Файли JavaScript
• Файли CSS
• Інші файли: зображення, шрифти та будь-які інші файли теми.

Натисніть на ім'я файлу, щоб відкрити його в редакторі. Файли з позначкою Успадковано походять від батьківської теми. Успадкований файл також можна редагувати: тоді кнопка під редактором матиме назву Скопіювати до локальної теми та зберегти зміни, а збереження скопіює файл до вашої теми разом зі змінами. Відтоді замість файлу батьківської теми використовується ваша копія.

Файли, що належать вашій темі, мають кнопку Скинути. Скидання видаляє вашу копію, тож знову використовується файл батьківської теми.

Завантаження файлів

Скористайтеся полем завантаження внизу панелі Інші файли, щоб додати до теми зображення, шрифти чи інші файли. Завантажені файли зберігаються в папці files/ теми. За замовчуванням можна завантажувати зображення (gif, ico, jpg, jpeg, png) та файли таких типів: css, js, map, json, eot, otf, ttf, woff, woff2, txt, md, xml, twig, lss, lsa, lsq і lsg. Ваш адміністратор може змінити ці списки за допомогою налаштувань allowedthemeimageformats і allowedthemeuploads у config.php.

Щоб показати завантажене зображення у файлі Twig, використовуйте функцію image():

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

У файлах CSS посилайтеся на завантажені файли за шляхом відносно папки css, наприклад url('../files/background.jpg').

Попередній перегляд

Під редактором відображається попередній перегляд вибраного екрана з прикладом вмісту. Скористайтеся кнопками Мобільний, 640x480, 800x600, 1024x768 і Повний, щоб перевірити сторінку за різних розмірів екрана.

Попередній перегляд використовує приклади даних і може відображати не всі стилі так само, як у реальному опитуванні. Завжди перевіряйте свої зміни також у попередньому перегляді реального опитування.

Імпорт та експорт тем

• Щоб перенести тему до іншої інсталяції LimeSurvey, натисніть Експорт на панелі інструментів редактора теми. Тема буде завантажена у вигляді ZIP-файлу.
• Щоб встановити тему з ZIP-файлу, перейдіть до Налаштування > Теми і натисніть Завантажити і встановити.

Як побудована тема

Папка теми

Папка теми містить:

• config.xml: маніфест теми: назва, батьківська тема, файли CSS і JavaScript, параметри теми та екрани, що відображаються в редакторі теми.
• views/: шаблони Twig. layout_global.twig — основний макет для більшості сторінок опитування. Інші макети використовуються для спеціальних сторінок, наприклад layout_survey_list.twig для публічного списку опитувань і layout_errors.twig для сторінок помилок. У папці views/subviews/ містяться менші шаблони, які підключають макети.
• css/ і scripts/: файли CSS і JavaScript теми.
• files/: зображення та інші файли, які використовує тема.
• options/: сторінка параметрів теми.

Шаблони Twig

Шаблони отримують дані опитування у змінній aSurveyInfo. Щоб побачити весь її вміст, увімкніть режим налагодження в application/config/config.php і додайте цей рядок у кінець елемента body у файлі layout_global.twig:

{{ dump(aSurveyInfo) }}

Функції, які можна використовувати в шаблонах, описано на сторінці Доступні функції Twig. З міркувань безпеки шаблони виконуються в пісочниці, тому доступні лише ці функції.

config.xml

У розділі <files> перелічено файли CSS і JavaScript, які завантажуються на сторінках опитування:

• <add> додає файл. Якщо батьківська тема вже має файл із такою самою назвою, ваш файл замінює його.
• <remove> забороняє завантаження файлу батьківської теми.

Файли батьківської теми не потрібно вказувати повторно: вони завантажуються в будь-якому разі.

LimeSurvey зчитує config.xml під час встановлення теми та зберігає налаштування в базі даних. Після зміни config.xml встановленої теми перейдіть до Налаштування > Теми, відкрийте меню дій (⋯) теми та натисніть Скинути, щоб перезавантажити файл.

Додавання власного CSS і JavaScript

Кожна основна тема має два файли, зарезервовані для вашого власного коду:

• css/custom.css: завантажується після всіх інших файлів CSS, тому його правила перевизначають стилі теми.
• scripts/custom.js: завантажується після власного JavaScript теми.

Коли ви розширюєте тему, саме ці файли слід змінювати. Додавайте свій CSS до custom.css замість редагування основних файлів CSS теми, щоб ваша тема й надалі отримувала оновлення батьківської теми.

Щоб додати більше файлів, завантажте їх і вкажіть у розділі <files> файлу config.xml вашої теми. Використовуйте ім'я файлу, якого немає в батьківській темі, інакше ваш файл замінить файл батьківської теми:

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

Сторінки опитування за замовчуванням завантажуються за допомогою Ajax, тому браузер не виконує повне завантаження сторінки, коли учасник переходить на наступну. Запускайте свій JavaScript як під час першого завантаження сторінки, так і під час кожного завантаження сторінки через Ajax:

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

Стилізація питань за допомогою CSS

Усі приклади в цьому розділі додаються до файлу custom.css вашої теми.

Класи сторінки

Елементи <html> і <body> мають класи, які можна використовувати для стилізації цілих сторінок:

• html: код мови (наприклад, en) і напрямок тексту (dir-ltr або dir-rtl).
• body: назва теми та кожної батьківської теми (наприклад, fruity_twentythree), шрифт (наприклад, font-ibm-sans), мова (наприклад, lang-en) і brand-logo, коли відображається логотип.

Класи контейнера питання

Кожне питання обгорнуте в елемент із класом question-container. Він також має:

• Клас типу питання (див. таблицю нижче).
• mandatory: питання є обов'язковим або м'яко обов'язковим.
• input-error: відповідь не пройшла перевірку, або на обов'язкове питання не було відповіді.
• missing: у питанні залишилися без відповіді частини, а учасник уже перейшов далі.
• ls-hidden і ls-irrelevant: питання приховане через його умову.
• ls-hidden-attribute: питання приховане налаштуванням «Завжди ховати це запитання».
• Будь-які класи, введені в налаштування Класи CSS питання (у розділі Відображення). Використовуйте це для стилізації окремих питань.

Наприклад, обов'язкове питання «Список (одна відповідь)», на яке не було відповіді:

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

Класи типів питань

Тип питання	Клас	Код типу
Вибір із 5 варіантів	.choice-5-pt-radio	5
Масив	.array-flexible-row	F
Масив (вибір із 5 пунктів)	.array-5-pt	A
Масив (вибір із 10 пунктів)	.array-10-pt	B
Табличне запитання (Підвищення/Той самий рівень/Зниження)	.array-increase-same-decrease	E
Масив (числа)	.array-multi-flexi	:
Масив (тексти)	.array-multi-flexi-text	;
Масив (Так/Не впевнений/Ні)	.array-yes-uncertain-no	C
Масив по стовпчику	.array-flexible-column	H
Табличне запитання з подвійною шкалою	.array-flexible-dual-scale	1
Дата/час	.date	D
Рівняння	.equation	*
Завантаження файлу	.upload-files	|
Стать	.gender	G
Величезний довільний текст	.text-huge	U
Переключити мову	.language	I
Список (випадаючий список)	.list-dropdown	!
Список (одна відповідь)	.list-radio	L
Список з коментарями	.list-with-comment	O
Довгий довільний текст	.text-long	T
Множинний вибір	.multiple-opt	M
Множинний вибір з коментарями	.multiple-opt-comments	P
Багаторазове числове введення	.numeric-multi	K
Кілька коротких текстів	.multiple-short-txt	Q
Числове введення	.numeric	N
Рейтинг	.ranking	R
Короткий довільний текст	.text-short	S
Відображення тексту	.boilerplate	X
Так/Ні	.yes-no	Y

Класи для частин питання

Усередині контейнера питання область відповідей використовує ці класи. Деякі з них залежать від налаштувань відображення питання: наприклад, «Масив (числа)» використовує інші класи, коли показує прапорці замість випадаючих списків.

Клас	Для чого використовується	Де використовується (приклади)
.ls-answers	Елемент, що містить усі варіанти відповідей	Усі типи питань
.answers-list	Список або рядок варіантів відповідей	Список (одна відповідь), Множинний вибір, Рейтинг, рядки більшості масивів
.subquestion-list, .questions-list	Список або таблиця підпитань	Масиви, Кілька коротких текстів, Багаторазове числове введення
.answer-item	Один варіант відповіді або одне поле введення	Майже всі типи питань
.noanswer-item	Варіант «Немає відповіді»	Масиви, Вибір із 5 варіантів, Список з коментарями
.question-item	Підпитання, яке також є відповіддю	Множинний вибір, Кілька коротких текстів, Багаторазове числове введення
.radio-list	Список або рядок перемикачів	Список (одна відповідь), Вибір із 5 варіантів, Список з коментарями, рядки масивів із перемикачами
.radio-array	Таблиця перемикачів	Масив, Масив (вибір із 5 пунктів), Масив (вибір із 10 пунктів), Табличне запитання (Підвищення/Той самий рівень/Зниження), Масив (Так/Не впевнений/Ні)
.radio-item	Один перемикач із міткою	Список (одна відповідь), Вибір із 5 варіантів, Список з коментарями, масиви з перемикачами
.checkbox-list	Список прапорців	Множинний вибір, Множинний вибір з коментарями
.checkbox-array	Таблиця прапорців	Масив (числа) зі схемою Прапорець (Checkbox layout)
.checkbox-item	Один прапорець із міткою	Множинний вибір, Множинний вибір з коментарями, Масив (числа) зі схемою Прапорець (Checkbox layout)
.checkbox-text-item	Прапорець із текстовим полем	Множинний вибір з коментарями
.comment-item	Поле коментаря поруч із прапорцем	Множинний вибір з коментарями
.text-list	Список текстових полів	Кілька коротких текстів, Багаторазове числове введення
.text-item	Одне текстове поле	Короткий, довгий і величезний довільний текст, Кілька коротких текстів, Масив (тексти)
.number-list, .numeric-item	Числові поля	Багаторазове числове введення, Числове введення
.number-array	Таблиця числових полів	Масив (числа), Масив (тексти)
.text-array	Таблиця текстових полів	Масив (тексти), Масив (числа)
.dropdown-array, .dropdown-list, .dropdown-item	Таблиці, рядки та комірки з випадаючими списками	Масив (числа), Табличне запитання з подвійною шкалою з випадаючими списками
.date-item	Поле введення дати	Дата/час
.upload-item	Область завантаження файлу	Завантаження файлу
.answertext	Текст підпитання в рядку масиву	Масиви
.col-answers	Стовпець із текстами підпитань	Масиви
.ls-heading	Рядок заголовка з варіантами відповідей	Масиви
.ls-odd, .ls-even	Чергування рядків	Масиви
.ls-label-xs-visibility	Мітка, видима лише на малих екранах і для програм екранного доступу	Комірки масивів
.ls-input-group-extra	Префікс або суфікс поля введення	Короткий довільний текст, Числове введення, Кілька коротких текстів, Багаторазове числове введення
.ls-js-hidden	Приховано, коли JavaScript активний	Табличне запитання з подвійною шкалою, Список (одна відповідь)
.ls-no-js-hidden	Приховано, коли JavaScript не активний	Рейтинг
.ls-js-hidden-sr	Приховано, коли JavaScript активний, але читається програмами екранного доступу	Рейтинг

У типі «Список (одна відповідь)» варіант «Немає відповіді» має клас no-anwser-item (саме з таким написанням) замість noanswer-item.

Наприклад, так виглядає HTML відповідей питання типу «Список (одна відповідь)»:

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

Класи для перевірки та підказок

Підказки щодо перевірки (наприклад, «Виберіть одну з наступних відповідей» або «Введіть число від 1 до 10») завжди мають клас ls-em-tip. Поки учасник відповідає, LimeSurvey додає ls-em-success, коли правило підказки виконано, і ls-em-error, коли не виконано, тож ви можете по-різному оформити ці два стани. Підказки, приховані за допомогою параметра питання Сховати підказку, отримують клас hide-tip.

Кожна підказка також має клас свого типу:

Клас	Підказка
.em_default	Типова підказка для типу питання (наприклад, «Виберіть одну з наступних відповідей»)
.em_num_answers	Мінімальна або максимальна кількість відповідей
.em_value_range	Мінімальне або максимальне значення
.em_sum_range	Мінімальна або максимальна сума значень
.em_sum_equals	Сума значень має дорівнювати заданому підсумку
.em_value_integer	Дозволені лише цілі числа
.em_numbers_only	Дозволені лише числа
.em_other_numbers_only	У полі «Інше» дозволені лише числа
.em_other_comment_mandatory	Вибрано варіант «Інше», але його текстове поле порожнє
.em_regex_validation	Відповідь має відповідати шаблону перевірки
.em_q_fn_validation	Рівняння перевірки питання
.em_sq_fn_validation	Рівняння для перевірки додаткового запитання

Мови з написанням справа наліво (RTL)

Для мов із написанням справа наліво елемент <html> має клас dir-rtl, а основні теми завантажують RTL-версію свого головного файлу CSS. Використовуйте .dir-rtl у вашому CSS для правил, що застосовуються лише до мов із написанням справа наліво.

Поради та хитрощі

Ці рецепти додаються до custom.css (або до файлу Twig, якщо зазначено) теми, створеної розширенням основної теми. У прикладах замініть #c0392b на власний колір.

Зміна кольору перемикачів і прапорців

Щоб використати один із кольорів, що постачаються з Fruity TwentyThree, виберіть Колір теми у параметрах теми. Також у параметрах теми можна вибрати інший Перевірити значок.

Для будь-якого іншого кольору додайте CSS до custom.css. Основні теми малюють власні перемикачі та прапорці замість стандартних елементів браузера, тому зміна кольору означає зміну цих намальованих елементів.

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 і 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;
}

Забезпечте достатній контраст між кольором і фоном, щоб учасники з поганим зором могли бачити, які відповіді вибрано.

Збільшення перемикачів і прапорців

Більші перемикачі та прапорці легше натискати на телефонах і планшетах. Це працює в усіх основних темах:

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

У Fruity TwentyThree також додайте відступ між перемикачами та текстом відповіді:

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

Значення до приблизно 1,4 працюють без додаткових змін. За більших значень елементи керування починають накладатися на текст відповіді та краї рядків масивів на малих екранах, тому потрібно також додати більше простору навколо них.

Зміна кольору індикатора прогресу

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

Показ вмісту лише однією мовою

Елемент <body> має клас із поточною мовою, наприклад lang-en або lang-fr. Його можна використати, щоб показувати різний вміст для різних мов, наприклад рядок допомоги у футері. Додайте текст для кожної мови до файлу Twig вашої теми, наприклад 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>

Потім приховайте текст для інших мов у custom.css:

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

Використання різних логотипів для різних опитувань

Окрема тема для кожного логотипу не потрібна. Параметри теми можна задати для окремого опитування: відкрийте опитування, натисніть Параметри теми у меню Налаштування опитування та виберіть інший Файл логотипу. Див. Параметри теми.

Відображення власного favicon

Favicon — це невелика піктограма, що відображається на вкладці браузера та в закладках. Основні теми показують файл files/favicon.ico теми. Щоб використати власну піктограму, назвіть її favicon.ico і завантажте на панелі Інші файли вашої розширеної теми. Вона замінить піктограму батьківської теми.

Центрування логотипу у Fruity TwentyThree

Увімкніть Логотип у параметрах теми, а потім додайте це до custom.css:

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

Додайте власний логотип до публічного списку опитувань

Публічний список опитувань за замовчуванням показує логотип LimeSurvey. Щоб показати власний логотип:

1. Розширте Fruity TwentyThree і відкрийте свою тему в редакторі теми.
2. Завантажте свій логотип на панелі Інші файли.
3. Виберіть екран Список опитувань і відкрийте layout_survey_list.twig.
4. Знайдіть <div>, що містить {{ include('./ls_logo_svg.twig') }}. Замініть весь цей <div>, разом із рядком include, кодом, наведеним нижче після цих кроків.
5. Натисніть Скопіювати до локальної теми та зберегти зміни.
6. Перейдіть до Налаштування > Загальні налаштування > Загальні і виберіть свою тему як Тема для публічного списку опитувань і сторінок помилок.

Використайте назву завантаженого файлу, а назву вашої організації вкажіть як альтернативний текст:

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

Додайте роздільну лінію до табличних запитань з подвійною шкалою

Щоб намалювати вертикальну лінію між двома шкалами запитання типу Табличне запитання з подвійною шкалою:

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

JavaScript у питаннях

Щоб запускати JavaScript на всіх сторінках ваших опитувань, помістіть його в custom.js вашої теми (див. вище).

Ви також можете додати скрипт до тексту окремого питання або групи. LimeSurvey видаляє скрипти з цих текстів, якщо для вашого користувача не вимкнено XSS-фільтр. Фільтр ніколи не застосовується до суперадміністраторів. Для інших користувачів параметр Фільтрувати HTML для XSS має бути вимкнено в розділі Налаштування > Загальні налаштування > Безпека. Робіть це лише тоді, коли довіряєте всім, хто може редагувати опитування. Докладніше та приклади див. у статті про обхідні рішення.