Danke für das Update! 
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?
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.
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. 
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: 
Featured Topics - #38 by manuel
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.
Ich finde diese Komponente großartig!
Ich gebe zu, ich habe zwei oder drei Tage damit verbracht, zu lernen, wie man eine Theme-Komponente erstellt, die genau das tut, was diese Komponente tut. Ich habe nicht das Gefühl, dass diese Zeit verschwendet war, weil ich viel gelernt habe, aber ich wünschte, ich hätte den Rat von ask.discourse früher befolgt und mir diese Komponente angesehen.
Eine Sache, die ich nicht herausfinden kann
Mir gefällt das Kartenlayout, aber ich möchte im Kartenlayout ein Vorschaubild und einen Auszug anzeigen. Hinweise wären willkommen.
Stattdessen bin ich beim Listenlayout gelandet, wollte aber ein paar Dinge ändern. Ich habe sie zu meinem common.css-Tab hinzugefügt. Vielleicht hilft das jemand anderem
um das Thema-Tag zu entfernen
.featured-topics__topic-tag {
display: none;
}
um den Autoren-Avatar zu entfernen
.featured-topics__wrapper .topic-author {
display: none;
}
um den Kategorie-Link zu entfernen
.featured-topics__wrapper .category-link {
display: none;
}
Bearbeitung zum Hinzufügen:
Ich lasse den obigen Originalbeitrag unverändert, wollte aber hinzufügen,
wie man den Auszug in der Kartenansicht anzeigt
.featured-topics__topic-container.thumbnail .topic-excerpt {
display: contents;
}
Außerdem habe ich mich an das Listenansicht-Layout auf dem Desktop mehr gewöhnt als an das Kartenlayout, aber auf Mobilgeräten sieht es schrecklich aus. Das Vorschaubild befindet sich links und der Titel und der Auszug befinden sich in einer schmalen Spalte rechts. Ich habe noch nicht herausgefunden, wie man den Text um das Vorschaubild herum umbrechen lässt oder alles in einer einzigen Spalte stapelt.
Da ich herausgefunden habe, wie ich das Vorschaubild und den Auszug in der Kartenansicht anzeigen lassen kann, was auf Mobilgeräten anständig aussieht, bin ich zu diesem Layout gewechselt, weil ich vermute, dass die meisten Benutzer die Seite auf einem Telefon betrachten.
Dies ist eine großartige Komponente und ein großartiges Plugin, vielen Dank für Ihre Arbeit!
Es scheint jedoch ein Problem damit zu geben, dass der Inhalt nicht aktualisiert wird, es sei denn, ich führe eine vollständige Seitenaktualisierung durch, indem ich F5 drücke.
Als Beispiel:
Ich erstelle ein Thema mit dem „Featured“-Tag.
Ich gehe zur Startseite, indem ich auf das Website-Banner klicke.
Das Thema sollte unter „Featured Topics“ aufgeführt sein, aber es wird nicht angezeigt.
Es wird erst angezeigt, wenn ich die Seite über die F5-Taste aktualisiere. Selbst wenn ich erneut auf das Banner klicke, wird es nicht angezeigt.
Dasselbe gilt, wenn ich einen hervorgehobenen Beitrag lösche. Er verschwindet erst, wenn ich die Seite über F5 aktualisiere oder wenn ich den Tab schließe und die Seite erneut öffne.
Irgendeine Idee, warum das passiert?
Das ist beabsichtigt. Der Inhalt wird nicht dynamisch aktualisiert, er spiegelt den Zustand beim Laden der Seite wider. Normalerweise ist dies kein Problem, da der Inhalt für jeden neuen Besucher der Seite aktuell ist.