アップデートありがとうございます！
CSSハックで、カードモードのサムネイルの上にアバターを重ねて表示するようにしました。
.featured-topics__topic-details .topic-author {
position: absolute;
right: 30px;
bottom: 30px;
}
（紫色の）トピック作成者のdivの高さを0に縮小し、アバターを表示したままギャップを効果的に削除するにはどうすればよいですか？
「いいね！」 1
カスタムCSSを記述している場合、事前に設定されたレイアウトのいずれかを上書きするコードを追加するのではなく、テーマ設定でレイアウトオプションをなしとして選択し、スタイルをゼロから宣言することをお勧めします。
たとえば、デフォルトのカードスタイルシートをコピーして、featured-topics__topic-detailsコンテナをグリッドとして宣言できます。その後、絶対宣言で移動するのではなく、要素を好きなように正確に配置できます。
「いいね！」 2
それは素晴らしいアイデアですね！
今のところ、テンプレートと、初期テストのためのいくつかの小さなCSS調整で満足しています。CTR最適化フェーズに進んだら、おそらくあなたのアドバイスに従うでしょう。 
「いいね！」 2
これは予期された動作か、それともバグと見なされる可能性があるか不明です。
設定で3つのトピックが設定されているのに、2つしか表示されない場合、3番目のトピックが表示されるべき場所に隙間ができます。このような場合は、カードのサイズを変更して全幅を埋めるのが理想的です。
モバイルで横スクロールを使用することに興味がある方がいれば、私が（AIの助けを借りて）考え出したCSSをいくつか紹介します。また、私たちのユースケースにより適していると思われるスクロールスナップとサイズ調整も含まれています。
追伸：HTMLを追加せずにナビゲーションピルを作成しようとしましたが、それは明らかに無理がありました。
@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; /* 隣接するカードの表示のためのサイドパディング */
gap: 1rem; /* カード間の均一な間隔 */
overscroll-behavior-x: contain; /* オーバースクロール干渉の防止 */
scroll-behavior: smooth; /* スムーズなスクロール */
scrollbar-width: none; /* スクロールバーを非表示にする */
-ms-overflow-style: none;
}
.featured-topics__topic-wrapper::-webkit-scrollbar {
display: none; /* WebKitブラウザでスクロールバーを非表示にする */
}
.featured-topics__topic-container {
flex: 0 0 80vw; /* 横並び表示のためカードを狭くする */
min-width: 280px; /* 小画面用の最小幅 */
scroll-snap-align: center; /* スクロール時に各カードを中央揃えにする */
height: unset !important; /* 均一な高さ */
}
.featured-topics__topic-thumbnail {
height: 40vw;
width: 100%;
}
}
こんにちは、このコンポーネントをありがとうございます。気に入っています！
タイトルサイズを調整するのを手伝ってもらえませんか？現在大きすぎるようです。
Discourseコアの今後の変更との互換性のために、このコンポーネントをアップデートする必要があるというエラーメッセージが表示されました。アップデートの予定があるかどうかご存知の方はいらっしゃいますか？
コンポーネントは今年の初めに更新されました。新しいバージョンを使用するには再インストールが必要です。以下を参照してください: 
Featured Topics - #38 by manuel
「いいね！」 1
おお、本当にありがとうございます、うまくいきました！
唯一修正できないのは（おそらく1時間チャットGPTをからかっていたのですが…）カードの高さです。これを縮小/削除する方法について何かヒントはありますか？
マヌエルさん、こんにちは。あなたの素晴らしいテーマコンポーネントで、画像を無視して（抜粋のみを表示するように）する方法はありますか？
画像のない（表示したい）トピックがいくつかありますが、画像のあるトピックの隣に表示されると、見た目がかなり悪くなります。また、画像よりもテキストに興味があります。
コンポーネントテンプレートは、トピックで利用可能なさまざまなコンテンツをレンダリングします。最終的な外観は、スタイルルールで調整されます。たとえば、「カード」をレイアウトとして選択すると、トピックの抜粋は、フィーチャー画像がある場合は非表示になり、ない場合は表示されます。
抜粋を常に表示し、画像を表示しないようにするには、「レイアウト」で「なし」を選択して独自のスタイルシートを追加するか、画像を表示して抜粋を非表示にするカードレイアウトのルールを上書きします。
「いいね！」 1
これは素晴らしいコンポーネントだと思います！
正直に言うと、このコンポーネントがやっていることを実現するために、テーマコンポーネントを作成する方法を学ぶのに2、3日費やしました。多くを学んだので無駄になったとは思っていませんが、もっと早くask.discourseのアドバイスに従って、このコンポーネントを確認すればよかったと思っています。
一つわからないことがあります。
カードレイアウトは気に入っていますが、カードレイアウトでサムネイルと抜粋を表示したいです。何かヒントがあればありがたいです。
代わりにリストレイアウトにしましたが、いくつかの点を変更したいと思っています。それらをcommon.cssタブに追加しました。もしかしたら他の誰かの役に立つかもしれません。
トピックタグを削除するには
.featured-topics__topic-tag {
display: none;
}
作成者のアバターを削除するには
.featured-topics__wrapper .topic-author {
display: none;
}
カテゴリリンクを削除するには
.featured-topics__wrapper .category-link {
display: none;
}
追記：
元の投稿はそのままにしておきますが、追加したいことがあります。
カードビューで抜粋を表示する方法
.featured-topics__topic-container.thumbnail .topic-excerpt {
display: contents;
}
また、デスクトップではリストビューレイアウトの方がカードレイアウトよりも気に入りましたが、モバイルではひどい見た目になります。サムネイルが左側にあり、タイトルと抜粋が右側の狭い列にあります。サムネイルの周りにテキストを折り返す方法や、すべてを単一の列に積み重ねる方法を見つけられていません。
カードレイアウトでサムネイルと抜粋を表示する方法を見つけ、それがモバイルでもまともな見た目になったので、ほとんどのユーザーが携帯電話でサイトを閲覧していると予想されるため、カードレイアウトに切り替えました。
これは素晴らしいコンポーネントとプラグインです。あなたの作業に感謝します！
しかし、F5キーを押してページ全体をリフレッシュしない限り、コンテンツが更新されないという問題があるようです。
例として：
フィーチャータグを付けてトピックを作成します。
ウェブサイトのバナーをクリックしてホームページに移動します。
そのトピックは「フィーチャートピック」の下に表示されるはずですが、表示されません。
F5キーでページをリフレッシュした場合にのみ表示されます。バナーを再度クリックしても表示されません。
フィーチャーされた投稿を削除した場合も同じです。F5でページをリフレッシュするか、タブを閉じてページを再度開いた場合にのみ消えます。
なぜこれが起こるのか、何か考えはありますか？
「いいね！」 1
これは仕様によるものです。コンテンツは動的に更新されず、ページ読み込み時の状態を反映します。通常、サイトの新規訪問者にとってはコンテンツは最新の状態であるため、問題にはなりません。
「いいね！」 3