Page 1 of 2

child theme css changes not working

Posted: October 6th, 2014, 9:30 pm
by milnewagg
Hi,

I installed weblizar-premium onto my host and created a child theme using your guide.
I activated the child theme but edits i make to the child theme style.css are not overwriting the parent style.

Here is the contents of my child style.css

/*
Theme Name: weblizar premium child
Theme URI:
Description: weblizar premium child
Author:
Author URI:
Template: weblizar-premium
Version: 1.0.0
Tags:
Text Domain: weblizar-premium-child
*/


@import url("../weblizar-premium/style.css");


/* =Theme customization starts here
-------------------------------------------------------------- */

.footer .footer-col .footer-title, .footer .copyright a:hover {
color: #6BD338;
}

The child stylesheet shows up in the wordpress appearance editor but changes are not implemented.

My website is www.landformlandscaping.co.uk

Thanks

Re: child theme css changes not working

Posted: October 6th, 2014, 11:31 pm
by milnewagg
Silly me, the solution is to paste custom css into the appearance/weblizar options/general settings/custom css box.

Re: child theme css changes not working

Posted: October 7th, 2014, 5:07 pm
by admin
Hi Milne

The custom css box is use the little css customize.

But child theme is best option for customization.

CSS not overwrite parent theme. Then you can use !important tag in css code.

Fore example:

.footer .footer-col .footer-title, .footer .copyright a:hover {
color: #6BD338 !important;
}

Child theme css is worked.

Thanks

Re: child theme css changes not working

Posted: October 8th, 2014, 2:43 pm
by milnewagg
Unfortunately pasting into my child's style.css has no effect either with or without the !important comment.

Here is a screenshot of the page with the custom style applied, notice it has no effect and the colour is bright green.
screen.jpg
Also a shot of my child theme style.css
screencss.jpg

When I paste the same line into the weblizar option custom css box the changes work when in the child's style.css they dont.

Perhaps my child theme is incorrectly configured?

Thanks.

Re: child theme css changes not working

Posted: October 8th, 2014, 5:24 pm
by admin
@ milnewagg : yes you are right , it sounds that your child theme is not configured in a correct way.

Re: child theme css changes not working

Posted: October 8th, 2014, 9:27 pm
by milnewagg
Any suggestions for a fix?

Re: child theme css changes not working

Posted: October 9th, 2014, 3:09 pm
by admin
Hello milnewagg ,

The CSS works in Main Theme not in Child-Theme , Just because the you have coded the theme option from the Main Theme Not with the Child-Theme.

Thanks

Re: child theme css changes not working

Posted: October 9th, 2014, 6:47 pm
by milnewagg
Looks like i have fixed it.
I'm a complete noob (I build gardens not websites). I googled it and pasted this into my child theme header.php :

'<style>
@import url("<?php bloginfo('template_url'); ?>/style.css");
@import url("<?php bloginfo('stylesheet_url'); ?>");
</style>'

Edit:

Only a partial fix. Some elements such as the menu and the image overlay on the porfolio are still using the parent style.

Could really use some advice.
Thanks

Re: child theme css changes not working

Posted: October 10th, 2014, 5:05 pm
by admin
@ milnewagg : your child-theme must enqueued your child theme's style.css file correctly.

All the CSS related changes must be done with in the child-themes style.css

Re: child theme css changes not working

Posted: October 10th, 2014, 5:05 pm
by admin
@ milnewagg : your child-theme must enqueued your child theme's style.css file correctly.

All the CSS related changes must be done with in the child-themes style.css