Xi and The Events Calendar have some CSS conflicts. One was an easy override in our child style.css, but the other was not, so I want to document that one here. (The other override is documented in our style.css.)
Namely, they both use an element with the ID “ajax-loading”. This was causing the little “spinning” icon animation that appears when you move from month to month in the calendar to appear all blocky and large.
The plugin only references that ID, and only locally within one page, so it doesn’t cause a problem elsewhere. But the theme styles it globally, and styles it pretty extensively. So it would be painful to attempt to clean it up in our child style.css.
So while I’ve asked for the Xi folks to consider patching their theme to not have this conflict in the future, in the meantime I’ve edited their source files as a quick, easy fix.
Specifically, I edited
- wp-content/themes/LivingOS_Xi/style.css
- wp-content/themes/LivingOS_Xi/base/lib/ajaxpagination.php
to rename #ajax-loading to #los-ajax-loading.
(“los” is consistent with some of their other naming since their brand is “LivingOS”.)
