Child Theme is breaking icons

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



Comments

  • 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.

    Thanks

  • 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.

  • Let's say I do want to use the child theme, what can I do to fix the icons issue?
  • edited 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
  • I know, just poking a bit of fun  :)

    Any ideas what could fix the icons not showing up in the child theme?
  • 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
  • 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!
Sign In or Register to comment.