Размер логотипа категории для конкретных категорий — применяется только при прямом доступе

Внести вклад Ошибка
1

Для конкретной категории мы добавили следующий CSS, чтобы изменить размер логотипа категории. Однако этот CSS применяется только при переходе в категорию по ссылке, как показано здесь:

Contests - Forum | Cannabisanbauen.net (мы используем стабильную версию 3.2)

CSS (в разделе Common):

/* Категория Конкурсы — изображение категории для каждой подкатегории конкурса */
body[class^="category-contests"] {
@supports (--custom: property) {
.category-logo.aspect-image {
    --max-height: 250px;
}
.category-boxes .category-box .category-logo.aspect-image img, .category-boxes-with-topics .category-box .category-logo.aspect-image img {
    --height: 250px;
}
}
}

Однако при переходе с другой страницы форума этот CSS не «срабатывает», и логотипы категорий остаются стандартного размера.

Сценарий воспроизведения:

  1. Перейдите на https://forum.cannabisanbauen.net/
  2. Перейдите в категорию «Конкурсы» через боковую панель или селектор категорий
  3. Логотипы категорий имеют стандартный размер

Это баг или нам следует по-другому реализовать CSS?

2

Хм, это необычная проблема!

Я заметил, что в зависимости от того, как вы попали на страницу, классы, назначенные тегу <body>, могут идти в разном порядке:

image
image925×184 38.5 KB

Символ ^ в селекторе body[class^="category-contests"] заставляет искать совпадение только в начале списка классов. Скорее всего, это работало только в том случае, когда category-contest был первым классом в списке.

Есть ещё символ *, который ищет совпадение в любом месте списка классов. Вы можете попробовать изменить первую часть так:

body[class*="category-contests"]
          ↑ (* вместо ^)

Или ещё более простой способ записи:

body.category-contests

Дайте знать, если это поможет!

2 лайка
3

Спасибо, это действительно решило проблему… не знаю, зачем я так сильно всё усложнил :smiley: