Kategorie-Banner

Kann mit etwas CSS behoben werden

Erstelle eine neue Theme component und füge dies zu common css hinzu

// Who's Online Customization
.discovery-list-container-top-outlet.online_users_widget {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
      padding-top: 0.5em
      padding-bottom: 0.5em;
}

Sie können auch benutzerdefinierte Hintergrundfarben, Ränder usw. hinzufügen.

3 „Gefällt mir“

Vielen Dank!

2 „Gefällt mir“

Optional, wenn Sie dies hervorheben möchten, wie hier

Verwenden Sie stattdessen diesen Code

// Who's Online Customization
.discovery-list-container-top-outlet.online_users_widget {
      padding-top: 0.45em;
      padding-bottom: 0.05em;
      background-color: var(--secondary);
      border: 2.0px solid rgba(var(--primary-rgb), 0.2);
      border-radius: 0.65em;
      margin-top: 0.75em
      margin-bottom: 0.75em;
}
  • Margin passt den Abstand oberhalb und unterhalb von „Wer ist online“ an
  • Padding vergrößert den Abstand innerhalb des Rahmenfelds. Rahmen passt die Dicke der Rahmenkontur an.
2 „Gefällt mir“

Leicht abseits des Themas, aber welches Schriftartenpaar ist das @bekircem? Ich liebe es, wie sie zusammenarbeiten!

1 „Gefällt mir“

Ich habe eine kleine Funktionsanfrage, die meiner Meinung nach eine große Verbesserung für diese Komponente darstellen würde. Ich hätte gerne einen „Weiterlesen…“-Link, der mit der Kategoriebeschreibung verknüpft ist. Eine sehr elegante Lösung, um eine ausführliche Beschreibung zu haben, ohne die Kategorieseite zu überladen. Ich kann diesen Link manuell hinzufügen, aber dann wird er auf der Kategorieseite angezeigt, was nicht sehr sauber ist.

3 „Gefällt mir“

Diesem Code fehlt ein ; in Zeile 5 und auch das nachfolgende Beispiel.

Was für mich funktioniert hat, ist Folgendes:

.discovery-list-container-top-outlet.online_users_widget {
  margin-top: 0.75em !important;
  margin-bottom: 0.75em !important;
  display: block !important;
}

Ergebnis:

3 „Gefällt mir“

Großartig. Leider ist mein Beitrag zu alt, als dass ich den Code korrigieren könnte. Danke, dass Sie mich darauf hingewiesen haben, dass ich das “;” übersehen habe.

3 „Gefällt mir“

Es gibt das gleiche Problem für die Tags und Kategorie-Links. Könnten Sie bitte die Klasse .hashtag-cooked in diese Korrektur aufnehmen?

Aus irgendeinem Grund funktioniert das bei mir nicht richtig.
Einige Kategorien und Unterkategorien zeigen das Banner an, einige nicht.
Es liegt nicht an der Beschreibung (oder deren Fehlen), denn einige haben eine Beschreibung und sie wird nicht angezeigt.

Ich weiß nicht, ob das neue Discourse-Update etwas kaputt gemacht hat?

Haben Sie die Kategorien-IDs in der categories-Einstellung definiert?

1 „Gefällt mir“

Ja, ich habe sie zum Objects Setting Editor hinzugefügt.
Ich glaube, es gibt eine Art Fehler im Zusammenhang mit der Option, ihn auszublenden, wenn keine Beschreibung vorhanden ist.
Ich werde noch ein paar Tests durchführen und sehen, wie es läuft.

Mir ist gerade ein Fehler aufgefallen.
Ich befinde mich in der Oberkategorie Tiago | Music und klicke auf die Unterkategorie Sir Giant. Es wird das Banner angezeigt. Dann klicke ich auf einen der “Dokumentations”-Links in der Seitenleiste, um zu einer Tag-Seite Announcements zu gelangen. Wenn ich auf den Link General Discussion klicke, der mich zurück zum Stamm der Unterkategorie Sir Giant führt, ist das Banner verschwunden.
Beim ersten Mal, als ich zu Announcements ging, kein Banner. Wenn ich zur Tag-Seite Music und dann zurück zu Announcements gehe, ist das Banner jetzt sichtbar.

Mir ist gerade noch etwas aufgefallen: Wenn ich mich auf der Seite Announcements befinde und kein Banner sehe, und dann erneut auf denselben Link (Announcements) klicke, erscheint das Banner, was eindeutig ein Fehler ist.

3 „Gefällt mir“

2 weitere Probleme:

