versatile-bannerのためのCSSの使い方

サポート
1

バナーの「展開」および「折りたたみ」項目の色を変更したいと考えています。CSSで可能だと推測していますが、バナーコンポーネントに対してどのように行うのでしょうか。

「いいね！」 1
2

以下は、その方法です。

  1. 「要素を検証」を開く:
    汎用バナーが有効になっているウェブページに移動します。ページ上のどこかを右クリックし、「要素を検証」（またはWindowsでは Ctrl + Shift + I、Macでは Cmd + Option + I）を選択します。これにより、ブラウザの開発者ツールが開きます。

  2. バナーを特定する:
    開発者ツールの「Elements」タブで、コードのさまざまなセクションにカーソルを合わせると、ウェブページの対応する部分がハイライト表示されます。バナーを見つけたら、バナー全体とそのすべての要素を選択していることを確認するために、バナーが含まれている最も外側の <div> をクリックします。

  3. 要素を調べる:
    バナーが選択されたら、「Elements」タブで、バナー構造内のすべてのネストされたHTML要素を確認できます。これにより、バナーの作成に使用されたHTMLの階層が表示されます。

  4. スタイルを調べる:
    開発者ツールの右側にある「Styles」タブを見つけます。これにより、選択した要素に適用されているCSSスタイルが表示されます。継承されたスタイル、インラインスタイル、および外部スタイルシートからのスタイルを表示できます。

  5. 変更を試す:
    バナー内の要素を選択し、スタイルタブで直接スタイルを変更します。たとえば、色、フォントサイズ、パディング、マージン、またはその他のCSSプロパティを調整できます。これらの変更は一時的なもので、ウェブページにすぐに表示されるため、自由に試すことができます。

  6. デザインを確定する:
    デザインの変更に満足したら、変更されたCSSコードをコピーします。これには、個々の要素またはバナー全体に加えられた変更が含まれる場合があります。

  7. 変更を適用する:
    https://yoursite.com/admin/customize/components に移動し、コンポーネントを作成して、「HTML/CSSの編集」セクションで変更されたCSSコードを貼り付けます。スタイルが正しく適用されるように、適切なバナークラスまたはIDをターゲットにしていることを確認してから、そのコンポーネントをテーマに適用します。

  8. 保存して確認する:
    更新されたCSSを保存し、ウェブサイトを更新して、バナーが意図したとおりに変更を反映していることを確認します。

    以下も参照してください: DiscourseでのCSSのカスタマイズ方法

3

@MihirR 素晴らしい一般的な指示をありがとうございます。

少し読んだところ、Firefox のウェブ開発者ツールには Chrome よりも優れたスタイルエディターがあるようです。

しかし、具体的なケースとなると非常に苦労しています。なぜなら、展開ボタンと閉じるボタンはホバーすると色が変わるため、基本色を設定する方法を見つけられずにいます。その項目は span.d-button-label クラスのようです。

4

こんにちは :wave:

これらのボタンの色を変更する方法の例を次に示します。

.banner-box {
  .button-container {
    .btn {
      .d-icon,
      .d-button-label {
        color: var(--tertiary); // ここを希望の色に変更してください
      }
      // ホバー時とフォーカス時の色
      .discourse-no-touch & {
        &:hover,
        &:focus {
          .d-icon,
          .d-button-label {
            color: var(--tertiary-hover); // ここを希望の色に変更してください
          }
        }
      }
    }
  }
}
「いいね！」 4
5

@Dan はSCSSですか、それともLESSですか？現在のCSSには疎くなっています。Discourseはコンパイルせずにそれを使用しますか？

「いいね！」 1
6

@Andro それはSCSSです :))

7

DiscourseはSCCSをネイティブで理解しますか？

「いいね！」 1
8

はい、ネイティブでSCSSを理解します。

「いいね！」 2
9

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