Перейти к основному содержимому

Изменение оформления анкеты

· 2 мин. чтения

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

Тема

Для создания своей темы оформления опроса перейдите в раздел Темы, который находится в левом меню списка проектов:

Нажмите Добавить:

Далее необходимо указать название вашей темы и изменить стандартные настройки SURVEYSTUDIO по своему вкусу. С помощью кнопки с круглой стрелкой можно вернуть значение по умолчанию.

Редактор позволяет не только выбирать мышкой цвет из доступных, но и указывать свой цвет в HEX- или RGBA-форматах в поле под палитрой.

После сохранения темы справа от её названия появится кнопка со звездой, с помощью которой можно установить тему по умолчанию для всех опросов. Эту операцию может делать администратор личного кабинета или группа пользователей с правом Назначение стилей аккаунта. Также ваши темы оформления будут доступны в свойствах анкеты или проекта для установки в одном опросе.

При тестировании темы важно учитывать, что любое изменения применяется к опросу с задержкой до 30 секунд.

CSS

Если настроек темы оформления недостаточно, то можно воспользоваться стилями CSS, которые добавляются в редакторе, открывающимся из выпадающего меню Скрипты редактора анкеты:

Описание свойств и селекторов CSS можно найти в интернете, например здесь, а структуру страниц анкеты можно смотреть в браузере, нажав CTRL+U или CTRL+SHIFT+I.

Ниже представлены примеры изменения различных элементов анкеты:

/* Добавление нестандартного шрифта "Exo 2" */
@import url('https://fonts.googleapis.com/css?family=Exo+2');

/* Установка шрифта "Exo 2" в качестве основного */
body {
font-family: 'Exo 2', sans-serif;
}

/* Выделение текстов вопросов жирным */
div.question-text {
font-weight: bold !important;
}

/* Выделение комментариев жирным */
[id*='comment'] {
font-weight: bold !important;
}

/* Выделение текстов ответов курсивом */
span.summernote-html {
font-style: italic !important;
}

Если перед стилем добавить #ss_current_qn[value="777"] ~ - он применится только к указанному в value номеру вопроса. Например, выделить жирным текст вопросов Q2 и Q5 можно так:

#ss_current_qn[value="2"] ~ div > div.question-text,
#ss_current_qn[value="5"] ~ div > div.question-text {
font-weight: bold !important;
}