Events Calendar 3.0 Not Working with Theme

[Cynthia Lockley]

I will start an individual thread but it seems to me that we are all having the same problem–the sidebar gets pushed down in the page template. I am using the default theme of Twenty Eleven. I can modify code and styles but if something is missing in the Events Calendar that is causing a conflict with the page template, it would help to know that or to know if the calendar view was designed to be wider than a page with a sidebar. It seems either there is a missing somewhere, or the calendar view was not designed to work in a standard page with a sidebar.

[tabitagreen]

Hi, here is the response from StudioPress: “There is a problem with a mismatch in the output from the plugin. Please check with the plugin author for help with this.”

Could you provide further guidance?

[Marcus]

This is what happened to me as well(with sidebar getting pushed to the bottom). I temporarily removed sidebar from the page, and altered the CSS to make the calendar fit but it displaced my footer as well. Having a ton of issues…..

[Jonah]

Hi all,

The problem is when using your theme’s page template, typically this will include the sidebar. If you use the Default Events Template, it will (should) not display a sidebar anywhere on your event pages. The problem with the Default Events Template is that it will not include much of your theme’s markup for styling and CSS if at all. So, if you use the Default Events Template, you will need to adjust things a bit more, adding markup to the default-template.php file to be more in line with your theme’s styling. You can make changes to the template by making a copy of /wp-content/plugins/the-events-calendar/views/default-template.php and placing in an ‘tribe-events’ folder in your theme. The difficulty from our perspective with this is it’s different with each theme – each theme uses different markup and CSS, so there’s no easy global solution.

You can also use the Default Page Template or another page template option, but with these as well, you will likely need to make some changes to either your theme’s page.php (the Default Page Template) or other page template depending on what you select. This has been a difficulty with our plugin all along, and while 3.0 may have changed some things (markup and CSS) with the structure that contributed to some of the problems here, the issue is the same and always has been something people need to work with the code to get working right with their theme.

We did our best to retain backwards compatibility with everything to prevent things like this from happening, while adding all the new features and code optimizations, but unfortunately as you’ve all seen, this didn’t apply to everyone.

With this being more of a theme compatibility issue, and everyone’s theme being different and needing different customization to work fully with our plugin, it’s not possible for us to help each one of you out to get this working. We can really only offer general guidelines of what you need to do and we have for this issue many times in the past.

As owners of your website, you are ultimately responsible for integration and styling. With an upgrade as big as this was (or really any upgrade for that matter; to be safe and follow best practices), you all should have installed this in a test environment first to make sure everything was working the way you needed it to be before pushing this to a live site.

So, to summarize the issue and solution needed:

Currently there is only one template option available within our plugin in the Events > Settings > Display screen. Based upon that option you will need to do some additional work to get the layout the way you want on any given page with a mixture of PHP, HTML and CSS. Fortunately, each events page contains a page specific body class which you can use to make some of your CSS styling a bit easier. For example, when on the calendar/gridview, there will be a body class of .events-gridview – on the list view there will be a body class of .events-list – this means that you can apply different CSS styling by prefixing your CSS with those classes, i.e.:

.events-gridview #sidebar {
display: none;
}
.events-list #sidebar {
float: left;
width: 300px;
}

You can also modify the selected template’s markup to adjust things as well. To do that first find out what template you are using in Events > Settings > Display. If you have selected the Default Events Template, the plugin will use the /wp-content/plugins/the-events-calendar/views/default-template.php template file for the display. You can override and edit this by making a copy and placing in an ‘tribe-events’ folder in your theme.

All of the other Events Template options will use one of your available theme page templates (page.php, full-width.php, etc.) which you can also edit.

Based upon what Events Template option you’ve chosen, you will need to use these conditional wrappers to help you conditionally display or not display certain markup on each corresponding events page: https://gist.github.com/jo-snips/2415009

I hope that helps and sorry for not being able to provide a specific solution for each one of you. My suggestion would be if this seems like something over your head, don’t even waste the time on it. Hire someone to do 1-2 hours of work and get this running the way you need to. It will save you time and money. Good luck!

Regards,
– Jonah

[Tim Stringer]

Jonah — Thanks for the detailed explanation. One source of confusion for me (and I expect others) is that some of the documentation for Events Calendar doesn’t seem to have been updated for Events Calendar 3. For example, the current “Doing template overrides” document instructs users to put the theme overrides in an “events” folder in the theme — I discovered later that this folder is now called “tribe-events”. Before releasing EC 3 it would have been good to go through the documentation and note the differences in this new version and/or have more detailed information for people who are upgrading. I appreciate that you can’t deal with each user/theme individually…but having some clear and accurate documentation can go a long way. Also (if you haven’t already) it wouldn’t hurt to do some testing with some popular themes just in case there are issues in EC 3 that didn’t surface when testing with the default theme.

[Cynthia Lockley]

