Tamanho do logo da categoria em categorias específicas - aplicado apenas quando acessado diretamente

Bug
1

Para uma categoria específica, adicionamos o seguinte CSS para ajustar o tamanho do logotipo da categoria. Mas o CSS só é aplicado quando você acessa a categoria através de um link, veja aqui:

Contests - Forum | Cannabisanbauen.net (estamos rodando na versão 3.2 stable)

CSS (em Comum):

/* Categoria de Concursos - imagem da categoria para cada subcategoria de concurso */
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;
}
}
}

Mas ao vir de outra página do fórum, o CSS não é “acionado” e os logotipos das categorias ainda estão no tamanho padrão.

Para reproduzir:

  1. vá para https://forum.cannabisanbauen.net/
  2. Vá para a categoria “Concursos” através da barra lateral ou do seletor de categorias
  3. Os logotipos das categorias estão no tamanho padrão.

isso é um bug ou devemos implementar o CSS de forma diferente?

2

Hmm, esse é um problema incomum!

Notei que, dependendo de como você acessa a página, as classes atribuídas a <body> estão em uma ordem diferente:

image
image925×184 38.5 KB

O símbolo “^” em “body[class^=\"category-contests\"]” faz com que ele procure uma correspondência apenas no início da lista de classes, então minha suposição é que ele só funcionava quando ‘category-contest’ era a primeira classe na lista.

Existe outro símbolo “*” que procurará uma correspondência em qualquer lugar da lista de classes. Você poderia tentar mudar a primeira parte para isto:

body[class*="category-contests"]
          ↑ ( * em vez de ^)

Ou uma maneira mais simples de escrever isso seria:

body.category-contests

Me diga se isso ajuda!

2 curtidas
3

Valeu, isso realmente resolveu… não sei por que compliquei tanto :smiley: