Make background of events list transparent?

[Emily Holton]

In my child theme, I’m having trouble with the filter bar on mobile. It’s disappearing behind what looks like a white box. From what I can see, there is a background color of white set on the .tribe-filters-open #tribe_events_filters_wrapper, .tribe-filters-open #tribe_events_filters_wrapper.tribe-events-filters-horizontal, .tribe-filters-open #tribe_events_filters_wrapper.tribe-events-filters-vertical class, and it’s causing the problem when below the 767px media size.

So I think the background color is overlapping the filter rather than sitting behind it. Is there a way to set the background to transparent?

I’m also noticing on desktop that the filter defaults to closed, even though I have it set to open. Not sure if this is related…

To add to the confusion I have my site hidden behind a “coming soon” page, but if you’d like to take a look as an admin I’m happy to give you a login.

Thank you!!!

[Cliff]

Hi. Sorry you’re experiencing this.

There might be some new updates available. Could you please make sure all your Modern Tribe plugins (and WordPress core) are at their latest versions?

• Downloads / Version Numbers
• TEC Automatic Updates
• or TEC Manual Updates
• WordPress core updates

Once you verify you’re on the latest versions, please test to see if the issue is still happening for you.

If it is, please follow our Testing for Conflicts Guide (basically switch to TwentySixteen theme and deactivate all plugins and custom code other than Modern Tribe plugins) and see if that helps narrow down the cause of this.

If it doesn’t, please enable WP_DEBUG and WP_DEBUG_LOG and share any PHP errors you see while changing tickets quantity, navigating your site’s home page, events page, single-event pages, and any other of your site’s pages relevant to this ticket.

Then, please share your System Information (while in Testing for Conflicts mode).

You might also see if you can spot any console errors at your site. (If needed, you may reference our KB article Using Google Chrome Developer Tools.)

Let us know what you find out. If still not working and a login is required to view your calendar, please do share that information in a Private reply.

Thanks.

[Emily Holton]

This reply is private.

[Cliff]

This reply is private.

[Emily Holton]

This reply is private.

[Cliff]

Thanks. Does adding this CSS fix the issue for you?

body.post-type-archive-tribe_events .tribe-bar-disabled {
z-index: 3;
}

The z-index is 4 so setting it to a lower number (3 or smaller) did the trick for me. Let me know.

[Emily Holton]

Thank you for such a quick reply!!
I tried your code my style.css with z-index at 3, then tried the z-index at 1, and both times I got the same white space when I tried to open the filters (although there were two differences: the “reset filters” link did appear in list view, but the date/view picker disappeared). Sorry 🙁
Any other ideas?

[Cliff]

I’m not sure why you’re experiencing this, but maybe you could add !important to the end of your z-index rule?

[Emily Holton]

I’m sorry, adding !important still doesn’t help. 🙁 (Just to confirm, I’m pasting that code into my style.css page, right?)

I switched the theme back to twenty sixteen, just for kicks. I took a look on my phone (nothing to do with AppPresser, just the regular site while signed in as admin), and the filter bar is wonky when I open it in regular mobile view too. When the filter bar is open, the date/view picker hovers over and conceals one of the filter buttons, and all that appears below is a long white space below the filter. See attached screen shot.

So it’s definitely an Events Calendar problem, not an AppPresser problem. Feel free to login and look for yourself… let me know what you think!

[Cliff]

You can add custom CSS code via your child theme’s style.css file or via a plugin like Simple Custom CSS or, my favorite, Jetpack. Jetpack supports regular CSS and the LESS and Sass pre-processors.

If you’re not a CSS expert, Jetpack’s Custom Design reference may prove helpful.

Note that you’ll quite possibly also need to clear your website’s cache and your browser’s cache to see such changes.

 

Let’s try this though: remove the CSS I provided to you before and see if switching styles at wp-admin > Events > Settings > Display

Does Skeleton, Full, or Tribe Events make things work (Tribe Bar gets hidden as it should) or not work (Tribe Bar stays on top of things and in the way, like it shouldn’t)?

[Emily Holton]

Thank you! I’ve been updating my child theme style.css sheet, seems to be working as it should.

I removed your code and tried skeleton and full style (I was in Tribe style originally). Full style was not an improvement. Skeleton style made the tribe bar disappear when I opened the filter. With both styles, I still have the same problem in AppPresser preview – no filter appears, just the big white space – no improvement.

I’m noticing that when I open the filter bar in mobile, the events page disappears below (only white space), until I press submit. That doesn’t happen in AppPresser – the event page remains below when I open the filter (it’s just partially concealed by a white box). Does that mean that when I open the filter in mobile view, there is something covering the events page that just isn’t functioning properly in AppPresser? Is there a way to stop it from trying to cover up the events page, and just make the filters sit at the top of the page above everything? I hope that makes sense…

[Emily Holton]

… or is there a way to make that white space transparent so it stops covering up the page (and possibly the filter bar)?

[Cliff]

Do you want BOTH the Tribe Bar and Filter Bar? If not you could just disable Tribe Bar at wp-admin > Events > Settings > Display tab > Disable the Event Search Bar option

If you do want BOTH, then there might be an issue with the JavaScript for some reason not targeting it as it should (or maybe the CSS just isn’t taking effect for some reason).

Let’s try adding this CSS:

body.post-type-archive-tribe_events .tribe-bar-disabled { display: none !important; } (only use the !important if it doesn’t work without it)

[Emily Holton]

Bless you Cliff, thank you so much for all these options… unfortunately that didn’t work either, with or without the “!important”. It did hide the view/date picker (I already had the tribe bar disabled) but the filter bar still disappears when I open it, and only a big white space is there. 🙁

• This reply was modified 7 years, 8 months ago by Emily Holton.

[Emily Holton]

Hi again. If you have other ideas I would love to hear them. But if not, would it be possible for me to completely hide the filter bar altogether? I have custom searches built into my menu, so I can live without it. I do need it to keep functioning behind the scenes (so my menu links work), but I am ok with hiding it from view. Let me know. Maybe that’s the easiest answer. 🙂

[Author]

Posts