Kategorie-Logo-Größe bei spezifischen Kategorien – nur bei direktem Zugriff

Für eine bestimmte Kategorie haben wir das folgende CSS hinzugefügt, um die Größe des Kategorie-Logos anzupassen. Das CSS wird jedoch nur angewendet, wenn Sie über einen Link auf die Kategorie zugreifen. Sehen Sie hier:

Contests - Forum | Cannabisanbauen.net (wir laufen auf 3.2 stable)

CSS (in Common):

/* Contest Kategorie - Kategoriebild für jede Contest-Subkat */
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;
}
}
}

Wenn Sie jedoch von einer anderen Seite im Forum kommen, wird das CSS nicht “ausgelöst” und die Kategorie-Logos haben immer noch die Standardgröße.

Zur Reproduktion:

  1. Gehen Sie zu https://forum.cannabisanbauen.net/
  2. Gehen Sie über die Seitenleiste oder die Kategorieauswahl zur Kategorie “Contests”.
  3. Die Kategorie-Logos haben die Standardgröße.

Ist das ein Fehler oder sollten wir das CSS anders implementieren?

Hmm, das ist ein ungewöhnliches Problem!

Mir ist aufgefallen, dass die Klassen, die dem <body>-Tag zugewiesen sind, je nachdem, wie Sie zur Seite gelangen, in einer anderen Reihenfolge angezeigt werden:


Das Symbol “^” in “body[class^=\"category-contests\"]” bewirkt, dass nur am Anfang der Klassenliste nach einer Übereinstimmung gesucht wird. Daher vermute ich, dass es nur funktionierte, wenn ‘category-contest’ die erste Klasse in der Liste war.

Es gibt ein weiteres Symbol “*”, das überall in der Klassenliste nach einer Übereinstimmung sucht. Sie könnten versuchen, den ersten Teil wie folgt zu ändern:

body[class*="category-contests"]
          ↑ ( * statt ^)

Oder eine einfachere Schreibweise wäre:

body.category-contests

Lassen Sie mich wissen, ob das hilft!

2 „Gefällt mir“

Danke, das hat es tatsächlich gelöst… keine Ahnung, warum ich es so kompliziert gemacht habe :smiley: