How can I modify single event layout

[James]

I purchased the PRO package and I am having a hard time figuring out how to modify the design of a single event, as well as the list view design layout. I am not that great in PHP so I need to know where these variables are set and which template to modify. As per the attached image, I want to remove the top portion including the calendar exports labeled A. I want to rename the section labeled B. to Course Name and also do a few little visual tweaks to the page.

Any help would be greatly appreciated!

[Geoff B.]

Good afternoon James and welcome to the Events Calendar Support forum!

Thank you for reaching out to us.
I would love to help you with this topic.

You might want to read our Themer’s guide to get a sense of how customization work.

Basically, you can simply make a copy of the view you want to modify, create a “tribe-events” folder in your WordPress theme and slide the copied file in the appropriate subfolder of  “tribe-events” and edit away.

In your specific case, you need to look at the single-event section.

As an alternative, you can use CSS to hide things.

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

.single .tribe-events-schedule h2 {display: none !important;}

.single-tribe_events .tribe-events-cal-links {display: none !important;}

As for relabeling, you can simply use the following snippet: https://theeventscalendar.com/knowledgebase/change-the-wording-of-any-bit-of-text-or-string/

Let me know if that helps.

Have a great day!

Geoff B.

[James]

Hi,

I was able to add the code and it did remove some of those items. However, it still leaves the Test scramble name at the top. How can I shrink the whitespace above the contents and center the text of Test scramble?

[Geoff B.]

Good evening James,

Thank you for writing back.

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

.single-tribe_events .tribe-events-single-event-title {
text-align: center;
}

.tribe-events-schedule, .single-tribe_events #tribe-events-header {
display:none !important;
}

Let me know if that helps.

Have a great day!

Geoff B.

[James]

Hi,

You have been extremely helpful so thank you for your help. I do have one last bit of configurations that hopefully you can help me with. I created an additional field called Scramble Details. When I enter info it that field, it posts to the bottom of my event. The issue I am having is it is posting the Scramble Details named twice and I can’t figure out how to remove the smaller one and also move the field up so it looks a little cleaner. Can you help me on that?

Also, how can I change the font colors of the headers on this page and also on my calendar and list view? They default to grey and need to add some color.

Thanks!

[Geoff B.]

Good evening James,

I am glad my answers have helped you get closer to your goal!

The issue I am having is it is posting the Scramble Details named twice and I can’t figure out how to remove the smaller one

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

.single-tribe_events #tribe-events-content .tribe-events-event-meta .tribe-events-meta-group-other dt {
display: none !important;
}

and also move the field up so it looks a little cleaner. Can you help me on that?

The proper way to do this would be to make a customization to the single event view.
You might want to read our Themer’s guide to get a sense of how that works.

By changing the sequence of appearance of the divs.

Short term a CSS solution to make things look better would be:

.tribe-events-event-meta .column, .tribe-events-event-meta .tribe-events-meta-group {
width: 50% !important;
}

Also, how can I change the font colors of the headers on this page and also on my calendar and list view? They default to grey and need to add some color.

I would recommend using the built-in the Events Calendar Customizer.
You can find it under Appearance > Customize > the Events Calendar

Let me know how that goes.

Best regards,
Geoff B.

[James]

This worked for the most part but I can’t figure this other issue I am having. I looked through the themer’s guide and couldn’t find it either. How do I change the font color and background color of the Days of the week in the month view? It’s hard to read which day it is with my layout.

Also, how do I change the name from Events to Scrambles? I tried the tips in this link but it doesn’t seem to change it but it worked for other words on my site.

Custom Wording in the Calendar

Thanks again!

[Geoff B.]

Good afternoon James,

How do I change the font color and background color of the Days of the week in the month view?

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

.tribe-events-month .tribe-events-calendar thead th {
background-color: #000;
color: #fff;
}

Also, how do I change the name from Events to Scrambles? I tried the tips in this link but it doesn’t seem to change it but it worked for other words on my site.

I just tried that snippet and it works wonders.

Does your code look like this ?

function tribe_custom_theme_text ( $translation, $text, $domain ) {

$custom_text = array(
‘Events’ => ‘Scrambles’ );

if( (strpos($domain, ‘tribe-‘) === 0 || strpos($domain, ‘the-events-‘) === 0 || strpos($domain, ‘event-‘) === 0) && array_key_exists($translation, $custom_text) ) {
$translation = $custom_text[$translation];
}
return $translation;
}
add_filter(‘gettext’, ‘tribe_custom_theme_text’, 20, 3);

Best regards,

Geoff B.

[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