SurveyMonkey
Использование CSS для оформления опроса
ФУНКЦИЯ ПЛАНА ENTERPRISE. Если она вам интересна, обратитесь в отдел продаж. Если у вас уже есть учетная запись Enterprise, обратитесь к своему менеджеру по работе с клиентами.
Чтобы внести глобальные изменения в стиль, можно создать пользовательскую тему. А с помощью инструментов форматирования текста можно создать уникальный стиль для каждого отдельного вопроса в опросе.
Основные администраторы Enterprise могут добавить CSS и создать пользовательскую тему опроса, чтобы настроить его внешний вид.
Создание пользовательской темы с CSS
Основные администраторы могут добавить CSS и создать пользовательскую тему опроса, которая соответствует вашим визуальным активам, шрифтам, цветам и стилистическим предпочтениям.
Как добавить новую пользовательскую тему в библиотеку:
- Выберите Моя рабочая группа на главной панели навигации и щелкните пункт Библиотека.
- Выберите + Новый элемент (Добавить элемент).
- Выберите тему с CSS.
- Нажмите Копировать код и вставьте его в желаемый инструмент редактирования CSS.
- Внесите изменения в код и включите предварительный просмотр, добавив его в поле в разделе «Настроить тему» и выбрав Создать предварительный просмотр.
- Нажмите Сохранить.
СОВЕТ. Просмотрите пользовательскую тему с CSS перед отправкой опроса.
- Использование предварительного просмотра опроса для просмотра пользовательской темы с CSS
Обновление пользовательской темы с CSS
После сохранения пользовательской темы с CSS только основной администратор может редактировать или изменять элементы страницы.
Как отредактировать пользовательскую тему:
- Выберите Моя рабочая группа на главной панели навигации и щелкните пункт Библиотека.
- Выберите ... и нажмите Обновить.
- Выберите тему с CSS.
- Нажмите Копировать код и вставьте его в желаемый инструмент редактирования CSS.
- Внесите изменения в код и включите предварительный просмотр, добавив его в поле в разделе «Настроить тему» и выбрав Создать предварительный просмотр.
- Нажмите Сохранить.
Члены рабочей группы не могут изменять или редактировать отдельные элементы опроса, к которым применена пользовательская тема с CSS.
Настройка элементов страницы
Общие свойства
| Свойство 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, чтобы фон был сплошным.