CSS: готовые рецепты

Решения для того, чего нет в настройках. Каждый рецепт проверен на живом квизе: CSS вставлялся на страницу и сверялся вычисленный стиль. Размер текста, ширина квиза, скругления, цвета, шрифты и кнопки — это настройки стиля, CSS для них не нужен.

Убрать кнопку «Назад»#

Кнопка «Назад» выводится всегда. Если ответы и так нельзя менять, а кнопка отвлекает, её можно спрятать. ✓ проверено в браузере

Куда вставить: eLDeR Quiz→Настройки→Внешний вид→CSS-код

.elder-quiz .elder-quiz-nav .elder-quiz-button--secondary {
    display: none;
}

Кнопка «Назад» имеет класс elder-quiz-button--secondary, кнопка «Далее» — нет.

Тень у варианта при наведении#

В стиле есть «Эффект при наведении» — подсветка рамки или подъём. Рецепт добавляет к наведению мягкую тень, не трогая стиль. ✓ проверено в браузере

Куда вставить: eLDeR Quiz→Настройки→Внешний вид→CSS-код

.elder-quiz .elder-quiz-answer__label:hover {
    box-shadow: 0 4px 14px var(--elder-quiz-shadow-color);
}

Цвет тени — переменная --elder-quiz-shadow-color, её можно задать в том же правиле.

Крупнее отметки выбора#

Размера кружков и квадратиков у вариантов в стиле нет — это CSS-переменная. Крупные отметки удобнее на сенсорных экранах. ✓ проверено в браузере

Куда вставить: eLDeR Quiz→Настройки→Внешний вид→CSS-код

.elder-quiz {
    --elder-quiz-checkbox-size: 26px;
}

Переменную не задаёт стиль, поэтому хватает обычного селектора .elder-quiz. Отметка видна, если в стиле «Отметка выбора» не «Скрыта».

Другой основной цвет одному квизу#

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

Куда вставить: eLDeR Quiz→Настройки→Внешний вид→CSS-код

body .elder-quiz.elder-quiz--ID {
    --elder-quiz-primary-color: #0f766e;
}

Замените ID номером квиза из шорткода. body в начале нужен: переменные стиля выводятся с селектором .elder-quiz.elder-quiz--ID, и без него правило проиграет.