こんにちは、ハナです。
Cocoonでボックスメニューを作成したら、ボックスメニューのアイコンの色を変えたいと思ったことはありませんか?
デフォルトでは色がオレンジになりますが、好きな色に変更してみたいと思います。
ボックスメニューのアイコンの色の設定
Cocoonの公式サイトでは「キーカラーを変更すると、色が反映されます」とあります。
キーカラーの変更でアイコンの色を変えようとすると、キーカラーは、サイト全体のポイントとなる部分に適用される背景色を指定しているので、そちらまで変更することになります。
今回は、デフォルト動作のようで、カスタマイズもなさそうなので、大丈夫そうかなと思いました。
ボックスメニューのキーカラーを変更したい | カスタマイズ相談 | Cocoon フォーラム
アイコンや、ホバー枠の色を変更するには、以下のCSSを子テーマのstyle.cssに追記すればできるかと思います。
Cocoon フォーラムで「わいひら」さんが、アイコンや、ホバー枠の色を変更するcssを記述されているのでそちらを使用して変更したいと思います。
CSSによるアイコンの色を変更するには
Cocoon フォーラム に記述されている下記コードの、#2ca9e1のカラーコードを好みの色に変更します。
.box-menu-icon{ color: #2ca9e1; } .box-menu:hover { box-shadow: inset 2px 2px 0 0 #2ca9e1,2px 2px 0 0 #2ca9e1,2px 0 0 0 #2ca9e1,0 2px 0 0 #2ca9e1; }
子テーマのstyle.cssへの追記
アイコンの色、ホバー枠の色のCSSは下記の箇所です。
変更したい箇所のみ子テーマのstyle.cssへ記述してください。

管理画面 ⇒ 外観 ⇒ テーマエディターをクリックします。

Cocoon Childを選択して、スタイルシート(style.css)を開きます。

Cocoon Child: スタイルシート (style.css)の所に張り付けて、ファイルを更新をクリックします。
これで色が変更できます。

ボックスメニューごとに色を変えるには
ボックスメニューも複数作成できます。
それぞれのボックスメニューでアイコンの色を変えるには、メニュー作成時のアイコンフォントのクラス名を入力した箇所に、任意のクラス名を追加します。

子テーマのstyle.cssへの追記
追加した任意のclass名の変更したい色をcssで記述します。
.m-box{ color: #00a3af; }
このように変更されました。

サイドバーにボックスメニューを追加した時に、サイドバー見出しもカスタマイズしました。
次はサイドバー、見出しのカスタマイズについて書いてみたいと思います。
Cocoonのカスタマイズが楽しくてなかなか投稿が書けていないハナです。
コメント