Trying to make Event Calendar page look same as my other site pages

[John]

Hello,

Just bought the Event Calendar Pro and Filter Bar today. Have already set up a Calendar with some events.

http://stfrncis.com/calendar/

Under Settings and Display I did select Default Page Template under Events Template so it picked up my nav bar etc, but I want it to also pick up the photo and colored bar saying what the page is, as in this page:

http://stfrncis.com/subscribe-to-our-e-newsletter/

I built the pages with Divi builder so basically it’s not picking up the builder part of the page.

Thanks for any help.

[Josh]

Hey Lisa,

Thanks for reaching out to us! This being more of a customization request I’ll do my best to help get you pointed in the right direction, however I can’t make any guarantees.

I took a look at your site and saw the banner that you’re wanting to add to the default template. Looking around at other pages on the site, I don’t see the photo and page title displayed the way it is on the page you specified. Out of curiosity, how is that heading added to the subscribe page?

Thanks!

[John]

Hi Josh,

Thanks for getting back to me. The site is still in development on a temporary domain so it’s not finished. You may have looked at pages that were not built yet? All the pages will have the banner photo and heading bar just below it as on the subscribe page and that is how I would like the events calendar page to look as well.

The header and banner etc are all added via the template Divi and it’s page builder tool. Is this a questions for the builders over at Elegant Themes who made Divi or is this something you can help me with do you think?

Thanks.

[Josh]

Hey Lisa,

Thanks for following up.

So the page builder is on the actual page edit screen? If this is the case, there really isn’t a straightforward way to be able to add the customizations to the events template.

An alternative would be to create an “Events” page and then add the [tribe_mini_calendar] shortcode to the page.

Let me know if this helps.

Thanks!

 

[John]

Hello Josh,

Yes, the page builder is on the edit screen. You can either use the default editor or load the page builder. I created a template in the page builder that I use for each section and that’s what I want to slot the calendar into.

The shortcode you gave me did work but it gives me a totally different looking basic calendar. We bought the Events calendar Pro and the Filter bar and want to be able to use all that. Is there a short code for the calendar I’m using as on this page:

http://stfrncis.com/calendar/

The other thing is that it’s very plain. I would have thought there would be different templates to choose from (different colors, styles, etc) rather than just this one template that you have to customize yourself with css. Am I missing something? Are there other template with the Pro version?

Thanks for your help.

[John]

I noticed that on your products page there is an example of a site with a photo above the calendar. How was this done? This is what we are trying to achieve. The page is so plain as is. There must be a way to do this. Thanks.

[John]

This is the site I’m talking about above:

Northpointe Community Church

Events Calendar Pro

[John]

I added a photo with a title strip under it to the html box under Display in Settings and this is what I got:

http://stfrncis.com/calendar/\

I’m not happy with it. I want it to look the same as my other pages such as this:

http://stfrncis.com/bulletins/

Where it goes all the way across the page and it keeps the parallax scrolling.

Is there any way to make it look like that church site I mentioned above that shows on your product pages?

Thanks.

[John]

I was really hoping someone could get back a little sooner about this problem?

I have been trying various things and have since taken out the image I tried as mentioned above. I don’t like the look.

What about trying to add the normal header area php code (including the slider and header):

<div id=”et-main-area”>
<div id=”main-content”>

<article id=”post-567″ class=”post-567 page type-page status-publish hentry”>

<div class=”entry-content”>
<div class=”et_pb_section et_pb_inner_shadow et_pb_section_parallax et_pb_fullwidth_section red et_section_regular” style=’background-color:#89d0c9;’>

