Next/Previous Month code snippet not working in functions.php

[Chris]

I am trying to add next and previous month buttons to a site’s calendar, and I followed the instructions in this KB:
https://theeventscalendar.com/knowledgebase/add-nextprevious-links/

A couple of notes:
1. I have both past and future events, so according to Events Cal documentation, the next and previous buttons *should* be showing anyway.
2. I was able to edit the functions.php file in a different site, and it is working correctly. In the current site, editing the functions.php file with the code snippet returns a 500 error. The only difference that I can see is the working site is using Salient theme, while the non-working site is using Avada.

[Chris]

I switched to the Twenty Sixteen theme, and the next and previous month buttons appeared like they should. It looks like this is an issue with Avada, and I noticed that all of the next/previous buttons are missing on the List, Month, and Week views. Is there a known issue as to why Avada might be suppressing the buttons, or a conflict with Events Cal Pro?

[Mathew]

Chris,

It’s not a conflict. Avada has intentionally moved the navigation from the top to the bottom. It’s their design choice. You can see it on their demo site.

You can override their styling choice by adding CSS either directly within the theme or in the Avada Child Theme style.css file, provided that you are using the child theme. Either way, here’s the code.


/* Adds header back to Avada */
#tribe-events-content #tribe-events-header {
display: inherit;
margin-bottom: .5em;
}


Please understand that when a theme author highly modifies the overall look and feel of a plugin such as The Events Calendar, you may need to reach out to their support for design changes.

As you mentioned above, switching to TwentySixteen things appear as they should. This is a great way to determine if the issue is related to Avavda or The Events Calendar plugin or any other plugin for that matter.

Hope this helps.

[Chris]

That makes sense, unfortunately, this site doesn’t have any navigation, top or bottom. What’s causing the buttons not to appear at all?

https://fbcferguson.org/events/month/

[Mathew]

Chris,

Truly as strange one.

Avada is hiding the footer too. I cannot find where in Avada they have that controlled via their settings.

The attached images shows where it’s coming from. However the Avada “Dynamic CSS & JS” settings are compressing the CSS files so it’s hard to determine exactly where it’s coming from within Avada. Unless you turn of the compression for testing purposes.

The only other place it could be coming from is CSS placed in the “Custom CSS” settings within Avada.

Once again, you can add additional CSS as follows to override their customization as follows:


#tribe-events-footer {
display: inherit !important;
}


It would be nice to know where and how Avada is hiding the footer. For that you would have to open a ticket with their support.

Hope this helps.

[Andras]

Hi Chris,

Thanks for reaching out!

Hi Mathew, thanks for chiming in here and being super helpful! It doesn’t go unnoticed. 😉

Chris,

In my experience if you use minification on calendar assets (mostly js, sometimes css), then things tend to break somehow. If you are using any minification or caching, I would recommend clearing the cache and turning it off to test if it has an effect.

I’m not fully familiar with Avada, they might have a setting for hiding the navigation / header / footer for the calendar.

Let us know what you find.

Cheers,
Andras

[Chris]

When I looked at the Custom CSS in Avada, I found this:

div.tribe-events-schedule.updated.published.tribe-clearfix h3 {
font-size: 30px;
}#tribe-events-footer {
display: none;
}

I didn’t add that, but when I changed it from display: none to the code Matthew sent, it fixed the problem. I’m a little concerned that the code was already in the CSS. I may have to reach out to Avada to see what could have caused that. I have other sites running Avada that don’t have that code in the CSS. Thanks for the help!

[Chris]

I had to make some additional modifications to the css, because even though I was able to get the navigation buttons back on the bottom, the code was still suppressing the navigation links above the calendar. Here’s what my css code looks like now, which works:

div.tribe-events-schedule.updated.published.tribe-clearfix h3 {
    font-size: 30px;
}

/* Adds header back to Avada */
#tribe-events-content #tribe-events-header {
    display: inherit;
    margin-bottom: .5em;
}

[Mathew]

Chris,

Glad to hear you’ve got things worked out.

You mentioned that there were some entries in the Custom CSS that you didn’t put there. It’s entirely possible that it came from a demo content import when the site was set up.

If that’s not the case, then it probably woudn’t hurt to confirm with Avada where the Custom CSS came from. Either way at least you found the source of the issue.

[Andras]

Happy to see this is on the right track!

Chris, looking forward to hear what you find, or if you need any further help.

Cheers,
Andras

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts