I am trying to change the color of entry-footer in my Twenty Fifteen theme. My modifications in the child theme is overridden because when the website is rendered in a browser, WordPress outputs inline CSS generated by the Theme Customizer to the <head>, which overrides the stylesheet.
Inspecting the customizer.php file, I see three relevant sections. First, the color schemes:
function twentyfifteen_get_color_schemes() {
return apply_filters( 'twentyfifteen_color_schemes', array(
'default' => array(
'label' => __( 'Default', 'twentyfifteen' ),
'colors' => array(
'#f1f1f1',
'#ffffff',
'#ffffff',
'#333333',
'#333333',
'#f7f7f7',
),
),
'dark' => array(
'label' => __( 'Dark', 'twentyfifteen' ),
'colors' => array(
'#111111',
'#202020',
'#202020',
'#bebebe',
'#bebebe',
'#1b1b1b',
),
),
'yellow' => array(
'label' => __( 'Yellow', 'twentyfifteen' ),
'colors' => array(
'#f4ca16',
'#ffdf00',
'#ffffff',
'#111111',
'#111111',
'#f1f1f1',
),
),
'pink' => array(
'label' => __( 'Pink', 'twentyfifteen' ),
'colors' => array(
'#ffe5d1',
'#e53b51',
'#ffffff',
'#352712',
'#ffffff',
'#f1f1f1',
),
),
'purple' => array(
'label' => __( 'Purple', 'twentyfifteen' ),
'colors' => array(
'#674970',
'#2e2256',
'#ffffff',
'#2e2256',
'#ffffff',
'#f1f1f1',
),
),
'blue' => array(
'label' => __( 'Blue', 'twentyfifteen' ),
'colors' => array(
'#e9f2f9',
'#55c3dc',
'#ffffff',
'#22313f',
'#ffffff',
'#f1f1f1',
),
),
) );
}
(Thanks to cybmeta, I have learned how to add my own scheme.)
Then, color variations are created and converted to rgba via:
$color_textcolor_rgb = twentyfifteen_hex2rgb( $color_scheme[3] );
$color_sidebar_textcolor_rgb = twentyfifteen_hex2rgb( $color_scheme[4] );
$colors = array(
'background_color' => $color_scheme[0],
'header_background_color' => $color_scheme[1],
'box_background_color' => $color_scheme[2],
'textcolor' => $color_scheme[3],
'secondary_textcolor' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_textcolor_rgb ),
'border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_textcolor_rgb ),
'border_focus_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_textcolor_rgb ),
'sidebar_textcolor' => $color_scheme[4],
'sidebar_border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_textcolor_rgb ),
'sidebar_border_focus_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_textcolor_rgb ),
'secondary_sidebar_textcolor' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_textcolor_rgb ),
'meta_box_background_color' => $color_scheme[5],
);
Finally, the css rules are implemented, for example entry-footer color is within:
blockquote,
a:hover,
a:focus,
.main-navigation .menu-item-description,
.post-navigation .meta-nav,
.post-navigation a:hover .post-title,
.post-navigation a:focus .post-title,
.image-navigation,
.image-navigation a,
.comment-navigation,
.comment-navigation a,
.widget,
.author-heading,
.entry-footer,
.entry-footer a,
.taxonomy-description,
.page-links > .page-links-title,
.entry-caption,
.comment-author,
.comment-metadata,
.comment-metadata a,
.pingback .edit-link,
.pingback .edit-link a,
.post-password-form label,
.comment-form label,
.comment-notes,
.comment-awaiting-moderation,
.logged-in-as,
.form-allowed-tags,
.no-comments,
.site-info,
.site-info a,
.wp-caption-text,
.gallery-caption,
.comment-list .reply a {
color: {$colors['secondary_textcolor']};
}
My question: What is the way to add more colors to my own scheme (so it will contain more than six colors), then give it a name in the second stage shown above, and, finally, implement the rules in the third stage?
Aucun commentaire:
Enregistrer un commentaire