Свои стили (CSS)

Цвета, шрифты и отступы в плагине не настраиваются кнопками: для этого есть поле «Пользовательский CSS» в самом низу страницы настроек. Стили из него действуют на все группы и сохраняются при сохранении настроек. Знание CSS нужно только базовое: имя класса, фигурные скобки и пара свойств.

Классы плагина

Класс	Что это
.start-promocards__card-wrap	Ячейка карточки в ряду
.start-promocards__card	Сама карточка (ссылка)
.start-promocards__image	Фоновая картинка
.start-promocards__info	Блок с текстом
.start-promocards__info_title	Заголовок
.start-promocards__info_description	Описание
.start-promocards__button	Кнопка
.start-promocards__timer	Таймер целиком

Эти классы можно посмотреть и в браузере: на странице витрины нажмите правой кнопкой мыши на нужный элемент карточки и выберите «Просмотреть код» (в разных браузерах пункт называется чуть по-разному).

Пример: заголовок

.start-promocards__info_title {
    color: #ffd400;
    font-size: 28px;
}

Такое правило сработает на всех группах: цвет и размер заголовка изменятся.

Пример: одна группа

У блока каждой группы есть атрибут с её номером. Он нужен, чтобы стили касались только одной группы:

[data-group-number="2"] .start-promocards__info_title {
    color: #ffd400;
    font-size: 28px;
}

Здесь изменится заголовок только второй группы.

Когда простой класс не срабатывает

Часть свойств плагин задаёт строже, в зависимости от вида карточки (например, выравнивание текста). Свойства color и font-size обычный класс переопределяет. А выравнивание текста и ещё некоторые свойства — нет: правило из «Пользовательского CSS» не применяется. Добавьте к такому свойству !important:

.start-promocards__info_title {
    text-align: right !important;
}

Другие атрибуты для точных стилей

У ячейки карточки есть три атрибута, по которым можно написать стиль под конкретный вид, размер или формат:

Атрибут	Значения
data-card-view	1, 2, 3, 4 — вид карточки
data-card-form	xs, sm, md, lg — размер (150, 200, 250, 400 px)
data-card-column	1–5, 1-3/2, 2/1-3 — формат

Например, чтобы увеличить заголовок только в больших карточках:

[data-card-form="lg"] .start-promocards__info_title {
    font-size: 36px;
}

Высота и ширина

Высоту и ширину ячеек плагин задаёт сам по настройкам размера и формата. Меняйте их на странице настроек, а не в CSS.