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

Въведение

Темата на проучването определя как изглежда вашето проучване за участниците: оформлението на страницата, цветовете, шрифтовете, логата и стила на всеки въпрос. Темите са изградени с шаблони на Twig, CSS и JavaScript и използват Bootstrap 5 като CSS framework.

Много от честите промени не изискват никакъв код. Логото, цветовете, шрифтовете и някои настройки за показване могат да се променят чрез настройките на темата. Използвайте редактора на теми, описан на тази страница, когато искате да отидете по-далеч: да добавите собствен 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 файл, отидете на Конфигурация > Теми и щракнете върху Upload & install.

Как е изградена една тема

Папка на темата

Папката на темата съдържа:

• 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. За да видите всичко, което съдържа, включете режима за отстраняване на грешки (debug) в application/config/config.php и добавете този ред в края на елемента body във файла layout_global.twig:

{{ dump(aSurveyInfo) }}

За функциите, които можете да използвате в шаблоните, вижте Налични Twig функции. От съображения за сигурност шаблоните се изпълняват в изолирана среда (sandbox), така че са налични само тези функции.

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-item	Една отметка с нейния етикет	Множество възможности, Множество възможности с коментари, Масив (числа) с оформление за отметки
.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, изберете Theme color в настройките на темата. Настройките на темата ви позволяват да изберете и друга Check icon.

За всеки друг цвят добавете 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;
}

Използване на различно лого за всяко проучване

Не ви е нужна отделна тема за всяко лого. Настройките на темата могат да се задават за отделно проучване: отворете проучването, щракнете върху Настройки на темата в менюто Настройки на проучването и изберете друг Файл с лого. Вижте Настройки на темата.

Показване на персонализирана фавикона

Фавиконата е малката иконка, показвана в раздела на браузъра и в отметките. Основните теми показват файла files/favicon.ico на темата. За да използвате своя иконка, наименувайте я favicon.ico и я качете в панела Други файлове на разширената ви тема. Тя замества иконката на родителската тема.

Центриране на логото във Fruity TwentyThree

Включете Logo в настройките на темата, след което добавете това в 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. Отидете на Конфигурация > Глобални настройки > Общо и изберете вашата тема като Theme for public survey list and error pages.

Използвайте името на качения от вас файл и името на вашата организация като алтернативен текст:

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

Промяна на изскачащия прозорец за качване на файл

^{(New in 7.6.0 )} Изскачащият прозорец, който се отваря, когато участник качва файлове във въпрос за качване на файл, е изграден от Twig файла survey/questions/answer/file_upload/modal-container.twig. Редакторът на теми не показва този файл. За да промените прозореца, например за да добавите помощен текст, копирайте файла от application/views/ във Вашата инсталация на LimeSurvey в папката views/ на Вашата тема на сървъра (или в ZIP файла на темата, преди да я импортирате), като запазите структурата на папките: views/survey/questions/answer/file_upload/modal-container.twig. След това редактирайте копието. Тема на въпроса за въпроса за качване на файл също може да съдържа собствено копие. Запазете скритите полета за въвеждане и идентификаторите (ID) във файла, тъй като скриптът за качване се нуждае от тях.

Добавяне на разделителна линия към масиви с двойна скала

За да начертаете вертикална линия между двете скали на въпрос от тип Двойна скала на масив:

.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 трябва да бъде изключена в Конфигурация > Глобални настройки > Сигурност. Правете това само ако имате доверие на всички, които могат да редактират проучвания. За подробности и примери вижте Заобиколни решения: манипулиране на проучване по време на изпълнение с Javascript.