7.6.12. Публично меню - цветови теми и баджове

2026-07-23

Публичното (онлайн) меню поддържа готови цветови теми, собствени фирмени цветове и управление на баджовете, които се показват върху артикулите (Нов, Промоция, отстъпка и надценка). В тази статия показваме как се сменят цветовете и как се скриват стандартните баджове.

Готови теми

Най-лесният начин за промяна на визията е избор на готова тема. Всяка тема сменя всички цветове наведнъж. Отваря се Настройки на публиката → „Публична тема“ и се избира една от следните:

Палитра	Тема	Избор в админа
	Стандартна	Basic
	Classic	Classic
	Vintage	Vintage
	Paper	Paper
	Blackboard	Blackboard
	Black and white	Black and white

Цветови параметри

Всяка тема е набор от 6 цвята. Това са параметрите, които се променят, ако искате цвят извън готовите теми:

Цвят	Параметър	За какво отговаря
	--baseOne	Главен цвят: бутони „Поръчай“, заглавия, бадж „Отстъпка“
	--baseTwo	Втори цвят: бутони при посочване, бадж „Надценка“
	--accent1	Тъмен акцент: пилюли на категориите и връзки
	--accent2	Светъл тон за активни/маркирани елементи
	--accent3	Много светъл фон на секции
	--accent4	Светъл фон, вариант

Note

Баджовете „Нов“ (жълт) и „Промоция“ (червен) са с фиксирани цветове и не зависят от избраната тема.

Собствени цветове

Когато е нужен фирмен цвят, който го няма в готовите теми, се задават същите 6 параметъра със свои стойности. Override-ът трябва да сочи избраната тема, за да я „бие“:

/* избрана тема в админа: Classic → таргетираме нея */
:root[data-theme=classic] {
  --baseOne: #00b8d4;   /* бутони, заглавия */
  --baseTwo: #0097a7;   /* hover */
  --accent1: #083b40;   /* пилюли категории */
  --accent2: #b2ebf2;
  --accent3: #e0f7fa;
  --accent4: #eafcff;
}

Достатъчно е да се смени само необходимото (напр. само --baseOne и --baseTwo) - останалите остават от темата.

Скриване на баджовете

Баджовете се показват автоматично (напр. „Нов“ за скоро добавените артикули). За да скриете някой от тях, е достатъчен един ред CSS с display: none:

Бадж	Име	CSS клас	Кога се показва
	Нов	.article_label_new	Жълта ъглова лента върху скоро добавени артикули
	Промоция	.article_label_promo	Червен бадж за артикули в промоция
	Отстъпка	.article_label_discount	Процент отстъпка (цвят от --baseOne)
	Надценка	.article_label_markup	Добавена стойност/надценка (цвят от --baseTwo)
	Всички	.article_labels_wrap	Скрива целия контейнер с баджове наведнъж

Пример - скриване на „Нов“ и „Надценка“:

.article_label_new,
.article_label_markup {
  display: none;
}

Къде се задава

• Готовата тема се избира от админа: Настройки на публиката → поле „Публична тема“;

• Собствените цветове и скриването на баджове са CSS и се добавят в стиловете (темата) на публичното меню.

Note

За разлика от рекламния екран (ShowX), публичното меню няма поле „Индивидуален CSS“ в админа - CSS-ът от секциите „Собствени цветове“ и „Скриване на баджовете“ се поставя в източника на темата. Ако е нужно клиентите сами да задават свой CSS, това е отделна доработка.