-
Posts
-
Hello. I recently updated to the latest version of Enfold (4.8.7.1, from 4.7.x), and suddenly none of the Enfold custom event styles from event-mod.css are being applied to events pages. I can see the link reference to the stylesheet in the HTML source, but the styles are not being applied to the page elements for some reason.
Steps I have already taken:
1. Disabled all caching on my site
2. Disabled CSS and JavaScript file merging and compression in Theme Options – Performance
3. Purged the client-side browser cache
4. Purged the Cloudflare site cache and enabled their development mode bypassNone of this has helped.
I am at a loss for how to further troubleshoot and diagnose this. Any advice / suggestions are welcome.
Thank you.
Hey Gary,
Thank you for the inquiry.
We are not yet sure why the event styles are not loading in your site. Did you adjust any template files in the child theme, or add any modifications in the functions.php file? Please provide the login details in the private field so that we can check the issue further.
Best regards,
IsmaelThank you Ismael.
I solved the initial issue of the styles in event-mod.css not being applied by upgrading my TEC calendar views to their new version. This has fixed the layout problems.
However, I am now seeing a new problem with fonts on the event pages not following the theme styling. Everything is being rendered in Helvetica instead of my theme font (Open Sans). Upon investigation, I am seeing invalid property declaration warnings in the Edge Chromium debugger.
I have posted a link to a screenshot in the private content area, as well as WordPress site credentials. Please let me know what else I can provide to help.
Best,
Gary
Hi,
Thank you for the login, this issue with this css:.tribe-events-content ol,.tribe-events-content p,.tribe-events-content ul,.tribe-common .tribe-common-b2 { font-family: Open Sans:400,600,Helvetica,Arial,sans-serif; font-size: 15px; }is that the font Open Sans should have quotes around it and not include the numbers like this:
.tribe-events-content ol,.tribe-events-content p,.tribe-events-content ul,.tribe-common .tribe-common-b2 { font-family: 'Open Sans',Helvetica,Arial,sans-serif; font-size: 15px; }I couldn’t find where this was loading from to correct, I think it’s from the plugin, but this css should correct, try adding this css to your child theme:
#tribe-events-pg-template .tribe-events-content ol,#tribe-events-pg-template .tribe-events-content p,#tribe-events-pg-template .tribe-events-content ul,#tribe-events-pg-template .tribe-common .tribe-common-b2 { font-family: 'Open Sans',Helvetica,Arial,sans-serif; font-size: 15px; }After applying the css, please clear your browser cache and check.
Best regards,
MikeThanks Mike.
Looking at things in the debugger, the source of the problematic font family definition in the CSS is the auto-generated Enfold child theme CSS file: (…/wp/wp-content/uploads/dynamic_avia/enfold_child.css?ver=618be12cee9ca). As a test then, I tried changing the body text font in my child theme settings, and this eliminated the problem. I discovered that switching to basically any other font (in the UI below) seems to avoid the broken font family definition.
Switching body text styling back to Open Sans caused the problem to reappear.
If you would like to verify this, I give you my permission to temporarily change the body text font in order to see the results. (We are in our off-season and traffic to the site is low now.) Just be sure to change it back to Open Sans when you are done.
Of course, this issue is only showing up on the Event Calendar pages, not elsewhere in the site, so it seems to be some kind of interaction between the theme and the plug-in. I don’t have to means to test if this is specific to my site only, or if it is maybe a general issue. Is this something you have a way to check on your end?
Thank you
Hi,
Thanks for the feedback, I have summarized this for the Dev Team to review and will reply here when I receive an update, thank you for your patience.Best regards,
MikeThank you Mike.
As a follow up, I believe any investigation should look into this with the Enfold Church demo theme. This is the theme we used as the basis for our site, and it has specific Enfold TEC customization that may be a factor.
I was able to test this on another site with Enfold after temporarily installing TEC. Without the Church demo theme I could not replicate the issue. But I also could not apply the Church demo theme to this site to test.
That leads me to believe that what’s going on is either something specific to our site, or something specific to the Enfold TEC customization that’s applied by the Church demo.
Edit: I realized that I made an assumption that the TEC customerization is installed only with the Church demo theme and not as a standard part of Enfold, since TEC is included with the demo. But if this isn’t the case then I think the issue must be with our code or with another plugin on our site. I’ll do some more investigation on my end as well.
Hope this helps.
Hi,
Thank you for your tests and feedback, I believe that the error is related to the file\wp-content\themes\enfold\config-events-calendar\event-mod-css-dynamic.phpbut I’m not exactly sure so I have reported the issue and am waiting for the Dev Team to review and advise, thank you for your patience.Best regards,
MikeHi,
The Dev Team has fixed the issue for the next update, if you would like to apply it to your current version please see the link below to the new event-mod-css-dynamic.php file. Please save a fallback version of your current file at
\wp-content\themes\enfold\config-events-calendar\event-mod-css-dynamic.php
and then replace it with the one below via FTP, then clear your browser cache and any cache plugin, and check.Best regards,
MikeHi Mike, thank you for the response. I am sorry for the late reply. I will give this a try.
Best,
Gary
Okay, another update on this after being able to test with the new file.
It appears that the original broken CSS font-family styling issue is corrected, so thank you for this. However, there are still quite a number of cases where the Enfold theme styling not being applied on the new TEC 5.x event pages. For example, headlines within the content are rendering as Helvetica instead of the theme styling, there are spacing issues with UL and LI elements, etc.
For context, our site’s design is based on the original Enfold Church Demo, and a version of TEC is automatically installed with that template. For several years this has served us well.
We can hand-override the various styling issues if needed, but I am trying to understand if this is as intended, or if there are are CSS updates you plan to roll out to the theme to address this?
For reference, here is an event page on our site (post fix) showing the lack of consistent theme styling: https://www.cascadehorseshows.com/event/2021-swiftwater-invitational/
Please let me know, thank you.
Gary
Hi,
Glad to hear that the new file helped.
When you say headlines within the content are rendering as Helvetica instead of the theme styling I assume you mean like the h3 heading Cascade Circuit Cup Eligible
this is set by TEC and we would respect TEC content styling:
so we or you should not want the theme style to override any TEC style within the main body within the template-event-page div.
In the past there have been issues with UL & LI, because TEC likes the inside position:
and we typically are outside:
so this could be considered more about site consistently & user preference.
I know that we have recently adjusted for the new TEC 5.x event pages and made some styling changes but I don’t see anything new being worked on, if there was something specific for all users I would be happy to post it to the Dev Team, but we would have to be careful. For example, I installed a clean version on Enfold with TEC & the Church Demo on my localhost, then I exported your events to it, and found that the consistently of your event content without the customizations, scripts, custom fields, and shortcodes seem correct. Please see the screenshots in the Private Content area.
So I will be happy to help you style your page and override any TEC styles, but I can’t recommend a change to the Dev Team to override any TEC styles within the TEC content, I hope that makes sense.
As this thread is getting quite long I would also recommend starting new threads for individual TEC customizations so they will be easier for other users to find.Best regards,
MikeThanks Mike, I appreciate the detailed response.
Yes, the headline styling I mentioned was in reference to the H3 styles you pointed out. I had a feeling you might say this, and it’s okay, we can restyle the pages.
All I can say is that when we first chose Enfold for our site using the Church Demo template, I recall that all of the TEC event pages we created were styled to match the theme styling (at least in terms of fonts), without us having to do anything. I had thought that was intentional, since the Church Demo used TEC as an integrated feature. But with the updated TEC plug-in, it appears this is no longer the case.
In any case, I have also found good bit of our own TEC-related CSS overrides in our child theme’s CSS that I apparently used to adjust spacing here and there. Some of this is no doubt invalid for the new TEC 5.x plug-in. I will spend some time cleaning this up and restyling things to our liking.
Thanks again for the help. Should you have any further updates on this, please let me know.
Best,
GaryHi,
Thanks for the feedback, if you have found some pre TEC-5 child theme css overrides then adjusting them probably would be necessary, I can’t think of anything else that would be relevant. After you have cleaned up the old styling and you find you would like some help with any TEC customizations, please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Custom Enfold Styles for The Events Calendar Not Applied’ is closed to new replies.