<div class=”et_pb_slider et_pb_slider_no_arrows et_pb_slider_no_pagination et_pb_slider_parallax”>
<div class=”et_pb_slides”>
<div class=”et_pb_slide et_pb_bg_layout_dark” style=’background-color:#ffffff;’>
<div class=”et_parallax_bg et_pb_parallax_css” style=”background-image: url(http://stfrncis.com/wp-content/uploads/2015/05/3a.jpg);”></div>
<div class=”et_pb_container clearfix”>

<div class=”et_pb_slide_description”>

<div class=”et_pb_slide_content”></div>

</div> <!– .et_pb_slide_description –>
</div> <!– .et_pb_container –>

</div> <!– .et_pb_slide –>

</div> <!– .et_pb_slides –>
</div> <!– .et_pb_slider –>
<section class=”et_pb_fullwidth_header et_pb_bg_layout_dark et_pb_text_align_left”>
<div class=”et_pb_row”>
<h1>EVENTS</h1>
<p class=”et_pb_fullwidth_header_subhead”>Bulletins</p>
</div>
</section>

</div> <!– .et_pb_section –>

into the calendar php code? Which page would I actually add it to? I found events-calendar-pro.php inside the plugins –> events-calendar-pro folder. Would this be the one?

Unfortunately, if we cannot work this out, it’s probably a deal breaker for us and we would need to find another program, which would be a shame as I like this one.

Thanks.

[Josh]

Hey Lisa,

Thanks for following up. I apologize for the delay, we typically don’t answer support threads over the weekend.

Since, the page is designed within a “page” edit screen, it isn’t something that is able to be directly applied to the Event Calendar view.

You could go with your stated approach above by following our Themer’s Guide and creating a new “tribe-events” folder within your theme. You could then copy the “default-template.php” file into your theme and add the code you have pasted above. This will apply to every calendar view. From here, you can add conditionals around the chosen image and title so you can change what image and text gets displayed on which page. Here is a list of conditionals within context of how they can be used for the different views https://gist.github.com/jo-snips/2415009.

Modifications to the default template (either through this method or through hooks and filters added within their theme) would have been the way the example site you mention above would have gotten their custom layout.

Let me know if this helps.

Thanks!

[John]

Hi Josh,

I tried following the Themer’s Guide before but when none of the names in my folder match up with what you are talking about it’s hard! It says:

To load custom styles for PRO views and elements, create a stylesheet called tribe-events-pro.css in the tribe-events/pro/ directory of your theme. There is no tribe-events/pro directory in my Divi theme! I looked in the plugins folder outside of the theme and there’s just a folder called events-calendar-pro but that’s it. Nothing with tribe in the name. So I’m stumped.

Can you give me any clues as to where I should look. Please be as specific as possible naming each folder and file and where to start, i.e. in the plugins folder or within the Divi theme folder.

Thanks.

[John]

An additional question. If I am unable to sort all this out, I thought I read on the forum that you will be providing short codes in your next release. If this is so, will this fix this issue for me? Do you know when that will be? Thanks.

[Josh]

Hey Lisa,

Sorry for the confusion. You’ll need to create the “tribe-events/pro” folders within your theme (preferably within a child theme which will allow you to continue to do automatic updates of your theme and plugins without worrying about losing customizations) and add your customizations there.

So, like you describe, here you can add a file titled “tribe-events-pro.css” and add css styles there. Additionally, if you would like to add the markup to the default events template, you can copy the “default-template.php” file from within the “views” folder of the core Events Calendar plugin (not the PRO plugin) and paste it into this new “tribe-events” folder in your theme and make the customizations there. So with this, you’ll have a folder structure added to your theme which looks like https://cloudup.com/cyI7G7VqzVA.

We are looking into expanding the shortcodes that are available within our plugin. If you would like, you can vote for this feature on our UserVoice page and you’ll be notified there as we make progress on these.

Let me know if this helps.

Thanks!

[John]

Josh,

I copied the default-template.php file and placed it inside my child theme, i.e. Divi-child–>tribe-events–>default-template.php

I’m not sure where the pro part comes in. I did create a folder called pro and placed it inside the tribe-events folder and I placed the event-calendar-pro.css file in there. Is that correct? Your schema doesn’t really show all of that.

Now that I have my new default-template.php file, I pasted in what I believe is the right code for the header photo and title bar (further up in my post) but nothing happened. I tried pasting it inside the php tags and outside. I’m not sure where to put it. Can you please let me know? Thanks.

This is the code I see inside the default-template.php file:

<?php
/**
* Default Events Template
* This file is the basic wrapper template for all the views if ‘Default Events Template’
* is selected in Events -> Settings -> Template -> Events Template.
*
* Override this template in your own theme by creating a file at [your-theme]/tribe-events/default-template.php
*
* @package TribeEventsCalendar
*
*/

if ( ! defined( ‘ABSPATH’ ) ) {
die( ‘-1’ );
}

get_header(); ?>
<div id=”tribe-events-pg-template”>
<?php tribe_events_before_html(); ?>
<?php tribe_get_view(); ?>
<?php tribe_events_after_html(); ?>
</div>
<!– #tribe-events-pg-template –>

<?php get_footer(); ?>

[Josh]

Hey Lisa,

The structure you describe sounds like it’s right.

If you don’t mind, could you create a gist of the entire code that you currently have within your new default-template.php file and paste the link here?

Also, ensure that within your Event Settings > Display tab that the events template is currently set as the default events template https://cloudup.com/cNhiWlyhS3n rather than a default page template.

Let me know if this helps.

Thanks!

[Author]

Posts