Datepicker calendar background transparent

Resolved gigibarrel
(@gigibarrel)

2 years, 5 months ago

Hi,

Im having trouble with the plugin.

When clicking on the date under the search bar, the calendar appears to have a transparent background which makes it look messy.

Also, the search bar on a mobile overlaps the events and looks very messy.

How can these two issues be fixed?

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author Stephen Page
(@camwynsp)

2 years, 5 months ago

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

Thread Starter gigibarrel
(@gigibarrel)

2 years, 5 months ago

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
Plugin Author Stephen Page
(@camwynsp)

2 years, 5 months ago
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
Thread Starter gigibarrel
(@gigibarrel)

2 years, 5 months ago

Thanks Stephen, that worked perfectly.

Thanks a lot for your assistance.

Thread Starter gigibarrel
(@gigibarrel)

2 years, 5 months ago

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?

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Datepicker calendar background transparent’ is closed to new replies.

Tags