Customizer::filter_accent_color_css( string $template )

Handle accent color customizations for Pro.


Parameters #

$template

(string) (Required) The original CSS template.


Top ↑

Return #

(string) $template The resulting CSS template.


Top ↑

Source #

File: src/Tribe/Service_Providers/Customizer.php

	public function filter_accent_color_css( $template ) {
		$customizer              = Tribe__Customizer::instance();
		$global_elements_section = tribe( 'tec.customizer.global-elements' );
		$settings                = $customizer->get_option( [ $global_elements_section->ID ] );

		if  ( $customizer->has_option( $global_elements_section->ID, 'accent_color' ) ) {
			$accent_color     = new Tribe__Utils__Color( $settings['accent_color'] );
			$accent_color_rgb = $accent_color::hexToRgb( $settings['accent_color'] );
			$accent_css_rgb   = $accent_color_rgb['R'] . ',' . $accent_color_rgb['G'] . ',' . $accent_color_rgb['B'];

			// Pro styles.
			$template .= '
				.tribe-events-pro .tribe-events-pro-week-grid__header-column--current .tribe-events-pro-week-grid__header-column-daynum,
				.tribe-events-pro .tribe-events-pro-week-grid__header-column--current .tribe-events-pro-week-grid__header-column-daynum-link {
					color: <%= global_elements.accent_color %>;
				}
			';

			$template .= '
				.tribe-events-pro.tribe-events-view--week .datepicker .day.current::before {
					background: <%= global_elements.accent_color %>;
				}
			';

			$template .= '
				.tribe-events-pro.tribe-events-view--week .datepicker .active .day,
				.tribe-events-pro.tribe-events-view--week .datepicker .active .day:hover {
					background: rgba( ' . $accent_css_rgb . ', 0.07);
				}
			';

			$template .= '
				.tribe-events-pro .tribe-events-pro-week-grid__event-link-inner {
					background: rgba( ' . $accent_css_rgb . ', 0.1);
				}
			';

			$template .= '
				.tribe-events-pro .tribe-events-pro-week-grid__event-link:hover .tribe-events-pro-week-grid__event-link-inner,
				.tribe-events-pro .tribe-events-pro-week-grid__event-link:focus .tribe-events-pro-week-grid__event-link-inner {
					background: rgba( ' . $accent_css_rgb . ', 0.2);
				}
			';

			$template .= '
				.tribe-events-pro .tribe-events-pro-week-grid__multiday-event-bar-inner {
					background-color: rgba( ' . $accent_css_rgb . ', 0.24);
				}
			';

			$template .= '
				.tribe-events-pro .tribe-events-pro-week-grid__multiday-event-bar-inner--hover,
				.tribe-events-pro .tribe-events-pro-week-grid__multiday-event-bar-inner:hover,
				.tribe-events-pro .tribe-events-pro-week-grid__multiday-event-bar-inner:focus {
					background-color: rgba( ' . $accent_css_rgb . ', 0.54);
				}
			';

			$template .= '
				.tribe-events-pro .tribe-events-pro-week-day-selector__events-icon {
					background-color: <%= global_elements.accent_color %>;
				}
			';

			$template .= '
				.tribe-events-pro .tribe-events-pro-map__event-card-wrapper--active .tribe-events-pro-map__event-card-button,
				.tribe-events-pro .tribe-events-pro-week-day-selector__day--active {
					border-color: <%= global_elements.accent_color %>;
				}
			';
		}

		return $template;
	}

Top ↑

Changelog #

Changelog
Version Description
5.0.1 Introduced.