カテゴリ アイコンの色を単色にするにはどうすればいいですか？

[Ahmed26]

サブカテゴリのアイコンの色のみを表示したいです。
メインカテゴリにはアイコンの色を付けたくありません。
ツートンカラーにしたくありません。

どうすればできますか？

[image]

[bryce (Bryce Huhtala)]

CSS を使用して変更する方法を以下に示します。

1. アイコンを右クリックし、「検証」を選択します。
   

   

2. ブラウザの開発者ツールが開きます。（注意: ここでは Chrome を使用していますが、ほとんどのブラウザで同じことができます！）見るべきものはたくさんありますが、主に 2 つのセクションに焦点を当てます。要素は、ページのパーツをネストされた階層で表示し、スタイルは、選択した要素に影響を与えている CSS を表示します。
   

   

3. 通常、右クリック → 検証を使用すると、編集したい要素にかなり近づきますが、多くの場合、少し掘り下げる必要があります。この場合、<span> 要素が選択されましたが、アイコンを担当している要素はその中にあります。それは ::before 要素です。
   

   

4. 右クリック → 検証を使用すると、編集したい要素にかなり近づきますが、多くの場合、少し掘り下げる必要があります。この場合、<span> 要素が選択されましたが、アイコンを担当している要素はその中にあります。それは ::before 要素です。
   

5. スタイルパネルを見ると、背景を赤に設定する宣言がありますが、2 色の背景を設定する別のルールによって上書きされています。（注意: スタイルパネルの CSS を自由に編集して実験してください。変更は一時的なもので、ページが更新されると元に戻ります。個々の宣言をオン/オフして、その効果を確認することもできます。）
   

   

6. 上のルールからセレクター部分と下のルールから元の背景宣言をコピーして、再度上書きする新しいルールを作成できます。
   

   

7. この新しいルールは、カスタム/テーマ CSS に配置されます。すべて正しく機能した場合、アイコンはサブカテゴリを表す単色になります！

.badge-category__wrapper .badge-category.--has-parent:before {
  background: var(--category-badge-color);
}

[Ahmed26]

詳細なご説明ありがとうございます

[Ahmed26]

@Bryce_Huhtala デスクトップでは機能しました。

モバイルでは機能しませんでした。

モバイルではどのコードを入力すればよいですか？

[bryce (Bryce Huhtala)]

うーん、それは奇妙ですね。コンピューターでモバイルビューを使用しても、同じ CSS ルールが表示されるため、なぜ表示が異なるのかわかりません。考えられる唯一のことは、新しいコードが Common.scss セクションにあることを確認して、両方で使用されるようにすることです。

[Ahmed26]

すべて私のせいです

問題なく動作します。

[bryce (Bryce Huhtala)]

心配いりません、うまくいってよかったです！