Я хочу, чтобы был виден только цвет иконки подкатегории.
У главной категории не должно быть цвета иконки.
Мне не нужно, чтобы это выглядело двуцветным.
Как мне это сделать?
[image]
Я не уверен, есть ли для этого настройка, но я могу показать, как я бы попытался изменить это с помощью 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);
}
Спасибо за подробное объяснение
@Bryce_Huhtala на рабочем столе всё сработало
На мобильном не сработало
Какой код мне нужно ввести для мобильного?
Хм, это странно. Когда я использую мобильный вид на компьютере, там отображаются те же правила CSS, поэтому я не понимаю, почему оно должно выглядеть иначе. Единственное, что я могу предложить, — убедиться, что новый код находится в разделе Common.scss, чтобы он применялся в обоих случаях.
О, это всё моя вина
Всё работает отлично, никаких проблем
Не переживайте, рад, что всё работает! 