Wordpress cocoon での附箋や枠の色を設定する方法を教えてください！

WordPressでブログを作成しています。
cocoonをプラグインして使用しています。
初心者で本やネットを読んでも分からない事が多いので
有料講師をお願いしましたが、教えてくれません。
その為、ネット検索して試行錯誤をしております。

編集メニューのスタイルの中の附箋・白抜き・案内・インライン・ボタンなどの
背景の色や枠縁の色を自分好みの色にしたいです。

しかし、既存の選択肢には、大まかな青・赤・黄色・緑などしかなくブログの色と合わなく浮いてしまいます。

テキスト表示には、
<div class="blank-box sticky st-blue">附箋　青</div>
<div class="blank-box bb-green">白抜き　緑</div>
<span class="red-under">　と表示されています。

st-blue という様に英語で表記されており、yellowと置き換えれば黄色になります。
しかし、＃f09199　など色コードに置き換えると変化なしです。

また、外観→カスタマイズ→CSS追加
Cocoon Child: スタイルシート (style.css)
に添付画像の様に下記の文字を入力しましたが、変化なし。

btn-red { background-color: #f44336; }
.blank-box { /*灰色*/
border: 3px solid #949495;
padding: 1.2em 1em;
margin: 1em 2%;
}
.blank-box.bb-yellow { /*黄色*/
border-color: #ffd900;
}
.blank-box.bb-red { /*赤*/
border-color: #ffad8d;
}
.blank-box.bb-blue { /*青*/
border-color: #0095d9;
}
.blank-box.bb-green { /*緑*/
border-color: #9d2c00;
}

好きな色に設定する方法ありましたら、教えてください。
宜しくお願いいたします。

No.1 ベストアンサー 回答者： nana_coco 回答日時： 2021/05/30 20:08

例えば追加した赤の部分を下記のスタイルシートに書き直したらどうなりますか？

.blank-box.bb-red {
border-color: #ffad8d !important;
}

この回答へのお礼

白抜き枠縁の色が変わりました。
ありがとうございます。
大変、助かりました。

これで既存の項目を変更する事ができましたが、
新たに色の選択肢を増やし、色を指定することは、できますか？

また、白抜き枠内の背景に色を付ける事はできますか？

お礼日時：2021/06/01 10:14

No.2 回答者： nana_coco 回答日時： 2021/06/01 13:13

>新たに色の選択肢を増やし、色を指定することは、できますか？

新たに加えたい色のクラスをCSSに追加し、HTML側にクラスを書き加えれば色を増やしていく事は可能です。
が、これを聞いているレベルでは実装するには少し難しいかもしれませんので勉強されたほうがよろしいかと思います。


背景を変えるには例えば以下で「.blank-box」が黒色に変わると思います。
（変わらないようなら後ろに「!important」を入れて優先させてみてください。
.blank-box　{
background: #000;
}

この回答へのお礼

色が変わりました。
もう一度、初心者用の教科書を探して読んでみようと思います。
ご回答、ありがとうございました。

お礼日時：2021/06/05 14:57