Tagged: child theme, CSS, enfold
-
AuthorPosts
-
May 31, 2013 at 2:30 pm #24128
Hi – relatively new to modifying WP themes, so I apologize if this is an obvious one. I’ve setup a child theme correctly for Enfold (style.css) and it works great to override some things. However it doesn’t seem to override all the .css files that come with the Enfold package…
For example I tried to edit the positioning of the logo. If I target the logo in my style.css and change the margins, it does nothing. If I do the exact same thing in layout.css it does what I want it to do.
Does this have to do with the order in which enfold calls up the stylesheets? If so, is there a way I can change this so the child stylesheet comes up last?
Thanks for the help!
May 31, 2013 at 2:54 pm #122418Hi erh1086,
It is most likely in the way you are targeting the css. You need to make sure the css targets the item with greater authority than something else.
So for instance, .logo {left:10px;} wouldn’t do anything where as #top .logo {left:10px} would.
Regards,
Devin
June 4, 2013 at 4:20 pm #122419I have noticed that I need to include !important on all my declarations in the child-theme CSS file.
#top .logo {left:10px !important;}
Am I missing something that I have to do this for all the new CSS rules I am creating? Shouldn’t the child theme CSS override?
June 4, 2013 at 5:01 pm #122420Can we take a look at the site with the child theme active?
June 4, 2013 at 6:40 pm #122421Yes, but I can’t post the URL publicly right now. Can I send you a direct email?
June 4, 2013 at 9:45 pm #122422this bothers me as well. the childthemes css gets loaded before the parents css. so you have to specify a higher css level to the child styles.
June 5, 2013 at 3:00 pm #122423Thank you for pointing that out! Its actually a really quick simple fix that just needed to be called to our attention :)
In the main enfold functions.php the child theme style just needs to be moved to the end of the list. So look for:
//register styles
if($child_theme_url != $template_url)
{
wp_enqueue_style( 'avia-style');
}
wp_enqueue_style( 'avia-grid');
wp_enqueue_style( 'avia-base');
wp_enqueue_style( 'avia-layout');
wp_enqueue_style( 'avia-scs');
wp_enqueue_style( 'avia-prettyP');
wp_enqueue_style( 'avia-media');and move the style.css below the rest so it gets called after:
//register styles
wp_enqueue_style( 'avia-grid');
wp_enqueue_style( 'avia-base');
wp_enqueue_style( 'avia-layout');
wp_enqueue_style( 'avia-scs');
wp_enqueue_style( 'avia-prettyP');
wp_enqueue_style( 'avia-media');
if($child_theme_url != $template_url)
{
wp_enqueue_style( 'avia-style');
}Just tested on my demo that I use for the videos and I’ve pushed the change to the theme git for the next release.
Regards,
Devin
June 5, 2013 at 4:00 pm #122424Thanks Devin for the quick fix. It seems to be ok on my end now and I was able to remove some of the !important rules in the CSS declarations. I’ll check to see if the couple that are still using it are just not targeting with enough authority.
-
AuthorPosts
- The topic ‘Issue with Child Theme’ is closed to new replies.