how to format single event page

[Kelly]

Hi, I just purchased the pro version and am setting up a calendar. Am trying to customize the format of the single events page.
Specifically, I want to
1) move the text that describes the event to the right of the photo, rather than underneath it
2) standardize the size of the photo that appears in the single event page
See http://kid-museum.org/event/makey-makey-workshop/ for an example.

Have read the themer’s guide that talks about customizing a template file but I’m confused. There seems to be more than one file called single-event.php (one in the photo folder and one in week folder) and I’m not sure how exactly to edit. Can you please help? Thanks

[Geoff]

Hi Kelly and thanks for reaching out! Welcome to the forums. 🙂

You’re absolutely right: there are a number of different files named single-event.php and I know that can be confusing as heck. Sorry about that.

The good news is that you’re on the right track. A template override is an excellent way to move the elements of the single event post around. The event post is composed of one parent template and a sub-template:

• single-event.php — the parent, located at /plugins/the-events-calendar/src/views/single-event.php
• meta.php — contains the event details, venue information, map and such in the post and is located at /plugins/the-events-calendar/src/views/modules/meta.php

To override the parent template:

• Make a copy of it
• Make a new folder in your theme directory called tribe-events
• Drop the copied single-event.php file in that folder

Now that the template in your theme, they can be modified to suit your needs. In this case, you can set the size of the featured image by editing this line:

<?php echo tribe_event_featured_image( $event_id, 'full', false ); ?>

Change “full” to some other size option (e.g. large, medium, small).

As far as repositioning the the test next to the image, you can do that with some CSS:

.single-tribe_events .tribe-events-event-image {
float: left;
padding-right: 15px;
}

Does this help get you closer to what you’re looking for? Please let me know. 🙂

Geoff

[Kelly]

that’s helpful – thanks. I was looking in the events-calendar-pro folder and not the events-calendar. All set with adjusting the size of photo

Can you tell me where exactly to add the CSS code?

[Geoff]

Oh yeah, sure! You can add that directly to your theme’s style.css file or–even better–add a tribe-styles.css file to the tribe-events folder you created in the theme and add it in there. Here’s some more info on how that works. 🙂

Cheers!
Geoff

[Kelly]

Hmm…tried that and no change. I’m a bit confused about which elements are event calendar ones and which are PRO ones. Tried adding a .css file to both. Any good resources I can look at that are more basic than your themer’s guide?

[Geoff]

Oh shoot, sorry about that! We do indeed have a more advanced tutorial on how to use DevTools to target CSS classes.

Any and all styles can go into the tribe-styles.css file that goes in the top level of the  tribe-events folder you added to the theme. And, if worse comes to worse, you can add those styles directly to your theme’s stylesheet and that will have the same effect. 🙂

Did you have any other questions about customizing the page template that I can help with?

Cheers!
Geoff

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts