WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Add superfish changes to style.css in child theme (8 posts)

  1. Rhand
    Member
    Posted 3 years ago #

    Somehow the changes I made in a style.css in my child theme do not seem to overrule the superfish.css in parent-theme/lib/scipts/superfish/superfish.css. In the sourcecode I can still see the parent theme css to be loaded and my added css in child-theme/style.css being ignored even though it is loaded. The only reason that could happen is because the parent theme css for the superfish menu is loaded after teh child css. What to do?
    here is my child theme style.css:

    /*
    Theme Name: Parent Child
    Description: Child theme for the parent theme
    Author: Me
    Template: parent
    */
    
    @import url("../parent-theme/style.css");
    @import url("../parent-theme/lib/scripts/superfish/superfish.css");
  2. esmi
    Forum Moderator
    Posted 3 years ago #

    The only reason that could happen is because the parent theme css for the superfish menu is loaded after teh child css.

    It's far more likely that your custom CSS isn't specific enough.

  3. Rhand
    Member
    Posted 3 years ago #

    @ Esmi Thanks for the reply

    If think that is the case as wp_head() is called after the parent theme css in header.php. The wp_head() loads several scripts and stylesheets like superfish.css:

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="<?php echo ts_get_option('ts_rss'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    
    <?php wp_head(); ?>

    I guess I could try and load the wp_head sooner, but that might mess up some other stuff..

  4. esmi
    Forum Moderator
    Posted 3 years ago #

    I'd leave wp_head alone. I can see that you're loading the child's sheet via ?php bloginfo('stylesheet_url'); ?>. Is the parent's sheet imported into the child's at the very top of the sheet (just after the comment block)?

  5. Rhand
    Member
    Posted 3 years ago #

    Well the comment block + import lines are like this in the child theme's style.css:

    /*
    Theme Name: Parent Child
    Description: Child theme for the Parent
    Author: Me
    Template: parent
    */
    
    @import url("../parent/style.css");
    @import url("../parent/lib/scripts/superfish/superfish.css");
    
    /*	##################################
      	HEADER ADDITIONS
      	################################## 
    
    And so on....*/

    So it is loaded after the comment block and that works for most styles except for the superfish.css dropdown menu styles...

  6. esmi
    Forum Moderator
    Posted 3 years ago #

    The child's stylesheet structure looks like it should work. So we're back to specificity again. The more highly specific your selectors are in your child's stylesheet, the greater the chances that the parent won't over-ride the child.

    If you use Firefox, the Firebug add-on is a great tool for identifying the cascade order across multiple sheets. It might help you to focus your child's style a little more tightly.

  7. Rhand
    Member
    Posted 3 years ago #

    You were right. Found an override by being more specific and adding #header in front of the menu items I needed placed better like:

    #header ts-menu .sf-menu li:hover ul,
    #header .ts-menu .sf-menu li.sfHover ul {}

    Thanks again Esmi!

  8. esmi
    Forum Moderator
    Posted 3 years ago #

    You're welcome. :-)

Topic Closed

This topic has been closed to new replies.

About this Topic