Stylesheet Loading Optimization

[B.]

Hi, we’re just trying to do a little optimizing and cleanup on a site that is soon to launch. Noticing that a stylesheet loads on all pages, even though it’s not needed. Just looking for a little assistance on removing it.

– ‘widget-calendar-skeleton.css‘ appears to load on all pages, but we don’t use the calendar widget (only the Upcoming Events List widget). Any function that could be added so this isn’t loaded?

Thanks!

[Cliff]

Hi Tracey. I’m glad to hear about optimizing the loading of site assets!

That CSS file is located at /wp-content/plugins/events-pro/src/resources/css/widget-calendar-skeleton.css — in other words, it’s part of the PRO add-on.

On my test site, I have:

• Twenty Fifteen theme
• The Events Calendar plugin version 3.12.2
• PRO add-on version 3.12.1

And I don’t have that CSS file loading…

Could you please make sure you have the same versions of both the core plugin and the PRO add-on plugin that I have?

And if you already do, could you please double-check your widgets and make sure you’re not loading anything that would be making that CSS file load?

Other thoughts:

• try switching to the Twenty Fifteen theme temporarily and testing for it
• try a fresh browser (so that page load with the CSS file isn’t cached in your browser)
• If you can’t figure it out, maybe send me a link and I can check it out (if it’s soft-launched — you could always use a “Private reply” if needed)

Thanks!

[B.]

Hi, thanks for the reply. I checked another similar site and see the same thing. I am running latest versions of all software.

I’m wondering if something in the way we’re replacing the main stylesheets with our own combined & modified version may be causing this?!? Here’s the function we use to replace the TEC & ECP main stylesheets with our single combined version (compiled from both originals). I checked that file and did not see any @import lines, though, so it shouldn’t be bringing any additional sheets along.

// Replace Events Calendar 3.x CSS with our modified version
function replace_tribe_events_calendar_stylesheet() {
   $styleUrl = get_bloginfo('template_url') . '/tribe-events/tribe-events-full-modified.css';
   return $styleUrl;
}
add_filter('tribe_events_stylesheet_url', 'replace_tribe_events_calendar_stylesheet');

function replace_tribe_events_calendar_pro_stylesheet() {
   $styleUrl = get_bloginfo('template_url') . '/tribe-events/tribe-events-full-modified.css';
   return $styleUrl;
}
add_filter('tribe_events_pro_stylesheet_url', 'replace_tribe_events_calendar_pro_stylesheet');

Is there a filter that could be added to this function to just not load that file (or replace with our main ‘combined’ file)??

Thanks!

[Cliff]

Thanks for sharing the code snippet you’re using.

FYI Stuff:

The ‘tribe_events_stylesheet_url’ filter is located in /wp-content/plugins/the-events-calendar/src/Tribe/Asset/Events_Css.php and the ‘tribe_events_pro_stylesheet_url’ filter is located in /wp-content/plugins/events-pro/src/Tribe/Asset/Events_Pro_Css.php

Both of these filters are mentioned in our Themer’s Guide.

For Your Request:

This bit of code: 'widget-calendar-' . $stylesheet_option . '.css' is found in /wp-content/plugins/events-pro/src/Tribe/Mini_Calendar.php — so you must have “Skeleton Styles” selected in your Display settings.

And just a few lines under that code, there’s another filter: ‘tribe_events_pro_widget_calendar_stylesheet_url’ — so you might be able to leverage that to accomplish what you want.

I think I figured out that, in order for widget-calendar-skeleton.css to load, you have to select “Skeleton Styles” and also be using the Mini Calendar widget.

Bonus Info:

Here’s a code snippet that may come in handy for your optimizations (will need to be modified for your usage but may be useful instead of or in addition to filters): https://gist.github.com/cliffordp/d3e17609114d84eb6a36 (note lines 43-44 for your situation)

You might want to go the wp_dequeue_script route instead of the filter mentioned above. It’s your choice.

Let me know how it goes!

[B.]

Hi Cliff,
Thanks for the very helpful reply. I looked at our settings, and yes we are using Skeleton styles (we have to choose 1, figured this would be lightest). But we definitely do not, and never have, used the Mini Calendar widget. We only use the Event List widget.

So I tried your ‘dequeue method’ to remove all of the styles instead of our filter. In ‘Core > Skeleton Styles’ I let it remove the main calendar-style. Then in ‘Pro > Skeleton Styles’, I had it remove the main calendar style as well as the 2 widget-calendar styles. Everything else is commented out.

This seems to get rid of all Tribe Event styles EXCEPT:
– the Datepicker (too long to port over to our master)
– and the JQuery Smoothness styles (what exactly does this one do???)

Then we enqueued our main combined & modified stylesheet to replace them.

Everything appears to look fine at first glance, and we finally got rid of those calendar widget stylesheets. I also hadn’t noticed that before it appeared to have been loading our main modified stylesheet twice, but this is now corrected as well.

Hoping this is a solid solution. I guess if you guys change classes/ids or other attributes, our stylesheet may break. Hopefully you won’t do this often!!!

I’ll post a link in a private reply to a test site that we had created in case you want to check it to make sure nothing obvious seems broken.

Thanks again!

[B.]

This reply is private.

[Cliff]

This reply is private.

[Cliff]

Tracey, I’m very glad you were able to accomplish your optimization goals with my assistance! * warm fuzzies * 🙂

Regarding the plugin changing id or class names… that’s a risk you take when you go the “full custom” route with any plugin, but I think your site looks very nice. It’d be a lot of work for us too if we were to change id or class names so I’d guess (no guarantees) it’d be low risk.

And jQuery Smoothness is a theming part of jQuery UI (search that link’s content for “smooth” to learn more).

Let me know if you need anything else.

P.S. Since you’re doing all custom stuff, you may want to check out our Showcase.

[B.]

Hi Cliff,
Thanks for letting us know about the incorrect directories. We did find a few, mostly in the mobile/media queries section. I may have noticed that in phone/iPad testing, but thought it was something deeper with those OS’s.

And do you know where the jQuery Smoothness styles are used in ECP? I tried disabling that stylesheet and didn’t see any obvious changes, but I’m wondering if it’s somewhere subtle or buried a bit that might not be obvious at first-glance.

Thanks!

[Cliff]

You’re welcome.

I appreciate your question about jQuery UI and the desire to possibly customize/remove it for your use. However, we cannot provide such in-depth customization help, per our Terms.

I hope you can appreciate this, and I welcome you to dig deeper into the code as needed for your customizations.

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts