Featured Topics

Danke für das Update! :heart:

Mit einigen CSS-Hacks habe ich den Avatar als Überlagerung über dem Miniaturbild im Kartenmodus verschoben:

.featured-topics__topic-details .topic-author {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

Wie kann ich die Höhe des (lila) Topic-Author-Divs auf 0 reduzieren und somit den Abstand entfernen, während der Avatar weiterhin angezeigt wird?

1 „Gefällt mir“

Wenn Sie benutzerdefiniertes CSS schreiben, dann empfehle ich Ihnen eher, anstatt Code hinzuzufügen, der eines der voreingestellten Layouts überschreibt, die Layout-Option Keine in den Theme-Einstellungen zu wählen und Ihre Stile von Grund auf neu zu deklarieren.

Sie könnten zum Beispiel das Standard-Stylesheet Cards kopieren und den Container featured-topics__topic-details als Grid deklarieren. Dann können Sie seine Elemente genau so positionieren, wie Sie möchten, anstatt sie mit absoluten Deklarationen zu verschieben.

2 „Gefällt mir“

Das ist eine tolle Idee!

Vorerst sind wir mit der Vorlage zufrieden und benötigen nur ein paar kleine CSS-Anpassungen zum anfänglichen Testen. Sobald wir in die CTR-Optimierungsphase eintreten, werden wir Ihren Rat wahrscheinlich befolgen. :slight_smile:

2 „Gefällt mir“

Ich bin mir nicht sicher, ob dies das erwartete Verhalten ist oder ob es als Fehler betrachtet werden könnte:

Wenn in den Einstellungen drei Themen festgelegt sind, aber nur zwei angezeigt werden, erscheint eine Lücke dort, wo das dritte Thema sein sollte. Es wäre ideal, wenn die Karten in solchen Fällen auf die gesamte Breite skaliert würden.

Wenn jemand daran interessiert ist, auf Mobilgeräten horizontal zu scrollen, hier ist etwas CSS, das ich mir (mit Hilfe von KI) ausgedacht habe. Es enthält auch einige Scroll-Snap- und Größenanpassungen, die für unseren Anwendungsfall besser geeignet sind.

PS: Ich habe auch versucht, einige Navigations-Pills zu erstellen, ohne HTML hinzuzufügen, aber das war definitiv eine Überdehnung.

@media (max-width: 750px) {
  .featured-topics__topic-wrapper {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 1em 10vw; /* Seitenabstand für Sichtbarkeit benachbarter Karten */
    gap: 1rem; /* Konsistenter Abstand zwischen den Karten */
    overscroll-behavior-x: contain; /* Verhindert Störungen durch Überlauf */
    scroll-behavior: smooth; /* Sanftes Scrollen */
    scrollbar-width: none; /* Scrollleiste ausblenden */
    -ms-overflow-style: none;
  }

  .featured-topics__topic-wrapper::-webkit-scrollbar {
    display: none; /* Scrollleiste in WebKit-Browsern ausblenden */
  }

  .featured-topics__topic-container {
    flex: 0 0 80vw; /* Engere Karten für seitliche Sichtbarkeit */
    min-width: 280px; /* Minimale Breite für kleine Bildschirme */
    scroll-snap-align: center; /* Jede Karte beim Scrollen zentrieren */
    height: unset !important; /* Konsistente Höhe */
  }

  .featured-topics__topic-thumbnail {
    height: 40vw;
    width: 100%;
  }
}

Hallo, vielen Dank für diese Komponente, ich liebe sie!

Kann mir jemand vielleicht helfen, die Titelgröße anzupassen, da sie im Moment zu groß ist?

Ich habe eine Fehlermeldung erhalten, dass diese Komponente für die Kompatibilität mit bevorstehenden Discourse-Kernänderungen aktualisiert werden muss. Weiß jemand, ob ein Update geplant ist?

Ich habe die Komponente Anfang des Jahres aktualisiert. Sie müssen sie neu installieren, um die neue Version zu verwenden. Siehe: :index_pointing_up: Featured Topics - #38 by manuel

1 „Gefällt mir“

Oh, vielen Dank, es hat funktioniert!

Das Einzige, was ich nicht beheben kann (ich habe Chat GPT jetzt eine Stunde lang geärgert, schätze ich…), ist die Höhe der Karten – irgendwelche Tipps, wie ich sie reduzieren/entfernen kann?

Hallo Manuel – Gibt es eine Möglichkeit, dass deine tolle Theme Component hier Bilder ignoriert (und stattdessen nur einen Auszug anzeigt)?

Ich habe einige hervorgehobene Themen ohne Bilder (die ich hervorheben möchte), aber sie sehen neben denen mit Bildern ziemlich schlecht aus. Außerdem interessiere ich mich mehr für den Text als für die Bilder.

Die Komponentenvorlage rendert eine Vielzahl von Inhalten, die zu einem Thema verfügbar sind. Das endgültige Aussehen wird dann mit Stilregeln angepasst. Wenn Sie zum Beispiel „Karten“ als Layout auswählen, werden die Themen-Auszüge ausgeblendet, wenn ein hervorgehobenes Bild vorhanden ist, und angezeigt, wenn keines vorhanden ist:

Wenn Sie den Auszug immer anzeigen und nie ein Bild anzeigen möchten, können Sie entweder „Keine“ für das Layout auswählen und Ihre eigene-Stylesheet hinzufügen. Oder überschreiben Sie die Regeln für das Karten-Layout, die das Bild anzeigen und den Auszug ausblenden.

1 „Gefällt mir“