Use full styles only for month view

[nysci]

We found that the “full” styles were interfering with a lot of our own styles on single event pages. But we want all of the “full” styles on the month view, especially since they are needed for mobile view to look nice.

I want to add a conditional in my enqueue_styles hook so that it will check like so:

if (is_month()) {
// include TEC "full" styles instead of "skeleton"
}

What’s the Tribe command for ‘include “full” styles instead of “skeleton”‘?

[Patricia]

Hi there,

Thank you for reaching out to us!

The the-events-calendar/src/Tribe/Template_Factory.php file has the function which adds the selected style to body class for add-on styling:

on line 178, we have the following:

178         // add selected style to body class for add-on styling
179         $style_option = tribe_get_option( 'stylesheetOption', 'tribe' );
180 
181         switch ( $style_option ) {
182             case 'skeleton':
183                 $classes[] = 'tribe-events-style-skeleton'; // Skeleton styles
184                 break;
185             case 'full':
186                 $classes[] = 'tribe-events-style-full'; // Full styles
187                 break;
188             default: // tribe styles is the default so add full and theme (tribe)
189                 $classes[] = 'tribe-events-style-full';
190                 $classes[] = 'tribe-events-style-theme';
191                 break;
192         }

Based on this, I believe that the stylesheet you need to enqueue is ‘tribe-events-style-full’. Could you please test and let me know how it goes?

Thanks!

Patricia

[nysci]

Thanks, Patricia. Your reply wasn’t helpful. However, I did solve it myself. What was missing were the special mobile stylesheets. Also, the skeleton styles were adding some unhelpful css, and needed to be dequeued.

In case it will help someone else, I’ll post my final code. This is what you want to use if you do not want TEC styles applied to single event pages, but do want them applied to month/week/day pages. In my settings, I chose “skeleton.” Then I added this to functions.php in my theme:

add_action('wp_enqueue_scripts', 'mycustom_enqueue', 99);
function mycustom_enqueue() {
	if (!is_admin()) {
		if (tribe_is_month() || tribe_is_week() || tribe_is_day()) {
			wp_dequeue_style('tribe-events-calendar-style'); // remove skeleton css
			wp_dequeue_style('tribe-events-calendar-pro-style'); // remove other skeleton css
			wp_enqueue_style('tribe-events-full-calendar-style', WP_PLUGIN_URL.'/the-events-calendar/src/resources/css/tribe-events-full.min.css');
			wp_enqueue_style('tribe-events-theme', WP_PLUGIN_URL.'/the-events-calendar/src/resources/css/tribe-events-theme.min.css');
			wp_enqueue_style('tribe-events-calendar-full-mobile-style', WP_PLUGIN_URL.'/the-events-calendar/src/resources/css/tribe-events-full-mobile.min.css');
			wp_enqueue_style('tribe-events-calendar-mobile-style', WP_PLUGIN_URL.'/the-events-calendar/src/resources/css/tribe-events-theme-mobile.min.css');
		}
	}
}

Aaron Hodge Silver
Springthistle Tech

Home

[Patricia]

Hi Aaron,

Thanks for sharing your solution here for future reference!

If you have any other questions at all please feel free to let me know and I’d be happy to help.

Regards,

Patricia

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts