Datepicker calendar background transparent

Hey @gigibarrel!

By default these are set to transparent and white for the broadest compatibility with themes. Your theme is overrding the background colors but don’t fret – you can adjust both of these in the Customizer. Or via custom CSS:

Calendar background color: (Admin->Customizer->The Events Calendar->Global Elements)
https://d.pr/i/nLTOCc

The search bar: (Admin->Customizer->The Events Calendar->Events Bar)
https://d.pr/i/2S9OhT

Cheers,
Stephen

Hi Stephen,
Thank you for getting back to me.

Unfortunately I have already tried that, cleared the local cache and purged the server cache, however it doesn’t work and the calendar keeps coming up transparent.

Also, The search bar unfortunately does not look good on the mobile version (please have a look at the screenshot attached). The “find events” button actually appears on top of the first event listed.

Is there a way to fix these issues, even using css?

Search Bar on Mobile (https://www.dropbox.com/s/zmiqfpndzvarvop/IMG_545414EE68D4-1.jpeg?dl=0)

Calendar Background set up (https://www.dropbox.com/s/d9p3436kqbcaxhl/Screen%20Shot%202022-10-04%20at%2011.50.12%20pm.png?dl=0)

Regards,
Luigi

OK, the issue with the datepicker is different (and I misunderstood, apologies)

You need some custom CSS for this as your theme styles are adding a z-index to all header elements: https://d.pr/i/FL9zPo

try:

.tribe-events-calendar-list__event-header {
  z-index: inherit;
}

That should fix your issues with the search dropdown too – it’ll cover the first event while open, but it will look much better: https://d.pr/i/mlXcoi

Thanks Stephen, that worked perfectly.

Thanks a lot for your assistance.

Hi Team,

I’ve noticed the date picker does not work on mobile.

When a date is picked, it does not update.

Could you please let me know what is the issue and how to fix it?