As part of integrating Category Colors into The Events Calendar, the original legend layout was removed. But don’t worry, you can still bring it back with some simple custom tweaks.

Please follow the steps below to enable this layout:

  1. Connect to your host files using an FTP connection or your hosting panel.
  2. Copy the file category-color-picker.php  from wp-content/plugins/the-events-calendar/src/views/v2/components/top-bar
  3. Put the file under wp-content/themes/[your-theme]/tribe/events/v2/components/top-bar/
  4. Open the file in the text editor and replace the code with the first one provided here.
  5. Enable Custom CSS option under Events > Settings > Display > Category Colors.
  6. Then go to Appearance > Customize > Additional CSS and add the CSS code that was given on the same page:

If your site has caching enabled, you should see the legacy Category Colors layout after clearing the cache.

👋 The CSS in the customizer may not be applicable to certain themes, such as Divi. So it is best to use other methods:

  1. A third-party plugin that lets you add CSS, e.g., Code Snippets.
  2. The theme’s style.css file, preferably the child theme.
  3. If the theme has a specific option to add custom CSS, e.g., Divi > Theme Options > Custom CSS.

This change applies to calendar shortcodes as well as the main calendar page.

Version 6.14.2 of The Events Calendar was used to test this code.


Review following guides on customizing The Events Calendar:

TAGS:
Notify us of out of date information