Event titles disappear after changing filter options

[kosovichmedia]

For some reason the event titles seem to disappear after I adjust filter options. The titles for the events appear when I refresh the whole browser, but when I adjust only the filter options the results refresh without showing the event titles.
Is there a way of fixing this?

[Brook]

Howdy kosovichmedia,

I am not seeing this in the stock environment. To be clear, are you referring to the page title (that says something like Upcoming Events or Month View) or the event title, that is unique to each event? Can you give me a link to the site so I can see this in action?

I would assume that another plugin or theme is probably causing this issue. Are you running the underscores theme, or a variant of it, perchance?

Can you try the stock 2014 theme and see if that fixes it? If not, could you also try disabling plugins other than Tribe ones? Eventually disabling one of these will likely cause it to stop happening. If you make a note of which one, please let us know which plugin or theme conflicted. Thanks for posting!

– Brook

[kosovichmedia]

This reply is private.

[kosovichmedia]

This reply is private.

[kosovichmedia]

This reply is private.

[Brook]

Howdy again Chris,

So that is not the normal behavior. Thank you for sharing a link. In the default 2014 theme selecting a filter does not remove the heading like it does on your site.

It appears that the following CSS rule is hiding the heading for some reason:
h1, h2, h3, #main h4, #intro h4, .logo a, #header+#intro .intro_title, #header+#intro .teaser, #slider_module+#intro h3, #outro, #outro a, .toggle a, .toggle_accordion a, #content .teaser {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

You would want to override that CSS so that it stop hiding the heading by setting its opacity to 0. Does that make sense?

– Brook

[kosovichmedia]

It sounds like you were about to sort things out and as a follow up question, when you talk about doing an override on that CSS, is there a block of code you could suggest that I past somewhere to override? Should I copy the code you have listed above and past it into the functions.php file on the child theme I am using? Any suggestions you can provide will be helpful.
Thank you again!
Chris

[Brook]

For sure Chris!

So, it looks like your theme is running cufon to render fonts. Unfortunately that library conflicts with things pretty easily since it does not rely on standards like web fonts, though it does have some nice features it just isn’t the nicest kid in the playground and might mucks odds things up.

Your theme likely has a spot for adding custom CSS. If so you could add the following CSS rule to fix the hidden title:

#tribe-events-content .tribe-events-page-title {
opacity: 1;
}

But, when you do you will notice that while the title is no longer invisible it renders in the wrong font. That’s no good! That’s because of cufon. While you can probably get cufon to work for you here, it will require a fair amount of JavaScript knowledge. If you do not know JS very intimately yourself, then you might need to hire a developer to get everything working 100%. Like I said, cufon is cool so you can see why your theme chose it, but it just causes weird problems like this. 🙁

Did that help?

– Brook

[kosovichmedia]

Thank you for the additional clarification. I did plug the code you suggested into the Custom CSS for the theme and it did change the heading of the main listing of “Upcoming Events” to a different font.

I did notice however that the specific title of the first meeting in the listing of “Upcoming Events” still disappears though.

Is this because the code you supplied “#tribe-events-content .tribe-events-page-title” refers only to the page title and not the title of the events that are generated? I am having a hard time finding the code that refers to the title of each event in the listing. Can you share the code that would also fix the titles of the events on the page?

This would help me further confirm the problem and at least enable me to get consistent content showing in the right places.

[kosovichmedia]

Here is a question that you might be able to help me with to work around this problem.

I am not necessarily tied to this particular font for the titles within the Tribe Events system and while the title and headers are disappearing, there are other fonts that are not disappearing at all.

Is it possible to simply modify the Tribe Events code in some way so that some standard web font replaces the Cufon for those elements.

For example, the date and address/location of the events are all showing correctly. Couldn’t we simply modify the Tribe Events code so the titles appear in a similar font?

Chris

[Brook]

Howdy again Chris,

Unfortunately it is not really Tribe code that is causing this. We are just using standard WordPress headings. Your theme is then detecting those headings and injecting it’s own custom font. You would need to modify the theme to get it to work how you desire.

As you further test the site, you might find tons of areas where fonts are disappearing when loaded via ajax. If you are familiar with CSS and your browser’s console, then simply inspect the elements that has disappeared and view what styles are currently applied to it. Likely one of them will be giving it an opacity of 0, or otherwise hiding the element. If it is an opacity of 0, then just craft very specific CSS rule that will give that elements its opacity back, or otherwise display it again.

If you are not familiar with CSS, a hackish way to fix this problem sitewide would be the following:

h1, h2, h3, #main h4, #intro h4, .logo a, #header+#intro .intro_title, #header+#intro .teaser, #slider_module+#intro h3, #outro, #outro a, .toggle a, .toggle_accordion a, #content .teaser {
opacity: 1 !important;
}

Does that make sense? Please let me know. Thanks!

– Brook

[kosovichmedia]

It appears the only place there is any use of ajax is in relation to the Tribe Events. The hackish way you suggested appears to work, but it does appear to show just some default font which isn’t as aesthetically pleasing as the original. I know the theme has a CSS file but does the Tribe Event system also have a CSS file too? I was thinking I could modify the Tribe Event to simply call the “H2.tribe-events-list-event-title.summary” something different or write in a specific font to use like Arial or something that looks similar to the rest of the Event information summary that is displayed? Am I on the right track?

I appreciate your help.

Chris

[Brook]

You could certainly try it. I think with how your theme is designed you will not be successful, but I might be wrong there. It is worth a shot.

You can refer to this guide for styling Tribe Events. Specifically the ‘Adding Custom Styles’. As noted there, the best way to do this sort of change when you just have a handful of events is to simply add your own custom CSS file and overried the defaults, as I was walking you through above. But, if you want to go about it the other way feel free to. The guide provides great guidance for those who know CSS. It sounds like you must since you are planning to make these changes yourself.

I hope that sets you off in the right direction. Thank you for posting. If you need another guide or anything let me know. Thanks!

– Brook

[Author]

Posts