Child Theme is breaking icons

NLPwithVanda · July 2020

Hello,

I've tried to use your child theme in order to delete some "!important" css code from base.css which interferes with styling a booking form plugin.

However when I activate it, all icons on the site stop working and display a □ instead.

What do I need to do to make icons work with the child theme?

And is there a different/better way to remove a few lines of code from base.css?

These are the rules I can't seem to overwrite with custom CSS:

.ui-datepicker table tr:first-child td{background:inherit!important}

.ui-datepicker table tr:hover td{background:inherit!important;color:inherit!important}

.ui-datepicker table tr:hover td a{color:inherit!important}

.ui-datepicker table tr:nth-child(2n) td{background:inherit!important}

Thank you very much for your help!

Joh

Pablo · July 2020

Hello,

You don't have to use Child Theme to overwrite CSS code.

What you have problem with is specifity of CSS, you can make your
CSS rule better by adding more detailed target of your CSS code.

More
informations about specifity here, in the mozilla docs - I suggest
looking there, in my humble opinion, the mozilla docs are really
well-written.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Thanks

NLPwithVanda · July 2020

Hello Pablo,

I will try that thank you. It's a shame the Betheme developers didn't read this guide, otherwise they'd know not to use !important in a site-wide style sheet ;-)

Always look for a way to use specificity before even considering !important
Only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css).
Never use !important when you're writing a plugin/mashup.
Never use !important on site-wide CSS.

NLPwithVanda · July 2020

Let's say I do want to use the child theme, what can I do to fix the icons issue?

Pablo · July 2020

This theme is really huge, it include a lot of css code and !important rule is unavoidable here

If you have some other questions, feel free to ask.

Sorry, but we did not test the booking plugin, so we are not able what exactly need to be fixed.

thanks

NLPwithVanda · July 2020

I know, just poking a bit of fun

Any ideas what could fix the icons not showing up in the child theme?

Pablo · July 2020

But, the icons disappear even when the Child Theme without any modifications is enabled?

It could be the because of CORS library which hasn’t been installed on your server.

More details about the CORS you can read on http://enable-cors.org/server.html but we recommend to contact with your server administrator this case because he will be able to help you for sure.
P.S. For .htaccess solution, please visit http://forum.muffingroup.com/betheme/discussion/4902/icons-are-gone-cors-solved-within-htaccess

Also, check if disabling that plugin solve the problem with disappearing icons too.

thanks

NLPwithVanda · July 2020

Hi Pablo,

Yes the problem persisted even with all plugins disabled.

I copied the fonts folder across to the child theme and that solved the problem, if anyone else has the same issue.

Not the most ideal solution but I don't expect the icons css to be updated a lot, so should be fine. Otherwise I'll check with my host about CORS library.

Thanks for your help!

Child Theme is breaking icons

Comments