I agree with everything @Jonah says above. Updating the documentation would have helped tremendously along with making sure the readme file has information about what the differences are that need to be fixed before upgrading. Or at least a link to a file that explains the differences we need to know about such as the old and new events/tribe-events folders. Even if I had installed it in a mirror site, I still would not know how to fix the problems without knowing where the problems started. I hope your testing before releasing version 3 included test on the basic WordPress themes Twenty Ten, Twenty Eleven, and Twenty Twelve not only as vanilla sites but also as chocolate sites with minor mods such as calendar width that would have included the events folder in the child them. This would have helped you tell us what happens to themes with sidebars or mods in the events folder that we we were told in version 2 would be preserved in future updates. I think that was the biggest surprise for everyone and we weren’t expecting to have to redo all the mods we had. If you change CSS class names, it would be helpful to see a table of old and new class names. The same with file names. Maybe a lot of our problems could be reduced by matching old and new class names and old and new file names up.

[Jonah]

@technicallysimple – thanks for your reply and suggestions. Somehow we missed the “Doing template overrides” in our documentation sweep, but I’ve updated that tutorial to reflect the proper override path. We also did do a lot of testing with popular themes, but it’s always difficult to test every scenario with each one… I sent you a request for your theme in another thread so we can take a look at the specific issues there. If you can send that to us, we’ll take a closer look.

@cynthia – like I mentioned we did go through all the documentation but unfortunately missed a couple things. We spent about 3 weeks on this and tried to do as thorough a job as possible. Indicating changes in the readme or posting an actual article on some of the things that changed is a great idea and I’ve brought this up with the team so hopefully in the future we can do better with this. Our testing before release included the main WordPress theme’s as well as some other popular themes. Again, it’s difficult to be able to account for every possible scenario but we tried to do our best. As for the class names, we could also have done a better job with this and will try to do so in the future.

Please let me know if anyone has any other questions here and sorry for all the frustration and problems with the upgrade. We truly value your feedback and suggestions and will certainly continue to try to do better in future releases to make things smoother.

Regards,
Jonah

[Cinch]

Jonah, do the updated override documentation include the events.css file? I can’t seem to override the css…

Attempting to create a new tribe-events-theme.css file also fails to override the system css…

[Jonah]

Hi Bryan,

It appears that the https://theeventscalendar.com/what-are-template-overrides-and-how-do-i-do-them/ might be obsolete now. Instead please see the Themer’s Guide: https://theeventscalendar.com/support/documentation/events-calendar-themers-guide/ – We are having a discussion about whether to get rid of the template overrides tut because everything in it and more is covered in the Themer’s Guide.

Also, in the Themer’s Guide we will probably update this soon but please note that the stylesheet you need to override will depend on what stylesheet you have select in the Events > Settings > Display tab. The stylesheets you can override are:

tribe-events-full.css
tribe-events-skeleton.css
tribe-events-theme.css

I hope that helps!

– Jonah

[Cynthia Lockley]

Yes, add this statement to the Themer’s Guide:
The stylesheets you can override are:
tribe-events-full.css
tribe-events-skeleton.css
tribe-events-theme.css

and let us know what those three CSS files style. There are 18 total CSS files in this plugin.

[Andy Fragen]

Bryan/Cynthia,

If you want to include CSS overrides I would suggest the following solution. Put all overrides in /tribe-events/tribe-events.css. Install and activate The Events Calendar User CSS plugin. Currently TEC 3.0 will automatically load the CSS from the new location, the problem is, by default, it loads the CSS before, not after, the default CSS. This is going to be corrected in a future update. Until that time, the User CSS plugin fixes this problem.

[Cynthia Lockley]

Thanks. That explains why overrides aren’t working.

[Cinch]

Andy,

Thanks for the override plugin idea. It’s doing it’s job and allowing me to override the plugin styles.

I’m looking forward to the update, as TEC currently loads 7!!! stylesheets, including the override. I’d much prefer to turn them all off and load them myself through the theme for minify/concatenation purposes.

Can you provide a full list of the correct dequeue ID’s? This: wp_dequeue_style( ‘full-calendar-style-css’ ); for example, is not working.

Thanks again,
~ Bryan

[Andy Fragen]

Bryan, I’m not so sure dequeuing them all and enqueuing them in your theme is a good idea, but if you want to, the dequeue ID doesn’t include the final ‘-css’. That bit is added by WordPress.

The proper code would be wp_dequeue_style( ‘full-calendar-style’ );

[Cinch]

Thanks for the dequeue info Andy. Can you explain why dequeueing wouldn’t be a good idea?

I didn’t plan on enqueuing through the theme… Just putting everything within the theme css.

I’m interested in best practices… if there’s a better way to minimize the number of stylesheets loaded, I’m happy to do it. Do you prefer to concatenate through something like W3 Total Cache?

[Author]

Posts