{"id":1966215,"date":"2025-08-26T08:28:57","date_gmt":"2025-08-26T12:28:57","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?p=1966215"},"modified":"2025-08-26T08:28:58","modified_gmt":"2025-08-26T12:28:58","slug":"category-colors-legacy-layout","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/category-colors-legacy-layout\/","title":{"rendered":"Enabling the legacy Category Colors layout following its integration into TEC"},"content":{"rendered":"\n

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

Please follow the steps below to enable this layout:<\/p>\n\n\n\n

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

    If your site has caching enabled, you should see the legacy Category Colors<\/strong> layout after clearing the cache.<\/p>\n\n\n\n

    \ud83d\udc4b The CSS in the customizer may not be applicable to certain themes, such as Divi. So it is best to use other methods:<\/p>\n\n\n\n

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

      This change applies to calendar shortcodes as well as the main calendar page.<\/p>\n\n\n\n

      Version 6.14.2 of The Events Calendar was used to test this code.<\/p>\n\n\n\n


      Review following guides on customizing The Events Calendar:<\/p>\n\n\n\n