Global_Elements::get_css_template( string $css_template )

Filters the Global Elements section CSS template to add Views v2 related style templates to it.

Please note: the order is important for proper cascading overrides!


Parameters

$css_template

(string) (Required) The current CSS template, as produced by the Section.

$section

(Tribe__Customizer__Section) (Required) The Global Elements section.

$customizer

(Tribe__Customizer) (Required) The current Customizer instance.


Top ↑

Return

(string) The filtered CSS template.


Top ↑

Source

File: src/Tribe/Views/V2/Customizer/Section/Global_Elements.php

	public function get_css_template( $css_template ) {
		// For sanity's sake.
		if ( ! tribe_events_views_v2_is_enabled() ) {
			return $css_template;
		}

		$new_styles   = [];

		// It's all custom props now, baby...

		// Font family override.
		if ( $this->should_include_setting_css( 'font_family' ) ) {
			$new_styles[] = "--tec-font-family-sans-serif: inherit;";
			$new_styles[] = "--tec-font-family-base: inherit;";
		}

		/**
		 * It's about to get complicated - Font Size overrides!
		 *
		 * If they set a base font size, we set the font_size slider to match via js.
		 * If they set the slider, we set `font_size_base` to match via js.
		 * So we only have to do calculations based on the `font_size_base` setting.
		 *
		 * Original font sizes for reference:
		 * --tec-font-size-0: 11px;
		 * --tec-font-size-1: 12px;
		 * --tec-font-size-2: 14px;
		 * --tec-font-size-3: 16px;
		 * --tec-font-size-4: 18px;
		 * --tec-font-size-5: 20px;
		 * --tec-font-size-6: 22px;
		 * --tec-font-size-7: 24px;
		 * --tec-font-size-8: 28px;
		 * --tec-font-size-9: 32px;
		 * --tec-font-size-10: 42px;
		 */
		if ( $this->should_include_setting_css( 'font_size_base' ) ) {
			$sizes           = [ 11, 12, 14, 16, 18, 20, 22, 24, 28, 32, 42 ];
			$size_multiplier = 1;
			$size_multiplier = round( (int) $this->get_option( 'font_size_base' ) / 16, 3 );

			foreach ( $sizes as $key => $size ) {
				$font_size = $size_multiplier * (int) $size;
				// round to whole pixels.
				$font_size = round( $font_size );
				// Minimum font size, for sanity.
				$font_size = max( $font_size, $this->min_font_size );
				// Maximum font size, for sanity.
				$font_size = min( $font_size, $this->max_font_size );


				$new_styles[] = "--tec-font-size-{$key}: {$font_size}px;";
			}
		}

		// Event Title overrides.
		if ( $this->should_include_setting_css( 'event_title_color' ) ) {
			$title_color  = $this->get_option( 'event_title_color' );
			$new_styles[] = "--tec-color-text-events-title: {$title_color};";
			$new_styles[] = "--tec-color-text-event-title: {$title_color};";
		}

		// Event Date/Time overrides.
		if ( $this->should_include_setting_css( 'event_date_time_color' ) ) {
			$date_color   = $this->get_option( 'event_date_time_color' );
			$new_styles[] = "--tec-color-text-event-date: {$date_color};";
			$new_styles[] = "--tec-color-text-event-date-secondary: {$date_color};";
		}

		// Link color overrides.
		if ( $this->should_include_setting_css( 'link_color' ) ) {
			$link_color     = $this->get_option( 'link_color' );
			$link_color_rgb = $this->get_rgb_color( 'link_color' );
		} elseif ( $this->should_include_setting_css( 'accent_color' ) )  {
			$link_color     = $this->get_option( 'accent_color' );
			$link_color_rgb = $this->get_rgb_color( 'accent_color' );
		}

		if ( ! empty( $link_color ) ) {
			$new_styles[] = "--tec-color-link-primary: {$link_color};";
			$new_styles[] = "--tec-color-link-accent: {$link_color};";
			$new_styles[] = "--tec-color-link-accent-hover: rgba({$link_color_rgb}, 0.8);";
		}

		// Background color overrides.
		if ( $this->should_include_setting_css( 'background_color_choice' ) ) {
			if ( $this->should_include_setting_css( 'background_color' ) ) {
				$background_color = $this->get_option( 'background_color' );
				$new_styles[]     = "--tec-color-background-events: {$background_color};";
			}
		}

		// Accent color overrides.
		if ( $this->should_include_setting_css( 'accent_color' ) ) {
			$accent_color     = $this->get_option( 'accent_color' );
			$accent_color_rgb = $this->get_rgb_color( 'accent_color' );

			$new_styles[] = "--tec-color-accent-primary: {$accent_color};";
			$new_styles[] = "--tec-color-accent-primary-hover: rgba({$accent_color_rgb},0.8);";
			$new_styles[] = "--tec-color-accent-primary-multiday: rgba({$accent_color_rgb},0.24);";
			$new_styles[] = "--tec-color-accent-primary-multiday-hover: rgba({$accent_color_rgb},0.34);";
			$new_styles[] = "--tec-color-accent-primary-active: rgba({$accent_color_rgb},0.9);";
			$new_styles[] = "--tec-color-accent-primary-background: rgba({$accent_color_rgb},0.07);";
			$new_styles[] = "--tec-color-background-secondary-datepicker: rgba({$accent_color_rgb},0.5);";
			$new_styles[] = "--tec-color-accent-primary-background-datepicker: {$accent_color};";
			$new_styles[] = "--tec-color-button-primary: {$accent_color};";
			$new_styles[] = "--tec-color-button-primary-hover: rgba({$accent_color_rgb},0.8);";
			$new_styles[] = "--tec-color-button-primary-active: rgba({$accent_color_rgb},0.9);";
			$new_styles[] = "--tec-color-button-primary-background: rgba({$accent_color_rgb},0.07);";
			$new_styles[] = "--tec-color-day-marker-current-month: {$accent_color};";
			$new_styles[] = "--tec-color-day-marker-current-month-hover: rgba({$accent_color_rgb},0.8);";
			$new_styles[] = "--tec-color-day-marker-current-month-active: rgba({$accent_color_rgb},0.9);";

			if ( ! $this->should_include_setting_css( 'multiday_event_bar_color_choice', 'month_view' ) ) {
				$new_styles[] = "--tec-color-background-primary-multiday: rgba({$accent_color_rgb}, 0.24);";
				$new_styles[] = "--tec-color-background-primary-multiday-hover: rgba({$accent_color_rgb}, 0.34);";
				$new_styles[] = "--tec-color-background-primary-multiday-active: rgba({$accent_color_rgb}, 0.34);";
				$new_styles[] = "--tec-color-background-secondary-multiday: rgba({$accent_color_rgb}, 0.24);";
				$new_styles[] = "--tec-color-background-secondary-multiday-hover: rgba({$accent_color_rgb}, 0.34);";
			}
		}

		if ( empty( $new_styles ) ) {
			return $css_template;
		}

		$new_css = sprintf(
			':root {
				/* Customizer-added Global Event styles */
				%1$s
			}',
			implode( "\n", $new_styles )
		);

		return $css_template . $new_css;
	}

Top ↑

Changelog

Changelog
Version Description
5.3.1 Introduced.