TEC > Classic looks for Category Colors

category-color-picker.php

<?php
/**
 * View: Top Bar - Category Color Picker
 *
 * Place this template in your own theme by creating a file at:
 * wp-content/themes/[your-theme]/tribe/events/v2/components/top-bar/category-color-picker.php
 *
 * This is a template override for the following file:
 * the-events-calendar/src/views/v2/components/top-bar/category-color-picker.php
 *
 * Notes: The only change is on line 61 of this file.
 *        Add the CSS customizations below into Customizer or into your child-themes style.css file.
 *
 * See more documentation about our views templating system.
 *
 * @link http://evnt.is/1aiy
 *
 * @version 6.14.0
 *
 * @var string  $category_colors_enabled           Whether the category colors view should display.
 * @var array[] $category_colors_category_dropdown Array of categories with metadata.
 *                                                 Each category contains:
 *                                                 - 'slug' (string)      Category slug.
 *                                                 - 'name' (string)      Category name.
 *                                                 - 'priority' (int)     Priority for sorting.
 *                                                 - 'primary' (string)   Primary color in hex format.
 *                                                 - 'hidden' (bool)      Whether the category is hidden.
 *
 * @var bool    $category_colors_super_power       Whether the super power mode is enabled.
 * @var bool    $category_colors_show_reset_button Whether to show the reset button.
 */

if ( empty( $category_colors_enabled ) ) {
	return;
}

// Get the base URL for category links.
$base_url      = home_url( '/' );
$events_slug   = tribe_get_option( 'eventsSlug', 'events' );
$category_slug = Tribe__Events__Main::instance()->get_category_slug();
/* Custom code start */
$taxomony_slug = Tribe__Events__Main::instance()->get_event_taxonomy();
/* Custom code end */
?>
<div class="tec-events-category-color-filter"
	role="button"
	tabindex="0"
	aria-haspopup="listbox"
	aria-expanded="false"
	aria-label="<?php esc_attr_e( 'Select categories to highlight', 'the-events-calendar' ); ?>">

	<div class="tec-events-category-color-filter__colors" id="tec-category-color-legend"></div>

	<span class="tec-events-category-color-filter__dropdown-icon">
		<?php $this->template( 'components/icons/caret-down', [ 'classes' => [ 'tec-events-category-color-filter__dropdown-icon-svg' ] ] ); ?>
	</span>
	<div class="tec-events-category-color-filter__dropdown" role="listbox" aria-label="<?php esc_attr_e( 'Category selection', 'the-events-calendar' ); ?>">
		<div class="tec-events-category-color-filter__dropdown-header">
			<span><?php echo $category_colors_super_power ? esc_html__( 'Highlight a category', 'the-events-calendar' ) : esc_html__( 'Browse by category', 'the-events-calendar' ); ?></span>
			<button class="tec-events-category-color-filter__dropdown-close" aria-label="<?php esc_attr_e( 'Close category selection', 'the-events-calendar' ); ?>">✕</button>
		</div>
		<ul class="tec-events-category-color-filter__dropdown-list">
			<?php foreach ( $category_colors_category_dropdown as $category ) : ?>
			<?php /* Changed line */ ?>
				<li class="tec-events-category-color-filter__dropdown-item <?php echo esc_attr( $taxomony_slug . '-' . $category['slug'] ); ?>" role="option">
					<label data-category="<?php echo esc_attr( $category['slug'] ); ?>" >
						<?php if ( $category_colors_super_power ) : ?>
							<input type="checkbox"
								class="tec-events-category-color-filter__checkbox"
								aria-label="
								<?php
								echo /* translators: %s is the category name. */
								esc_attr( sprintf( __( 'Highlight events in %s', 'the-events-calendar' ), $category['name'] ) );
								?>
">
							<span class="tec-events-category-color-filter__label"><?php echo esc_html( $category['name'] ); ?></span>
						<?php else : ?>
							<?php
							// Build the category URL dynamically and escape it.
							$category_url = esc_url( $base_url . $events_slug . '/' . $category_slug . '/' . $category['slug'] . '/' );
							?>
							<a href="<?php echo esc_url( $category_url ); ?>"
								<?php
								tec_classes(
									[
										'tec-events-category-color-filter__label',
										'tec-events-category-color-filter__color-circle',
										'tribe_events_cat-' . $category['slug'],
									]
								);
								?>
								aria-label="<?php /* translators: %s is the category name. */ echo esc_attr( sprintf( __( 'View events in %s', 'the-events-calendar' ), $category['name'] ) ); ?>">
								<?php echo esc_html( $category['name'] ); ?>
							</a>
						<?php endif; ?>
						<span
							<?php
							tec_classes(
								[
									'tec-events-category-color-filter__color-dot',
									'tribe_events_cat-' . $category['slug'],
								]
							);
							?>
						></span>
					</label>
				</li>
			<?php endforeach; ?>
		</ul>

		<?php if ( $category_colors_super_power && $category_colors_show_reset_button ) : ?>
			<div class="tec-events-category-color-filter__reset-wrapper">
				<button type="button" class="tec-events-category-color-filter__reset tribe-common-c-btn-border-small"
					aria-label="<?php esc_attr_e( 'Reset category selection', 'the-events-calendar' ); ?>">
					<?php esc_html_e( 'Reset', 'the-events-calendar' ); ?>
				</button>
			</div>
		<?php endif; ?>
	</div>
</div>

style.css

/* Make full width */
.tec-events-category-color-filter {
	width: 100%;
}
/* Hide icon and header */
.tec-events-category-color-filter__dropdown-icon,
.tec-events-category-color-filter__dropdown-header {
	display: none;
}
.tec-events-category-color-filter__checkbox {
	display: none;
}
.tec-events-category-color-filter__dropdown-list {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.tec-events-category-color-filter__dropdown-list .tec-events-category-color-filter__dropdown-item {
	margin: 0 0.5em !important;
}
.tec-events-category-color-filter__dropdown-item .tec-events-category-color-filter__label {
	padding: 5px 0.8em;
	border-top: 1px solid lightgrey;
	border-right: 1px solid lightgrey;
	border-bottom: 1px solid lightgrey;
	border-left: 5px solid var(--tec-color-category-primary);
	background-color: var(--tec-color-category-secondary);
}
.tec-events-category-color-filter__dropdown-item label:has(input:checked) .tec-events-category-color-filter__label {
	border-top: 2px solid var(--tec-color-category-primary);
	border-right: 2px solid var(--tec-color-category-primary);
	border-bottom: 2px solid var(--tec-color-category-primary);
}