Я не уверен, есть ли для этого настройка, но я могу показать, как я бы попытался изменить это с помощью CSS:
-
Щёлкните правой кнопкой мыши по значку и выберите «Просмотреть код» (Inspect).
-
Это откроет инструменты разработчика браузера. (Примечание: здесь я использую Chrome, но большинство браузеров позволяют сделать то же самое!) Там много чего можно посмотреть, но мы сосредоточимся на двух основных разделах — Elements (Элементы), который показывает части страницы в виде вложенной иерархии, и Styles (Стили), который отображает, какие CSS-правила влияют на выбранный элемент.
-
Обычно использование правой кнопки мыши → Просмотреть код позволяет достаточно точно найти нужный элемент, но часто приходится немного покопаться. В данном случае был выбран элемент
<span>, но, похоже, элемент, отвечающий за значок, находится внутри него — это псевдоэлемент::before.
-
Один из способов найти нужный элемент — наблюдать за страницей, когда вы наводите курсор на элементы, перечисленные в панели Elements. Когда я наводил курсор на
::before, подсвечивался только значок:
-
В панели Styles мы видим, что есть правило, устанавливающее красный цвет фона, но оно переопределяется другим правилом, которое задаёт двухцветный фон. (Примечание: не стесняйтесь редактировать любой CSS в панели Styles для экспериментов. Все изменения временные и будут отменены после обновления страницы. Вы также можете включать и выключать отдельные правила, чтобы увидеть их эффект).
-
Мы можем создать новое правило для повторного переопределения, скопировав селектор из верхнего правила и исходное объявление фона из нижнего правила.
-
Это новое правило следует добавить в ваш пользовательский/тематический CSS, и если всё сработает правильно, значки станут сплошными цветами, представляющими подкатегории!
.badge-category__wrapper .badge-category.--has-parent:before {
background: var(--category-badge-color);
}