CSS rules that the theme gets from a function

by

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. 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?

1 Answer
1

It’s a CSS answer rather than a WP answer, but adding !important to your CSS rules should do it.

Anywhere in your child theme’s CSS that you would like a rule like this…

.comment-list .reply a {
    color: teal;
}

… to override the inline CSS then try using this in your stylesheet instead:

.comment-list .reply a {
    color: teal !important;
}

Any rule with !important should override a rule with the same selector in an inline stylesheet.

Leave a Comment