投稿でゲートをさらに表示する方法

素晴らしいコンポーネントをありがとうございます!ゲートを投稿のさらに下に表示することは可能でしょうか?(私たちのトピックはすべて画像から始まります。そのため、かなりの量のテキストを表示したい、あるいはゲートが表示されるトピック内の場所を定義したいと考えています。)何かヒント(例:CSSハック)があれば教えていただけると幸いです!

「いいね!」 2

はい、私も同様のことを考えていました。たとえば、変更可能なパーセンテージ設定などです。

現在、コンテンツは次のような手法(その他)で非表示にされています。

  • スクロールが無効になっています
  • ページのコンテンツの高さが100%に設定されています

これらの点を調整できます。たとえば、次のようになります。

body.topic-in-gated-category {
    height: 200%;
}

これにより、さらにスクロールできるようになります。

これは、青い領域を短くする(画面の¼または⅓)、白いグラデーションも短くするなど、より見栄えを良くすることができるかもしれません。

次のような変更も可能です。

.topic-in-gated-category .post-stream {
    max-height: 150vh;
    overflow: hidden;
}

CSSで表示する投稿数を決定するのは難しいです。なぜなら、それらは小さなアクション、時間間隔などと同じレベルにあるからです。
そのため、次のようなCSSを使用すると:

.post-stream > *:nth-child(n+6) {
    display: none;
}

トピックごとに表示される投稿数が常に同じになるとは限りません。

「いいね!」 4

このカスタムコードは、コンポーネントの設定に追加する必要がありますか、それともテーマのCSSに追加する必要がありますか?フォーラムで非常に役立つと思われます。

事前に感謝いたします。

Jaime様

テーマのCSSまたは個別のコンポーネントCSSのいずれでも構いません。コンポーネントを使用すると、複数のテーマに簡単にアタッチできるため、こちらの方が推奨されます。

「いいね!」 1

@Arkshineさん、ありがとうございます。さらに詳しく調べてみたのですが、このコンポーネントのリポジトリをクローンまたはフォークしてから、共通のCSSを直接編集し、編集したバージョンをDiscourseに再度インポートする必要があると考えています。これで合っていますか?

「いいね!」 1

CSSを変更したい場合は、UIから簡単に新しいコンポーネントを作成できます。

  1. 管理画面 → カスタマイズ に移動します。
  2. インストール をクリックします。
  3. 次に 新規作成 を選択します。タイプは コンポーネント である必要があります。

これで完了です!テーマにアタッチしてから、CSS/HTMLを編集 できます。

通常、元のコンポーネントをGithubにコントリビュートしたい場合(プルリクエストを作成する)、または独自のバージョンを作成したい場合にのみフォークします。その場合、元のコンポーネントからのアップデートは受け取れません。おそらくここでは望ましくないでしょう!

「いいね!」 1

ありがとうございます。問題は、カスタムコンポーネントのCSSプロパティが、GitHubのリポジトリにあるベースコンポーネントにも含まれていることだと思います。

一方のコンポーネントがもう一方をオーバーライドするように指定する方法がない限り、リポジトリのクローンを作成し、編集済みのバージョン(現在機能していますが、おっしゃる通りアップデートは受け取れません)を使用するしかないようです。

元のコンポーネントが上書きされない場合は、ルールに !important を追加できます。これで機能するはずです。

.topic-in-gated-category .post-stream {
    max-height: 150vh !important;
    overflow: hidden !important;
}
「いいね!」 1

これで完璧に動作します。改めてご協力ありがとうございました!

「いいね!」 1

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.