В плагине ABC Pagination мы постарались внедрить как можно больше CSS-переменных для удобства кастомизации плагина.
Задать новые переменные можно в настройках плагина во вкладке Дополнительные стили.
Сначала вы указываете селектор, к которому будут применены CSS-переменные, а потом сами переменные. Например:
/* Сначала указываем селектор */
.abc-pagination {
/* А здесь все CSS переменные */
}Сам список переменных с их описанием будет ниже. Они разбиты на 2 части, это стилизация самого алфавитного списка букв (где идут ссылки А, Б, В) и отдельно стилизация списка постов. Готовый пример использования будет под ними.
- Переменные соответствуют CSS-свойствам. Если переменная заканчивается на
padding, это и есть свойство padding у элемента. - Не забывайте указывать единицы измерения px, em и т.д.
- Подробнее про CSS-свойства можно посмотреть в нашем справочнике.
- В примерах ниже приведены стандартные значения плагина.
Список букв
/**
* Список букв > Контейнер с буквами
*/
--abc-pagination-letters-gap: .5em; /* Расстояние между буквами */
--abc-pagination-letters-margin: 25px 0; /* Внешний отступ у блока (с версии 1.1.0) */
--abc-pagination-letters-padding: .5em; /* Внутренний отступ у блока */
--abc-pagination-letters-background: #eaeff6; /* Фоновый цвет блока */
--abc-pagination-letters-justify-content: center; /* Горизонтальное выравнивание */
--abc-pagination-letters-border-radius: .5em; /* Скругление углов у блока */
/**
* Список букв > Буквы
*/
--abc-pagination-letter-padding: .3em .6em; /* Внутренние отступы у буквы */
--abc-pagination-letter-color: #fff; /* Цвет букв */
--abc-pagination-letter-background: #74B423; /* Фоновый цвет букв */
--abc-pagination-letter-font-weight: bold; /* Толщина шрифта */
--abc-pagination-letter-font-size: 1em; /* Размер шрифта */
--abc-pagination-letter-border: none; /* Рамка у буквы */
--abc-pagination-letter-border-radius: .3em; /* Радиус */
--abc-pagination-letter-hover-color: #ffffff; /* Цвет буквы при наведении (с версии 1.1.0) */
--abc-pagination-letter-hover-background: #5e9617; /* Фоновый цвет букв при наведении (с версии 1.1.0) */Список постов
/**
* Список постов > Буквы
*/
--abc-pagination-tab-letter-width: auto; /* Ширина буквы */
--abc-pagination-tab-letter-margin: 1.5em 0 .5em; /* Внешние отступы буквы */
--abc-pagination-tab-letter-padding: .3em 1em; /* Внутренние отступы у буквы */
--abc-pagination-tab-letter-font-weight: bold; /* Толщина шрифта буквы */
--abc-pagination-tab-letter-font-size: 1.3em; /* Размер шрифта буквы */
--abc-pagination-tab-letter-text-align: left; /* Горизонтальное выравнивание*/
--abc-pagination-tab-letter-color: #111; /* Цвет буквы */
--abc-pagination-tab-letter-background: #eaeff6; /* Фоновый цвет буквы */
--abc-pagination-tab-letter-border-radius: .2em; /* Скругление углов у буквы */
/**
* Список постов > Посты
*/
--abc-pagination-posts-title-margin: .5em 0; /* Внешний отступ у заголовка (с версии 1.1.0) */
--abc-pagination-posts-title-font-weight: 400; /* Насыщенность шрифта (с версии 1.1.0) */
--abc-pagination-posts-image-height: 200px; /* Высота картинки у постов (с версии 1.1.0) */
--abc-pagination-posts-image-object-fit: cover; /* Заполнение картинки (с версии 1.1.0) */
--abc-pagination-posts-columns: 3; /* Количество колонок у постов */
--abc-pagination-posts-columns-mobile: 1; /* Количество колонок на мобильном */
--abc-pagination-posts-gap: .8em; /* Расстояние между колонками */Пример использования
В этом примере мы применяем стили для контейнера с буквами, указываем новый фоновый цвет и скругление углов и меняем цвет и фон у самих букв. Эти изменения будут применены ко всем буквам.
.abc-pagination {
/* Список букв > Контейнер с буквами */
--abc-pagination-letters-background: #c38c4e;
--abc-pagination-letters-border-radius: 3em;
/* Список букв > Буквы */
--abc-pagination-letter-color: #111;
--abc-pagination-letter-background: #fff;
}Как стилизовать отдельный алфавитный список
Есть два способа — задать необходимые настройки по внешнему виду через атрибуты шорткода, либо через добавление дополнительного класса.
Вы можете задать в шорткоде атрибут name, который будет выведен в качестве дополнительного класса у блока. С его помощью можно задать стили для отдельно взятого алфавитного списка.
Например, вы создали шорткод: [abc_pagination name="abc-pagination-custom"]
Теперь стили вы можете прописывать к селектору .abc-pagination-custom:
/* Ниже указываем селектор */
.abc-pagination-custom {
/* А здесь все CSS переменные */
}Все стили будет применены только к этому алфавитному списку с классом .abc-pagination-custom.