Customizer Settings #
Almost all the elements from the Events pages are editable from Customizer > The Events Calendar (List, Month and Day views and also Single Events).
If you are not 100% sure about what elements will be edited with each color setting, it is a good idea to change all colors to black, and change one setting to Orange, so it’s easy to identify the affected elements. Once you identify what elements are affected by that setting, change the orange to black and move to the next setting to make it orange… repeat with each setting as needed.
Elementor Settings #
The only element that is not configurable from the Customizer is the datepicker button, it is editable from Elementor’s Site Settings > Buttons.
Important: You can change the hover text color of the datepicker button, but not the default color because it is hardcoded in the stylesheet of The Events Calendar to –tec-color-text-primary (#141827). If you want to edit that color use the following CSS selector: .tribe-common .tribe-events-c-top-bar__datepicker-button For example, if you want to change the text color to the Primary Color (of Elementor Settings) use the following CSS code:
.tribe-common .tribe-events-c-top-bar__datepicker-button{
color: var(--e-global-color-primary);
}
The background of the datepicker is totally editable from the Elementor’s Site Settings and doesn’t need custom CSS.
TIP! #
Use The Events Calendar Category Colors plugin to customize the color of each event category.
