現在、私たちのフォーラムは以下のようになっています…
カラーテーマのリブランディングを予定しています。ヘッダーは緑色で、ロゴは白になります。
ヘッダー内の虫眼鏡アイコンとハンバーガーメニューアイコンの色を変更する方法に困っています。現在はグレーですが、緑色のヘッダーの上に置くと見苦しくなってしまいます。白いアイコンにすれば、新しいヘッダーロゴとも調和します。
テーマメニューを確認したところ、「ヘッダープライマリー」というオプションがあり、説明には「サイトのヘッダー内のテキストとアイコンの色を変更する」と書かれています。すでに白に設定しましたが、変化がありません。これらの2つのアイコンの色を変更する別の方法はありませんか？
The icons are a bit transparent, which might be throwing you off (that’s why they look grey instead of white when the header_primary color is set to white).
You can add some custom CSS to change this
.d-header-icons .icon {
color: red; // custom color, if needed
&.btn-flat .d-icon {
opacity: 1; // remove transparency
}
}
Hi,
I have this CSS:
header{
height: auto !important;
.wrap{
padding:14px 0;
}
.btn-flat .d-icon{
opacity: 1 !important;
}
.d-header-icons .icon{
color: #ffffff;
padding: 0.4em;
}
.d-header-icons .icon:hover{
background-color: #ffffff;
opacity: 1 !important;
color: #001d4d;
}
However, perhaps as we are now on one of the latest releases, now the home, search, and menu icons are greyed out. Can you explain how to make these icons white with opacity of 1? Did any of the selectors change?
Yes, these selectors are a little more specific now and we removed the opacity entirely in favor of using a solid color (there was a bug in Safari where SVG icons were clipped slightly because of the opacity).
You can remove anything you have related to opacity, and do this
.d-header-icons .d-icon {
color: #fff;
}
.d-header-icons .d-icon:hover {
background-color: #fff;
color: #001d4d;
}
I have a similar problem as the OP, probably somewhat simpler: For some reason the colour of the header icons got darker for no apparent reason (I assume it was related to the tidy-up measures on your side). Since my header is a darkish, I want the icons brighter.
I tried this
and am happy with the result. But I can’t seem to figure out how the hover settings work. With only the above css, my hover looks like this:
So the icon turns grey again, which is okay, but I’d like to try some other tints on it. The background seems to turn white (or almost white), which I would like to change to make it coherent with other menus.
I tried
.d-header-icons .d-icon:hover {
background-color: #b0cee8;
color: #fff;
}
but it gives me this:
How do I get the whole box to change color? And I don’t understand why the icon itself doesn’t stay white…
And while I’m at it: My new topic button also suffered. The colour of the + icon is no longer the same as the text:
My CSS for the button is (and has always been):
@import "common/foundation/variables";
#create-topic {
background-color: $tertiary;
color: $secondary;
}
#create-topic:hover {
background-color: $tertiary-high;
color: $secondary;
}
こんにちは、あなたの提案以降に変更があったようです。なぜか、私の方でもうまく機能していません。CSS シートは以下のようになっています：
.custom-header-links a:hover {
background-color:#346A77;
}
.d-header-icons .d-icon {
color: black;
}
.d-header-icons .d-icon:hover {
background-color: #346A77;
color: red;
}
アイコンとホバーの状態は以下の通りです。アイコンやホバーの色を何に変更しても反映されません：
要素を検証すると、スタイルが設定されていることが示されていますが、何らかの理由でカスケードされていないようです。考えられる原因はありますか？
カスタムヘッダーをインストールしましたが、それが影響しているとは考えられませんか？
よろしくお願いいたします
更新: 以下のコードは動作します。@tophee さんもこれで解決するはずです:
.d-header-icons .d-icon {
color: black !important;
}
.d-header-icons a:hover {
background-color: #346A77 !important;
}
コードをありがとうございます。
もし誰かが私と同じ問題に直面した場合に備えて投稿します。ヘッダーとアイコンに使用する色の組み合わせによっては（私のヘッダーは暗い色です）、提供いただいたコードでアイコンの適切な色組み合わせが得られました。
.d-header-icons .d-icon {
color: white !important;
}
.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}
ただし、ヘッダーのアイコンをクリックしてホバーを解除すると、背景が真っ白に戻ってしまいました。私のヘッダーは暗く、アイコンは白に設定されているため、これは適切ではありませんでした。そのため、クリック後にホバーを解除すると、アイコンは真っ白い四角形として表示されてしまいます。これを修正するには、上記の投稿（#93bb54 は私のヘッダーと同じ色）のように「a:hover」だけでなく、「a」の状態も設定するだけで済みました。
.d-header-icons .d-icon {
color: white !important;
}
.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}
.d-header-icons a {
background-color: #93bb54 !important;
color: white !important;
}
これで完璧です！
@awesomerobot さん、こんにちは。
.d-header-icons .d-icon {
color: white !important;
}
というスタイルが、会話内にある同じく d-icon クラスを持つこの封筒アイコンには効かないのはなぜでしょうか？要素を検証すると、確かに d-icon クラスが付いています。
.d-header-icons は、右側のナビゲーションを指します。
PM タイトルのアイコンについては、以下のコードが必要です。
.extra-info-wrapper .private-message-glyph { color: red }
ピン留めやロック済みトピックなどの他のトピックステータスについては、以下を使用できます。
.extra-info-wrapper .topic-statuses .d-icon { color: red; }
SVG形式のカスタムアイコンを追加しましたが、CSSで色を変更することができません。常に黒色になってしまいます。透明度やサイズは変更できますが、色だけは変更できません。
上記の例を試してみましたが、期待通りの結果は得られませんでした。
.list-controls .btn .d-icon{
color: #2CC3D5 !important;
opacity: 0.5;
}
ヘッダーのアイコンでも試してみました。
何が間違っているのでしょうか？
アイコンの SVG コードにインラインで色定義が含まれていますか？おそらく以下のような形になるでしょう：
その場合、その定義を削除するか、値を currentColor に変更してください。
以下をお試しください:
.drop-down-mode .d-header-icons .active .icon {
background: black;
}
特定のアイコンの CSS を変更するにはどうすればよいですか？
<svg class="fa d-icon d-icon-bolt svg-icon svg-node" aria-hidden="true"><use xlink:href="#bolt"></use></svg>
これが CSS でスタイルを適用したいアイコンです。
はい、@Juless さん
このような非常に具体的な CSS セレクターは機能するはずですが、通常そこまで細かく指定する必要がないため、ほとんど使われません：
svg.fa.d-icon.d-icon-bolt.svg-icon.svg-node{
/* ここにあなたのクールな CSS を記述 */
}
ただし、実際には、このシンプルなセレクターで十分機能するはずです：
svg.d-icon-bolt{
/* ここにあなたのクールな CSS を記述 */
}
お役に立てれば幸いです。
場合によっては、これでもなんとかなるかもしれません：
.d-icon-bolt{
/* ここにあなたのクールな CSS を記述 */
}
これを使用したら、完璧に動作しました。@neounix さん、本当にありがとうございました。非常に助かりました。
Sentinelrv と同じ状況です。header_primary を白に変更し、すべてのテーマに推奨されるカスタム CSS を適用しましたが、拡大鏡アイコンとハンバーガーメニューは依然としてグレーのままです。
私もハンバーガー/バーメニューの色を変更できません。検索/検索アイコンは変更されました。上記で述べたヒントをすべて試しましたが、（ウェブ開発者ではないため）失敗しました。誰か解決策を知っていますか？
テーマまたはテーマコンポーネントの common-css で、右側のヘッダーアイコンの場合：
.d-header .d-header-icons .d-icon {
color: <ヘッダーアイコンの色> !important;
&:hover {
color: <ヘッダーアイコンのホバー時の色> !important;
}
}
サイドバーメニューモードのハンバーガーアイコンの場合：
.d-header .header-sidebar-toggle button .d-icon {
color: <ハンバーガーアイコンの色> !important;
&:hover {
color: <ハンバーガーアイコンのホバー時の色> !important;
}
}
<ヘッダーアイコンの色>、<ハンバーガーアイコンの色>、<ヘッダーアイコンのホバー時の色>、<ハンバーガーアイコンのホバー時の色> = 16進数、カラー名、またはテーマカラー変数。アイコンの背景色を変更したい場合は、background-color を指定することもできます。
注：サイドバーではなくハンバーガーのドロップダウンモードを使用している場合、右側のヘッダーアイコン用の最初のスニペットにもハンバーガーアイコンが含まれます。