Theme Header Background Not Displaying

[Jason]

Hi,

I have installed the PRO theme but my theme’s background is not appearing on the event pages:
http://kettlevalley.ropchan.com/news/list/
http://kettlevalley.ropchan.com/event/test/

Could someone take a look at the code for me and see if you can find the problem.

Thank you in advance!
Jason

[Geoff]

Hey Jason, hope you had a great weekend!

Will you please try heading to Events > Settings > Display from the WordPress admin and changing the Events Template option (screenshot) to one of the theme’s page templates?

Give that a try and let me know if it makes a difference. 🙂

Cheers!
Geoff

[Jason]

Hi Geoff,

Thanks for getting back to me. The template was already set to the Default Page Template. I tried switching to the event template to see what happened. It showed the background, but the template didn’t work. Let me know if you have any other ideas.

Thanks,
Jason

[Geoff]

Hey Jason, thanks for trying that out!

It’s very possible that the CSS for the theme simply conflicts with the CSS for the plugin. It looks like you should be able to add this to your theme’s style.css file or by using the Simple Custom CSS plugin:

.tribe-events-style-theme {
background-image: url("http://kettlevalley.ropchan.com/wp-content/uploads/2016/07/slide-1.jpg");
}

Once you do that, the background image will show through the calendar grid since the grid is transparent. You can resolve that by adding this:

#tribe-events-content .tribe-events-calendar td {
background: #fff;
}

Here is a screenshot of how it should look once that is done.

Cheers!
Geoff

[Jason]

Hi Geoff,

Thank you very much. That fixed the background issue.

Is it possible for the event module to appear in the page content section? See the attached “correct” screenshot. I would like the page heading to appear and the events to be displayed in the white space below.

Thanks,
Jason

[Geoff]

Hi Jason,

CSS can also help here. For example, something like this:

#tribe-events-content {
background: #fff;
padding: 20px;
}

…for force the entire events template to use a white background and add some breathing room so the content doesn’t push right up to the edge. Here’s a screenshot of how that looks when in use on the main calendar and another screenshot of how that looks on an event post.

Cheers!
Geoff

[Jason]

Hi Geoff,

Thanks for getting back to me, but I don’t think you understood what I wanted to accomplish.

If you go to this page you can see how the page has the heading “News and Events” with the theme background behind it and a white background where the page content appears:
http://kettlevalley.ropchan.com/news/

This is what my event page looks like:
http://kettlevalley.ropchan.com/test-events/

However, I would like it to look like the attached screenshot. I would like the event section to appear in the content section of the page.

Thanks,
Jason

[Geoff]

Hi Jason,

Thanks for clarifying!

I think we’re starting to border on some custom development. In other words, the theme has a specific template in use and to get the same exact look and layout will require customizing the calendar;s templates in a way that uses the same sort of code and markup.

We’re fairly limited in how much we can support custom development questions like this, but I’d be happy to point you in the right direction as best I can.

In this case, I think a good starting point would be to override the calendar’s default-template.php and single-event.php templates. To do that:

• Make a copy of both files. They are located in the wp-content/plugins/the-events-calendar/src/views folder.
• Make a new folder in your theme called tribe-events
• Move both of the copied template files in that folder

Now that the templates are in your theme, they can be modified to suit your needs. In this case, borrowing code from your theme’s page templates that places the calendar’s components (such as the title) so that they appear the same in the calendar’s templates as they do in other theme page templates.

Sorry I don’t have more of a concrete solution for you, but will this at least help get you started? Please let me know.

Thanks,
Geoff

[Jason]

OK, thanks for the info. I had hoped that it was an easier change. I have a web developer I can work with to make the customization.

Thanks,
Jason

[Geoff]

Excellent, thanks for working with me on this Jason! I’ll go ahead and close this thread, but please do feel free to open a new one if any questions come up while your web developer is digging in, such as how any of the code inside the calendar templates work, and we’d be happy to help as best we can.

Cheers and have a great day!
Geoff

[Author]

Posts