注目のトピック

アップデートありがとうございます!:heart:

CSSハックで、カードモードのサムネイルの上にアバターを重ねて表示するようにしました。

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

(紫色の)トピック作成者のdivの高さを0に縮小し、アバターを表示したままギャップを効果的に削除するにはどうすればよいですか?

「いいね!」 1

カスタムCSSを記述している場合、事前に設定されたレイアウトのいずれかを上書きするコードを追加するのではなく、テーマ設定でレイアウトオプションをなしとして選択し、スタイルをゼロから宣言することをお勧めします。

たとえば、デフォルトのカードスタイルシートをコピーして、featured-topics__topic-detailsコンテナをグリッドとして宣言できます。その後、絶対宣言で移動するのではなく、要素を好きなように正確に配置できます。

「いいね!」 2

それは素晴らしいアイデアですね!

今のところ、テンプレートと、初期テストのためのいくつかの小さなCSS調整で満足しています。CTR最適化フェーズに進んだら、おそらくあなたのアドバイスに従うでしょう。 :slight_smile:

「いいね!」 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コアの今後の変更との互換性のために、このコンポーネントをアップデートする必要があるというエラーメッセージが表示されました。アップデートの予定があるかどうかご存知の方はいらっしゃいますか?

コンポーネントは今年の初めに更新されました。新しいバージョンを使用するには再インストールが必要です。以下を参照してください: :index_pointing_up: Featured Topics - #38 by manuel

「いいね!」 1

おお、本当にありがとうございます、うまくいきました!

唯一修正できないのは(おそらく1時間チャットGPTをからかっていたのですが…)カードの高さです。これを縮小/削除する方法について何かヒントはありますか?

マヌエルさん、こんにちは。あなたの素晴らしいテーマコンポーネントで、画像を無視して(抜粋のみを表示するように)する方法はありますか?

画像のない(表示したい)トピックがいくつかありますが、画像のあるトピックの隣に表示されると、見た目がかなり悪くなります。また、画像よりもテキストに興味があります。

コンポーネントテンプレートは、トピックで利用可能なさまざまなコンテンツをレンダリングします。最終的な外観は、スタイルルールで調整されます。たとえば、「カード」をレイアウトとして選択すると、トピックの抜粋は、フィーチャー画像がある場合は非表示になり、ない場合は表示されます。

抜粋を常に表示し、画像を表示しないようにするには、「レイアウト」で「なし」を選択して独自のスタイルシートを追加するか、画像を表示して抜粋を非表示にするカードレイアウトのルールを上書きします。

「いいね!」 1