3

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
  • Have you tried deleting color values in the customizer? If they are blank, wouldn't the rules in your child theme prevail?
    – Jeff Cohan
    Jul 10, 2015 at 16:27

1 Answer 1

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.

1
  • Can you please be a bit more specific in this answer and explain the surroundings/ the concept you are suggesting a bit more in depth?
    – kaiser
    Jul 21, 2016 at 12:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.