В WPBar большинство стилей вынесены в CSS-переменные, чтобы панель можно было быстро кастомизировать без правки кода плагина.
Новые значения удобно задавать в Дополнительных стилях в разделе Внешний вид на странице редактирования панели.
Сначала укажите селектор, потом переменные. Например:
.wpbar {
--wpbar-bg: #ffffff;
--wpbar-item-color-active: #1f57ff;
}Если на странице несколько панелей и нужно настроить только одну, используйте селектор контейнера с ID панели, например:
.wpbar-container[data-wpbar-id="123"] .wpbar { ... }.
- Переменные соответствуют CSS-свойствам и используются в стилях панели напрямую.
- Не забывайте указывать единицы измерения там, где они нужны:
px,remи т.д. - Ниже указаны стандартные значения плагина.
Панель (базовые)
/**
* Панель (базовые)
*/
--wpbar-z: 9999; /* z-index панели */
--wpbar-margin-x: 0; /* Внешний отступ по X */
--wpbar-margin-y: 0; /* Внешний отступ по Y */
--wpbar-padding-x: 16px; /* Внутренний отступ по X */
--wpbar-padding-y: 0px; /* Внутренний отступ по Y */
--wpbar-safe-bottom: calc(var(--wpbar-padding-y) + env(safe-area-inset-bottom, 0));
--wpbar-gap: 8px; /* Расстояние между элементами */
--wpbar-bg: #fff; /* Фон панели */
--wpbar-font-size: 11px; /* Базовый размер шрифта */
--wpbar-line-height: 1.3; /* Базовая высота строки */
--wpbar-shadow: 0 1px 42px -10px rgba(85, 111, 175, 0.2); /* Тень панели */
--wpbar-label-display: block; /* block|none */
/* Рамка панели */
--wpbar-border-width: 0;
--wpbar-border-style: solid;
--wpbar-border-color: rgba(193,201,209,0.10);
--wpbar-border-radius: 0;
--wpbar-border-top: var(--wpbar-border-width) var(--wpbar-border-style, solid) var(--wpbar-border-color);
--wpbar-border-right: var(--wpbar-border-width) var(--wpbar-border-style, solid) var(--wpbar-border-color);
--wpbar-border-bottom: var(--wpbar-border-width) var(--wpbar-border-style, solid) var(--wpbar-border-color);
--wpbar-border-left: var(--wpbar-border-width) var(--wpbar-border-style, solid) var(--wpbar-border-color);Элементы
/**
* Элементы панели
*/
--wpbar-span-base: 2; /* Базовая ширина элемента в гриде */
--wpbar-item-gap: 6px; /* Gap внутри элемента (иконка/текст) */
--wpbar-item-margin-y: 0; /* Внешний отступ элемента по Y */
--wpbar-item-margin-x: 0; /* Внешний отступ элемента по X */
--wpbar-item-padding-y: 12px; /* Внутренний отступ элемента по Y */
--wpbar-item-padding-x: 4px; /* Внутренний отступ элемента по X */
--wpbar-item-radius: 0; /* Скругление элемента */
/* Рамка элемента */
--wpbar-item-border: none;
--wpbar-item-border-top: var(--wpbar-item-border, none);
--wpbar-item-border-right: var(--wpbar-item-border, none);
--wpbar-item-border-bottom: var(--wpbar-item-border, none);
--wpbar-item-border-left: var(--wpbar-item-border, none);
/* Цвета элемента */
--wpbar-item-color: #484C52; /* Цвет текста/иконки */
--wpbar-item-color-hover: #1e304c; /* Цвет hover */
--wpbar-item-color-active: #539DF3; /* Цвет active */
--wpbar-item-bg: transparent; /* Фон элемента */
--wpbar-item-bg-hover: rgba(17, 31, 58, 0.03); /* Фон hover */
--wpbar-item-bg-active: transparent; /* Фон active */Иконки
/**
* Иконки
*/
--wpbar-icon-size: 22px; /* Размер иконок */
--wpbar-icon-color: ; /* Цвет иконок (если задан) */
--wpbar-icon-color-active: ; /* Цвет активной иконки */Выпадающая панель (menu/content/search)
/**
* Выпадающая панель
*/
--wpbar-panel-bg: #ffffff; /* Фон выпадающей панели */
--wpbar-panel-color: #2f3747; /* Цвет текста */
--wpbar-panel-border-width: 1px;
--wpbar-panel-border-style: solid;
--wpbar-panel-border-color: rgba(33, 48, 77, 0.12);
--wpbar-panel-border-radius: .875rem;
--wpbar-panel-shadow: 0 .75rem 2rem -1.5rem rgba(22, 40, 78, 0.45);
--wpbar-panel-gap: .625rem;Поиск
/**
* Поле поиска
*/
--wpbar-search-bg: #f6f8fc;
--wpbar-search-color: #2f3747;
--wpbar-search-placeholder: #7a8497;
--wpbar-search-border-width: 1px;
--wpbar-search-border-style: solid;
--wpbar-search-border-color: rgba(33, 48, 77, 0.15);
--wpbar-search-radius: .625rem;
--wpbar-search-padding-y: .625rem;
--wpbar-search-padding-x: .75rem;
--wpbar-search-icon-size: 1.25rem;
--wpbar-search-icon-color: #5d6a80;Меню
/**
* Меню и подменю
*/
--wpbar-menu-font-size: 14px;
--wpbar-menu-line-height: 1.4;
--wpbar-menu-padding-top: 24px;
--wpbar-menu-padding-bottom: 16px;
--wpbar-menu-padding-x: 16px;
--wpbar-menu-link-color: #2f3747;
--wpbar-menu-link-color-hover: #1f57ff;
--wpbar-menu-link-bg-hover: rgba(31, 87, 255, 0.08);
--wpbar-menu-link-radius: .5rem;
--wpbar-menu-link-padding-y: .5rem;
--wpbar-menu-link-padding-x: .625rem;
--wpbar-menu-column-min: 13.75rem; /* Минимальная ширина колонки меню */
--wpbar-menu-column-gap: 1rem; /* Отступ между колонками */
--wpbar-menu-row-gap: .375rem; /* Отступ между пунктами */
--wpbar-menu-submenu-indent: .875rem; /* Смещение вложенного меню */Счетчик
/**
* Счетчик (например, у корзины WooCommerce)
*/
--wpbar-counter-top: -8px;
--wpbar-counter-left: 16px;
--wpbar-counter-bg: #FB1842;
--wpbar-counter-color: #fff;
--wpbar-counter-font-size: 11px;
--wpbar-counter-font-weight: 600;
--wpbar-counter-radius: 999px;
/* Рамка счетчика */
--wpbar-counter-border: 1px solid #fff;
--wpbar-counter-border-top: var(--wpbar-counter-border);
--wpbar-counter-border-right: var(--wpbar-counter-border);
--wpbar-counter-border-bottom: var(--wpbar-counter-border);
--wpbar-counter-border-left: var(--wpbar-counter-border);Служебные переменные
/**
* Служебная переменная компенсации отступа снизу
* выставляется плагином автоматически при включенной компенсации контента
*/
--wpbar-offset-bottom: 0px;Пример использования
Пример ниже меняет фон панели, активный цвет, расстояние между элементами и стиль поиска для одной конкретной панели.
.wpbar-container[data-wpbar-id="123"] .wpbar {
--wpbar-bg: #111827;
--wpbar-color: #e5e7eb;
--wpbar-gap: 12px;
--wpbar-item-color-active: #22d3ee;
--wpbar-item-bg-hover: rgba(34, 211, 238, 0.12);
--wpbar-search-bg: #0f172a;
--wpbar-search-color: #e5e7eb;
--wpbar-search-border-color: rgba(148, 163, 184, 0.35);
}