Kategorienbildhöhen / Allgemeines Verständnis von Theme-Variablen

Unterstützung
1

Hallo zusammen,

beim Ausprobieren einiger Theme-Modifikationen ist mir dieser Teil des SCSS-Codes aufgefallen:

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 150px;
    max-height: var(--max-height);
    max-width: 60%;
    height: auto;
    width: calc(var(--max-height) * var(--aspect-ratio));

  }
}

Ich frage mich, wie man die max-height-Variable hier am besten ändert (falls es eine solche Möglichkeit gibt).

2

Ich bin mir nicht sicher, was du erreichen möchtest, aber wenn du das Logo einfach nur vergrößern oder verkleinern willst, hier ein Ansatz, der dir den Einstieg erleichtert.

Das Kategorien-Logo wird standardmäßig an mehreren Stellen verwendet – auf der Kategorienübersicht und auf den einzelnen Kategorienseiten.

Wenn du die Logo-Größen an beiden Stellen ändern möchtest, kannst du folgenden Code verwenden:

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 200px; // Ersetze 200 durch die gewünschte Höhe
  }
}

Sobald du die Variable --max-height änderst, passt sich die Breite automatisch an.

Wenn du eine spezifischere Änderung vornehmen möchtest, z. B. nur die Logo-Größen auf der Kategorienübersicht, überprüfe bitte die Site-Einstellung desktop_category_page_style auf deiner Seite und teile mir mit, auf welchen Wert sie eingestellt ist.

Wenn die Änderung nur auf dem Desktop erfolgen soll, füge den obigen CSS-Code im Tab „Desktop-CSS“ deines Themes hinzu. Wenn sie nur auf Mobilgeräten gelten soll, füge ihn im Tab „Mobile-CSS“ hinzu. Wenn sie sowohl auf Mobilgeräten als auch auf dem Desktop gelten soll, füge ihn im Tab „Gemeinsames CSS“ hinzu.

3

Hmm, ich habe versucht, --max-height zu ändern, wie Sie vorgeschlagen haben, und obwohl sich dieser Teil im Inspektor ändert, bleibt das Bild gleich groß.

Mir ist im Inspektor aufgefallen, dass der Wert --aspect-ratio nicht zu sein scheint (es gibt keinen klickbaren Link in Chrome zum Wert) und ich kann nicht herausfinden, wo er möglicherweise festgelegt wird. Ich habe den Discourse GitHub-Code durchsucht, aber ihn immer noch nicht gefunden.

Haben Sie eine Idee, wie ich entweder finden kann, wo --aspect-ratio festgelegt wird, oder welchen Wert ich dafür festlegen sollte?

Bearbeiten: Problem gefunden, die Höhe wurde von Discourse Category Headers theme component festgelegt

.category-header-widget .category-logo.aspect-image,
.category-header-widget .category-logo.aspect-image>img {
    float: left;
    margin: 0 0.5em 0.25em 0;
    max-height: 150px;
}

Also habe ich einfach max-height in meinem Theme überschrieben.

category-header-widget .category-logo.aspect-image,
.category-header-widget .category-logo.aspect-image>img  {
	max-height: 80px;
}

Bearbeiten #2: Ihr Vorschlag hat für die Kategorie-Icons auf der Kategorieseite funktioniert, also danke!