В плагине Quizle мы постарались внедрить как можно больше CSS-переменных для удобства кастомизации плагина.
Задать новые переменные можно в Внешний вид > Настроить > Дополнительные стили.
Сначала вы указываете селектор, к которому будут применены CSS-переменные, а потом сами переменные. Например:
/* Сначала указываем селектор */
.quizle {
/* А здесь все CSS переменные */
}Сам список переменных с их описанием будет ниже. Они разбиты на 8 частей: стилизация общих элементов, контейнера квиза, заголовок квиза, ответы, кнопки, контактная форма, ошибки и уведомления об успехе. Готовый пример использования будет под ними.
- Переменные соответствуют CSS-свойствам. Если переменная заканчивается на
padding, это и есть свойство padding у элемента. - Не забывайте указывать единицы измерения px, em и т.д.
- Подробнее про CSS-свойства можно посмотреть в нашем справочнике.
- В примерах ниже приведены стандартные значения плагина.
Общие
/**
* Общие
*/
--quizle-primary-color: #8264FC; /* Основной цвет */
--quizle-primary-color-text: #ffffff; /* Основной цвет текста */
--quizle-background: #d9d9d9; /* Цвет фона */
--quizle-background-1: #d9d9d9;
--quizle-background-2: #b3b3b3; /* Цвет тени */
--quizle-text-color: #111; /* Цвет текста */
--quizle-font-size: 16px; /* Размер шрифта */
--quizle-border: 1px solid rgba(0,0,0,.1); /* Рамка */
--quizle-space: clamp(10px, 1vw, 25px); /* Отступ */
--quizle-shadow-color: rgba(88, 85, 129, 0.15); /* Цвет тени квиза */Контейнер квиза
/**
* Контейнер квиза
*/
--quizle-max-width: 1000px; /* Максимальная ширина */
--quizle-body-max-width: 900px; /* Максимальная ширина контента */
--quizle-sidebar-width: 240px; /* Ширина сайдбара */
--quizle-footer-height: 64px; /* Ширина подвала */
--quizle-container-padding: clamp(16px, 4vw, 30px); /* Внутренний отступ контейнера */
--quizle-image-screen-gap: 30px; /* Отступ между картинками */
--quizle-container-border-radius: 21px; /* Скругление углов */
--quizle-image-border-radius: 12px; /* Скругление углов картинок */Заголовок квиза
/**
* Заголовок квиза
*/
--quizle-header-font-size: clamp(18px, 2vw, 24px); /* Размер шрифта */
--quizle-header-line-height: 1.3; /* Межстрочный интервал */
--quizle-header-font-weight: 800; /* Жирность */Ответы
/**
* Ответы
*/
--quizle-answer-border-color-right: var(--quizle-success-color); /* Цвет рамки справа */
--quizle-answer-border-color-wrong: var(--quizle-error-color); /* Цвет рамки неправильного ответа */
--quizle-answer-check-background: unset; /* Цвет фона выбранного ответа */Кнопки
/**
* Кнопки
*/
--quizle-button-color: #fff; /* Цвет текста */
--quizle-button-padding: .7em 1.2em; /* Внутренний отступ */
--quizle-social-icon-width: 24px; /* Ширина иконок соц. кнопок */
--quizle-social-icon-height: 24px; /* Высота иконок соц. кнопок */Контактная форма
/**
* Контактная форма
*/
--quizle-form-border-radius: 6px; /* Скругление углов */
--quizle-form-checkbox-size: 20px; /* Размер чекбокса */
--quizle-form-padding: .5em .9em; /* Внутренний отступ */
--quizle-form-border-width: 2px; /* Ширина рамки */
--quizle-form-border-color: rgba(0, 0, 0, .25); /* Цвет рамки */Ошибки
/**
* Ошибки
*/
--quizle-error-color: #ec340a; /* Цвет текста */
--quizle-error-background: rgba(236, 52, 10, 0.1); /* Цвет фона */
--quizle-error-border-color: #c52703; /* Цвет рамки */Уведомления об успехе
/**
* Уведомления об успехе
*/
--quizle-success-color: #7dc400; /* Цвет текста */
--quizle-success-background: rgba(125,196,0,.1); /* Цвет фона */
--quizle-success-border-color: #7dc400; /* Цвет рамки */Пример использования
В этом примере мы применяем общие стили для квизов: указываем новый фоновый цвет, цвет текста и размер шрифта.
.quizle {
--quizle-background: #d9d9d9; /* Цвет фона */
--quizle-text-color: #111; /* Цвет текста */
--quizle-font-size: 16px; /* Размер шрифта */
}