グループメンバーシップに基づく条件付きヘッダーテキスト

開発
1

ヘッダーや CSS のサポートをいただければ幸いです。私は多くの言語を知っていますが、CSS はまだ始めたばかりです。

メンバーが更新期限に近づいた際に、ヘッダーの上部に更新を促すお知らせを表示したいと考えています。更新はメインのウェブサイトで行うため、リンクを含めたいです。現在「Light」テーマを使用しています。

以下の手順を踏むことで、ほぼ完成しています：

  1. 「renewal」というグループを作成し、「please renew」というアバターを設定しましたが、他のアクションは設定していません。

  2. 「renewal」をプライマリグループに設定しました。

  3. 遠隔サイトからの SSO を利用して、更新日に基づき「renewal」をグループ所有権に含めました。

  4. 「Common」のヘッダーに以下のカスタムコードを配置しました：

image
image335×104 3.84 KB

  1. 「Common」の CSS に以下のコードを配置しました：

image
image364×111 4.14 KB

これで、ユーザーが「renewal」グループのメンバーである場合にテキストが表示されるまで動作しています。

次に、このお知らせを赤色のフォントにし、「更新はこちらから」というタグを含めるように改善したいと考えています。しかし、皆さんご存知の通り、Content: 文字列に HTML タグを追加することはできません。div にフォントカラーを追加しようとしましたが、うまくいきませんでした。

簡単な解決策はありますか？あるいは、div ブロック全体をオンオフするといった全く別のアプローチはありませんか？

参考までに、私が元にした例ではヘッダーに

タグを使用していました。しかし、これによりトリガーの有無に関わらずヘッダーの上部に余分な空白行が表示されてしまいます。それを避けたいと考えています。

ご支援よろしくお願いいたします！
2

簡単なテーマコンポーネントを作成しました。これは、HTML の body 要素にグループごとの CSS クラスを付与するもので、カスタマイズを容易にするためのものです。私はこれを GitHub - discourse/discourse-groups-css-classes-in-body · GitHub と呼んでいます :sweat_smile:

これにより、ヘッダーの HTML 内でバナー全体を作成し、body 要素のクラスに基づいて表示/非表示を切り替えることができます。

3

@Falco さん、ありがとうございます。その方向性はほぼ合っています！私の課題は、その機能を実際にどう使うかという点です。そのコンポーネントについてこう書かれていますね：

このコンポーネントをアクティブなテーマにインストールした後、グループのメンバーシップに基づいて CSS をターゲットにできます。例えば：

body.group-patrons div.donation-banner {
display: none;
}

おそらく単純なことだとは思うのですが、この例を理解しようとしています。もし以下のようなヘッダーの div ブロックを持っている場合：

<div name="test">My Text</div>

クラスが存在するときにそのテキストを表示させることは可能でしょうか？具体的には以下のようなもの：

.primary-group-renewal div.test  {
   display: inline;
 }

そして、そのクラスが存在しないときには表示をオフにする必要はありませんか？実際には、表示をオフにする部分こそが重要なポイントではないでしょうか？なので、おそらく以下のような形になるかもしれません：

:not(.primary-group-renewal) div.test{
    display: none;
  }

試行錯誤したり Google で検索したりしてきましたが、まだこの答えは見つかりませんでした。今は「About CSS」に関する YouTube 動画を見始めましたが、これは私にとって良いことだとは思います。しかし、まだ明確な手がかりは見つかっていません。お手伝いいただき、感謝しています！

4

多くの実験を行いましたが、現在はこれで動作しています。ただ、一つ質問があります。

ヘッダー内:

<div id='renew' class='renewlink' align="center">
    <a href="https://www.example.com/renewlink" target="_blank")
    <font color='red'>
    クリックしてメンバーシップを更新してください
    </font>
    </a>
</div>

CSS 内:

.renewlink{
    display: none;
  }

.primary-group-renewal .renewlink{
    display: block;
  }

上記の二重の CSS 記述ではなく、これだけで動作すると思っていたのですが、うまくいきませんでした。何が足りないのでしょうか？

:not(.primary-group-renewal) .renewlink{
    display: block;
  }

よろしくお願いいたします。