0

I've created a custom child theme of parent theme Cordillera.

This is my child theme's header.php (<head>): 

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="<?php bloginfo( 'charset' ); ?>" />
    <?php wp_head();?>
<?php
global $enable_home_page;
$banner = "";
$home_banner_type = cordillera_options_array("home_banner_type",1);
$enable_home_page = cordillera_options_array("enable_home_page");
 if( is_front_page() ){
      $class      = "homepage";
      $banner     = cordillera_get_banner($home_banner_type);
     } 
     else
     {
      $class      = "sitepage";
     }

?>
<link href='http://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<?php if(!(is_front_page())) { ?>
<!-- non-front-page CSS -->
<style>
    html {
      background-color: transparent;
      background: url('<?php echo get_stylesheet_directory_uri(); ?>/images/bg-product.jpg') no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
<!-- END non-front-page CSS -->
</style>
<?php } ?>
<?php if(is_page(6)) { ?>
<!-- shop page CSS -->
<style>
    .blog-main {
      background-color: transparent !important;
    }
</style>
<!-- shop page CSS -->
<?php } ?>
</head>

I haven't included a link to my child theme's style.css in this file, instead using:

add_action( 'wp_enqueue_scripts', function() {
    wp_register_style( 'childstyle', get_stylesheet_uri());
    wp_enqueue_style( 'childstyle', get_stylesheet_uri());
});

in my child theme's functions.php.

However, when logged into Wordpress admin, and viewing WooCommerce pages, some of the admin tool bar links are being colored by my child theme's style.css.

enter image description here

How can I prevent this? Thanks.

|improve this question
  • Just to make sure: The style does not interfere with the actual wordpress backend (everything behind wp-admin), but rather with the admin toolbar in the frontend? – Hendrik Luehrsen Jul 31 '15 at 9:40
  • 2
    It is very likely (although an assumption) that you have a CSS style for your anchor tags that also include the !important declaration, such as a { color: #0066FF !important } — so please check your theme parent stylesheet and child theme stylesheet for any similar styles. – Adam Jul 31 '15 at 10:00
  • 1
    In Firefox, right click on the "Temper Temper..." link and select "Inspect Element (Q)". Go to the right-hand panes at the bottom and select "Computed". Scroll down to find "color". Click the expand triangle and you'll see the list of rules (& their stylesheets) that led to this situation... – bonger Jul 31 '15 at 16:59
1
+50

Restructure your CSS files and remove !important rules from your .css files and use proper markup (classes, IDs and etc.).

e.g.

a, .entry-summary a, .entry-content a {
  color: #06F !important;
  font-weight: 400;
}

Judging from the test WS which was found with site: search in Google using the URL in your Facebook profile (Temper Temper).

Edit 1: Although !important rules can be handy from time to time, usually they broke the structure especially if they are not used with proper and detailed planning.

|improve this answer
-1

What I'd try to do is applying !important to wp-admin native styles. But that would be costly because I would need full control of core files, and I would lose all the styles when upgrading to newer version of wordpress.

If I don't want to mess with native wordpress code and do it specifically with the theme, I'd try to have unique classes for the links and all the theme's conflicting elements with admin area. Like, if I wrap my whole theme in <div id="viewport"> and then in my theme file I do #viewport a{color: yellow !important;} I guess it would work.

That's all I can think of, may be there would be better way just to prioritize execution of the CSS files by using a custom filter.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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