Customizr ウィジェットメニューの before 文字の色を変える
Customizr ウィジェットメニューの before 文字の色を変えるには・・・
探しますよ、かなり。
ポイントは、widget.widget_recent_entries ってクラス。
Customizr ウィジェットメニューの before 文字の色は、カスタマイズによって、ベースとなる css が切り替えられるというのを念頭に。
要するに、ベースが blue なら、blue.css と blue.min.css を直す必要がある。
blue.css は、ダミーなのか知らないけど、ネストが組まれて綺麗になっているので直しやすい、読みやすい。
blue.min.css は、探しにくいので terapad などを使って widget.widget_recent_entries を検索します。
するとこんな感じの部分があるので、ここで、widget.widget_recent_entriesだけ別枠にして色をかえる。
.comments-link
.tc-comment-bubble,
.page-links button.btn,
.social-block a:hover,
.tc-carousel-control:focus,
.tc-carousel-control:hover,
.widget.widget_archive li:before,
.widget.widget_calendar li:before,
.widget.widget_categories li:before,
.widget.widget_links li:before,
.widget.widget_meta li:before,
.widget.widget_nav_menu li:before,
.widget.widget_pages li:before,
.widget.widget_recent_comments li:before,
.widget.widget_recent_entries li:before,
.widget.widget_rss li:before{color:#08c}
?>
こんな感じ
.comments-link
.tc-comment-bubble,
.page-links button.btn,
.social-block a:hover,
.tc-carousel-control:focus,
.tc-carousel-control:hover,
.widget.widget_archive li:before,
.widget.widget_calendar li:before,
.widget.widget_categories li:before,
.widget.widget_links li:before,
.widget.widget_meta li:before,
.widget.widget_nav_menu li:before,
.widget.widget_pages li:before,
.widget.widget_recent_comments li:before,
.widget.widget_rss li:before{color:#08c}
.widget.widget_recent_entries li:before{color:#fff}
?>
同様に .widget.widget_nav_menu li:before も直したい。
ただ、サイドナビでも使う可能性があるので、本来ならクラスを設定したいところだ。
どのクラスを探せばいいのかは、HTMLのソースを見て判断する。
ウイジェットの LI とかで クラスを指定しているので、そのクラスを探すことになる。
探しますよ、かなり。
ポイントは、widget.widget_recent_entries ってクラス。
Customizr ウィジェットメニューの before 文字の色を変える
Customizr ウィジェットメニューの before 文字の色は、カスタマイズによって、ベースとなる css が切り替えられるというのを念頭に。
要するに、ベースが blue なら、blue.css と blue.min.css を直す必要がある。
blue.css は、ダミーなのか知らないけど、ネストが組まれて綺麗になっているので直しやすい、読みやすい。
blue.min.css は、探しにくいので terapad などを使って widget.widget_recent_entries を検索します。
するとこんな感じの部分があるので、ここで、widget.widget_recent_entriesだけ別枠にして色をかえる。
.comments-link
.tc-comment-bubble,
.page-links button.btn,
.social-block a:hover,
.tc-carousel-control:focus,
.tc-carousel-control:hover,
.widget.widget_archive li:before,
.widget.widget_calendar li:before,
.widget.widget_categories li:before,
.widget.widget_links li:before,
.widget.widget_meta li:before,
.widget.widget_nav_menu li:before,
.widget.widget_pages li:before,
.widget.widget_recent_comments li:before,
.widget.widget_recent_entries li:before,
.widget.widget_rss li:before{color:#08c}
?>
こんな感じ
.comments-link
.tc-comment-bubble,
.page-links button.btn,
.social-block a:hover,
.tc-carousel-control:focus,
.tc-carousel-control:hover,
.widget.widget_archive li:before,
.widget.widget_calendar li:before,
.widget.widget_categories li:before,
.widget.widget_links li:before,
.widget.widget_meta li:before,
.widget.widget_nav_menu li:before,
.widget.widget_pages li:before,
.widget.widget_recent_comments li:before,
.widget.widget_rss li:before{color:#08c}
.widget.widget_recent_entries li:before{color:#fff}
?>
同様に .widget.widget_nav_menu li:before も直したい。
ただ、サイドナビでも使う可能性があるので、本来ならクラスを設定したいところだ。
どのクラスを探せばいいのかは、HTMLのソースを見て判断する。
ウイジェットの LI とかで クラスを指定しているので、そのクラスを探すことになる。
スポンサーリンク