Global_Elements::get_css_template( string $css_template )
Filters the Global Elements section CSS template to add Views v2 related style templates to it.
Contents
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.
Return
(string) The filtered CSS template.
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; }
Changelog
Version | Description |
---|---|
5.3.1 | Introduced. |