Использование CSS для оформления опроса


ФУНКЦИЯ ПЛАНА ENTERPRISE. Если она вам интересна, обратитесь в отдел продаж. Если у вас уже есть учетная запись Enterprise, обратитесь к своему менеджеру по работе с клиентами.

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

Основные администраторы Enterprise могут добавить CSS и создать пользовательскую тему опроса, чтобы настроить его внешний вид.

Основные администраторы могут добавить CSS и создать пользовательскую тему опроса, которая соответствует вашим визуальным активам, шрифтам, цветам и стилистическим предпочтениям.

Как добавить новую пользовательскую тему в библиотеку:

  1. Выберите Моя рабочая группа на главной панели навигации и щелкните пункт Библиотека.
  2. Выберите + Новый элемент (Добавить элемент).
  3. Выберите тему с CSS.
  4. Нажмите Копировать код и вставьте его в желаемый инструмент редактирования CSS.
  5. Внесите изменения в код и включите предварительный просмотр, добавив его в поле в разделе «Настроить тему» и выбрав Создать предварительный просмотр.
  6. Нажмите Сохранить.

СОВЕТ. Просмотрите пользовательскую тему с CSS перед отправкой опроса.

  • Использование предварительного просмотра опроса для просмотра пользовательской темы с CSS

После сохранения пользовательской темы с CSS только основной администратор может редактировать или изменять элементы страницы.

Как отредактировать пользовательскую тему:

  1. Выберите Моя рабочая группа на главной панели навигации и щелкните пункт Библиотека.
  2. Выберите ... и нажмите Обновить.
  3. Выберите тему с CSS.
  4. Нажмите Копировать код и вставьте его в желаемый инструмент редактирования CSS.
  5. Внесите изменения в код и включите предварительный просмотр, добавив его в поле в разделе «Настроить тему» и выбрав Создать предварительный просмотр.
  6. Нажмите Сохранить.
Свойство CSSСтроковое значение
Семейство шрифтовВ вашей организации могут предпочитать определенное семейство шрифтов. Больше идей можно найти в разделе «Безопасные веб-шрифты с CSS».
Размер шрифтаЧисло, например 32 пикселя.
ЦветИспользуйте палитру, чтобы задать значение RGBA требуемого вам цвета.
Цвет фонаУказывается как шестнадцатеричный код или значение RGBA.
Изображение, демонстрирующее заголовок страницы

На разные страницы опроса можно добавить заголовки страниц для красоты и порядка. 

#pageTitle {
color: rgba(0,0,96,1);
background-color: #A1F3FB;
font-family: National2;
font-size: 24;
font-style: ОБЫЧНЫЙ;
font-weight: СТАНДАРТНЫЙ;
text-decoration: НЕТ;
}

СОВЕТ. Используйте палитру, чтобы создать значение RGBA или шестнадцатеричный код требуемого вам цвета.

  • Изменение стиля шрифта
  • Изменение жирности шрифта
  • Изменение оформления текста
Изображение, демонстрирующее название опроса.

Название опроса отображается вверху каждой страницы опроса во время его прохождения респондентами, если только вы не предпочтете его скрыть.

#surveyTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 26;
font-style: ОБЫЧНЫЙ;
font-weight: ЖИРНЫЙ;
text-decoration: НЕТ;
}
  • Изменение стиля шрифта
  • Изменение жирности шрифта
  • Изменение оформления текста

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

#surveyPage {
background-color: rgba(137,230,243,1);
}
#surveyPageSecondaryColor {
background-color: rgba(84,213,231,1);
}

СОВЕТ. Используйте палитру, чтобы задать значение RGBA для требуемого вам цвета.

Изображение, демонстрирующее название вопроса

Вы можете настроить внешний вид текста в вопросах разных типов.

#questionTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 22;
font-style: ОБЫЧНЫЙ;
font-weight: СВЕТЛЫЙ;
text-decoration: НЕТ;
}
  • Изменение стиля шрифта
  • Изменение жирности шрифта
  • Изменение оформления текста
Изображение, демонстрирующее текст вопроса

Вы можете настроить, как варианты ответов будут выглядеть для респондентов, а также выбрать типы вопросов, для которых будет использоваться определенный цвет. Например, вопрос с множественными вариантами ответа.

#questionBody {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 18;
font-style: ОБЫЧНЫЙ;
font-weight: СВЕТЛЫЙ;
text-decoration: НЕТ;
highlight-color: rgba(31,216,234,1);
}
  • Изменение стиля шрифта
  • Изменение жирности шрифта
  • Изменение оформления текста
Изображение, демонстрирующее кнопку

С помощью этих кнопок респонденты могут перемещаться по опросу. Когда респондент нажимает кнопку «Далее» или «Готово» на каждой странице опроса, ответы сохраняются и отправляются.

#button {
font-family: National2;
font-size: 15;
font-weight: СТАНДАРТНЫЙ;
}
  • Изменение жирности шрифта
Изображение, демонстрирующее сообщение об ошибке

Сообщения об ошибках отображаются для респондентов, если они не ответили на обязательный вопрос или если ответ не вписывается в заданный диапазон или установленные пределы.

#error {
font-size: 16;
font-style: ОБЫЧНЫЙ;
font-weight: СВЕТЛЫЙ;
text-decoration: НЕТ;
}
  • Изменение стиля шрифта
  • Изменение жирности шрифта
  • Изменение оформления текста
Изображение, демонстрирующее ссылку для выхода

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

#exitLink {
background-color: rgba(0,0,0,0);
font-size: 12;
font-weight: СВЕТЛЫЙ;
  • Изменение жирности шрифта

Макеты страницы позволяют выбрать, как и где будет отображаться цвет фона или фоновое изображение.

	#pageLayout {
layout: banner;
opacity: 0.0;
}

СОВЕТ. Установите прозрачность 100, чтобы фон был сплошным.