1 – Ich befinde mich in einer Kategorie mit einer Beschreibung. Ich kann die Beschreibung im Banner sehen. Diese Beschreibung enthält einen externen Link zu meinem Online-Shop. Wenn ich darauf klicke, öffnet sich der Link im selben Tab, obwohl ich die Einstellung habe, alle externen Links in einem neuen Tab zu öffnen. Und ich kann bestätigen, dass die Einstellung funktioniert, da der Link selbst, der die Beschreibung des Banners definiert, im neuen Tab geöffnet wird.

2 – Wenn ich mich nun auf der Website dieses externen Links befinde (der im selben Tab geöffnet wurde), muss ich im Browser auf „Zurück“ klicken, um zur Unterkategorie zurückzukehren. Diesmal ist die Beschreibung vollständig verschwunden. Das Banner und sein Titel sind da, aber keine Beschreibung. Selbst wenn ich den Browser aktualisiere und einen erzwungenen Refresh durchführe, kommt sie nicht zurück. Die einzige Möglichkeit, sie wieder zu sehen, besteht darin, zur Hauptkategorie und dann wieder zur Unterkategorie zu wechseln.


EDIT: Ok, ich habe etwas herausgefunden. Ich weiß natürlich nicht, was im Hintergrund passiert, aber die rote Option verursacht das Problem. Die grüne Option funktioniert wie erwartet (immer auf dem Bildschirm, egal wohin ich klicke, kein doppeltes Klicken auf ein Seitenmenü erforderlich, damit das Banner zurückkommt):

3 „Gefällt mir“

Ich kann Ihr Problem reproduzieren, aber ich kann es nicht erklären. :sweat_smile:

Technisch gesehen (ignorieren Sie mich) beobachte ich Folgendes mit diesem Outlet header-list-container-bottom:

  • Wenn Sie eine Unterkategorie → ein Tag auswählen, wird die Komponente eingefügt und sofort danach wird teardownComponent aufgerufen (?). Aber die Komponente wird nicht zerstört. Wenn die Klasse category-header aus der Bereinigungsfunktion aus \u003cbody\u003e entfernt wird, versteckt etwas CSS das Banner. Sie können ein anderes Tag auswählen, um die Komponente erneut einzufügen.

    • Von derselben Seite aus, wenn Sie auf einen Dokumentationslink in der Seitenleiste klicken, erhalten Sie dasselbe Verhalten.
    • Es passiert nicht, wenn Sie beispielsweise eine Kategorie aus der Dropdown-Liste auswählen.

Es ist verwirrend, warum nach dem Einfügen will-destroy sofort aufgerufen wird.

2 „Gefällt mir“

Nun, zumindest weiß ich, dass ich nicht der Einzige bin… das ist gut.

Auch wenn ich nicht wollte, habe ich keine Ahnung, wovon du in deiner Erklärung sprichst, haha. Aber es ist gut, dass du weißt, dass etwas, das auf eine bestimmte Weise funktionieren sollte, es nicht tut. Das ist wahrscheinlich ein Schritt in die richtige Richtung, um es zu beheben.

Das Problem scheint also mit der Position des Banners zusammenzuhängen, denn wie gesagt, eine der Optionen (zumindest, denn ich habe die anderen beiden tatsächlich nicht ausprobiert) funktioniert.

1 „Gefällt mir“

Wenn ich ‘Kategorie-Logo anzeigen’ auswähle, erscheint das Logo zweimal – einmal aus den Kategorieeinstellungen und einmal aus dieser Theme-Komponente. Mache ich einen Fehler?

Ist es außerdem möglich, den Titel und/oder die Beschreibung ‘über’ unterhalb des Logos anzeigen zu lassen?

Nein, das ist ein bekannter Fehler. Es gibt auch CSS, das Sie hinzufügen können, um eines der Logos in diesem Thema auszublenden

Danke, Moin! Das CSS hat das Bild für mich behoben.

Um den Kategorienamen unter dem Bild anzuzeigen, hat bei mir folgendes funktioniert:

.category-title-contents,
.category-title-header.category-banner-1slug .category-title-contents {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;}
.category-logo,
.category-title-header.category-banner-1slug .category-logo {
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0;}
.category-title,
.category-title-header.category-banner-1slug .category-title {
    width: 100%;
    margin-top: 20px;
    text-align: left;}

Hallo! Vielleicht kann mir jemand helfen, ein ziemlich seltsames Problem zu beheben, das plötzlich aufgetreten ist.

Alle Titel in den Bannern waren früher weiß, aber jetzt sind sie schwarz und das nur in einigen Kategorien… Ist das ein bekannter Fehler, oder sollte ich vielleicht etwas auf meiner Seite überprüfen?

Zum Beispiel:

Der Link zu unserer Community, nur für den Fall: https://community.elfsight.com/

1 „Gefällt mir“