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. |