Support

Home Forums Event Espresso Premium Event Table View Template Appearance

Event Table View Template Appearance

Posted: July 31, 2019 at 1:03 pm


learn@refocusrealestate.com

July 31, 2019 at 1:03 pm

I would like the course details (Venue, Address, All Dates, and Description) to appear on the Toggle option using the Event Table View. Is this possible? If so, how?


Tony

  • Support Staff

July 31, 2019 at 2:38 pm

Hi there,

You can tell the table view template to load all of the date by adding show_all_datetimes=true onto your shortcode.

For the rest of your request, I’m not sure I understand as pretty much all of that content loads within each section.

Can you add an example of what you are looking for? Maybe a screenshot of what you’d like the output to be?

The table view template allows for custom versions of the template to be loaded so you can change the output if you are comfortable with PHP/HTML/CSS/JS but before providing further details I need to know a little more on what you are trying to do.


learn@refocusrealestate.com

July 31, 2019 at 2:59 pm

Hi, thank you for the quick response. I was told the following shortcode would give me what I needed but it’s not… [ESPRESSO_EVENTS_TABLE_TEMPLATE template_file=espresso-events-table-template-toggle.template.php]. It limits the data that’s displayed.

I need it to display:
– Venue
– Address (currently not shown)
– All Dates & Times (currently only displaying start date and time of one session)
– Description

https://refocusrealestate.com/test-ee-with-elementor (bottom of page)

As for the table view, I’m not that experience with PHP/HTML/CSS/JS, I know enough to be dangerous. 🙂

I need the Table (row) to display:
– Event name
– Event date(s); if possible
– City of the Event; if possible
– Register button

We only offer 2 courses so for a list of the same course would be confusing to a student. I’m not to simplify the appearance so a student can filter/navigate to a course that fits their schedule.

Thanks again.


Tony

  • Support Staff

July 31, 2019 at 3:10 pm

[ESPRESSO_EVENTS_TABLE_TEMPLATE template_file=espresso-events-table-template-toggle.template.php] is the shortcode for the table view toggle template.

It’s a valid shortcode, but if your courses have the same name/title it will basically display the same title multiple times so may not suit your needs.

If you use [ESPRESSO_EVENTS_TABLE_TEMPLATE] does that output fit any better for you?

I know it likely won’t fit exactly for what you need, but you start with the output that fits closest and then add additional details if needed. So we need to find the starting point for what you want to output first.

Again note that if you add show_all_datetimes=true to either of those shortcodes it will output all of the dates for each individual event.

Example: [ESPRESSO_EVENTS_TABLE_TEMPLATE show_all_datetimes=true]


learn@refocusrealestate.com

July 31, 2019 at 3:31 pm

All options are displaying the Venue. In my case, the Physical Address or just City would be of better value.

Is there a reason only the Start Time displays and the End Time in the view?

The [ESPRESSO_EVENTS_TABLE_TEMPLATE] shortcode does not provide enough upfront information.

The [ESPRESSO_EVENTS_TABLE_TEMPLATE show_all_datetimes=true] is getting there but I would like it to have the Toggle option. It prevents a student from clicking back and forth to see the details of each event.


Josh

  • Support Staff

July 31, 2019 at 7:02 pm

You could change the Venue column to show the city instead, by following this other topic:

https://eventespresso.com/topic/how-to-replace-venue-name-with-venue-city-in-event-table/

One difference though, you’d make the edits to the -toggle.template.php file.

Is there a reason only the Start Time displays and the End Time in the view?

Did you mean to ask, “why not display display the end time too?” If so, I’m not aware of that ever being requested actually. The way the time is displayed can also be changed by making an edit to the template too. In your custom template, find this:
<?php echo date_i18n( $date_format . ' ' . $time_format, strtotime( $datetime->start_date_and_time('Y-m-d', 'H:i:s') ) ); ?>
and change to this:
<?php echo date_i18n( $date_format . ' ' . $time_format, strtotime( $datetime->start_date_and_time('Y-m-d', 'H:i:s') ) ) . ' - ' . $datetime->end_time('g:i a'); ?>


learn@refocusrealestate.com

July 31, 2019 at 8:29 pm

Yes, I meant “why not display the end time too?”

Thank you for your guidance. However, I have no earthly idea of how even access the custom template to perform the steps you referenced.

Is there a step by step guide or video you can point me to?

Also, is there a way to change the color of the table to match my theme?


Josh

  • Support Staff

July 31, 2019 at 8:50 pm

You’ll use FTP to access the custom template. If you’re not familiar with how to use FTP, then here’s a guide I can recommend:

https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/

The location of the Table template that you’ll copy over to your theme is in /wp-content/plugins/eea-events-table-template/templates

ideally you’ll move the copy into a child theme in order to avoid losing the copy on a theme update. More information here:

https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/

Also, is there a way to change the color of the table to match my theme?

Yes, by adding some CSS. You go to Appearance > Customize > Additional CSS, and add the following:

.espresso-table.footable > thead > tr > th,
.espresso-table.footable > thead > tr > td,
.espresso-table.footable > tfoot > tr > td {
background-color: #f69846;
background-image: none;
}

.footable .pagination > ul > .disabled > span,
.footable .pagination > ul > .disabled > a,
.footable .pagination > ul > .disabled > a:hover,
.footable .pagination > ul > .disabled > a:focus {
background-color: #f9c598;
{

and you can adjust color values as desired.


learn@refocusrealestate.com

July 31, 2019 at 9:49 pm

Thank you. This looks a little intimidating. I may have to find/pay someone to do this for me so I don’t break the site. 🙂


learn@refocusrealestate.com

August 1, 2019 at 11:09 pm

Table (row)
– City still is not being displayed, only Event

After clicking Toggle
– City replaced Venue but I need the Physical Address to display

Table Colors
– What does “background-color: #f9c598” represent? I changed the color a few times but didn’t see a color change on the table.


Josh

  • Support Staff

August 2, 2019 at 9:02 am

OK. So it sounds like you want to display the city alongside the event name. That can be done, you’ll edit that same template and place the code you added to display the city name, so it follows the code after the event name.

In other words, you change this:
<td class="event_title event-<?php echo $post->ID; ?>"><?php echo $post->post_title; ?></td>
to this:
<td class="event_title event-<?php echo $post->ID; ?>"><?php echo $post->post_title . ' - ' . $venue_city; ?></td>

Then you’ll need to get the venue address from the venue object earlier in the template. So this:

    if ($venue instanceof EE_Venue) {
        $venue_city = $venue->city();
    }

becomes this:

    if ($venue instanceof EE_Venue) {
        $venue_city = $venue->city();
        $venue_address = $venue->address();
    }

Then, where you currently have the template displaying the city:
<td class="venue_title event-<?php echo $post->ID; ?>"><?php echo $venue_city; ?></td>

You can change $venue_city to $venue_address.

– What does “background-color: #f9c598” represent? I changed the color a few times but didn’t see a color change on the table.

It means set the background color to this color:
https://www.0to255.com/f9c598

You may need to clear your browser’s cache because I see a color change on the table. Here’s a screenshot:
https://slack-files.com/T02SY781D-FM0GF76R3-e4bffeb4db


learn@refocusrealestate.com

August 2, 2019 at 1:44 pm

Table (row)
– City still is not being displayed as a column; there is a City appearing to the right of the Event name but it’s hard to identify.

After clicking Toggle
– States City but should be Address; is it possible to display the entire physical address?

I would like the following to display after clicking Toggle:
Venue
Address (entire)
Date
Description


Josh

  • Support Staff

August 2, 2019 at 2:15 pm

– City still is not being displayed as a column; there is a City appearing to the right of the Event name but it’s hard to identify.

The City shouldn’t actually be displayed as a separate column, because that’s a one column layout you’re working with there. You could adjust the html accordingly to your project’s needs. For example, you could wrap the $venue_city in an html span and set the text to float to the right and make it bold.
e.g.

<td class="event_title event-<?php echo $post->ID; ?>"><?php echo $post->post_title . '<span style="font-weight:bold; float:right;">' . $venue_city . '</span>'; ?></td>

After clicking Toggle
– States City but should be Address; is it possible to display the entire physical address?

It sounds like you didn’t make the edit to the template code.

May I ask did you change $venue_city to $venue_address?


learn@refocusrealestate.com

August 2, 2019 at 2:44 pm

Are you saying it should look like this now?
}
$venue_city = ”;
// get first related venue and convert to CSV string
$venue = $event->venues(array(‘limit’ => 1));
if (is_array($venue) && ! empty($venue)) {
$venue = array_shift($venue);
if ($venue instanceof EE_Venue) {
$venue_address = $venue->city();
$venue_address = $venue->city();
}

As for $venue_city, are you saying replace

<td class=”event_title event-<?php echo $post->ID; ?>”><?php echo $post->post_title . ‘ – ‘ . $venue_city; ?></td>

with

<td class=”event_title event-<?php echo $post->ID; ?>”><?php echo $post->post_title . ‘<span style=”font-weight:bold; float:right;”>’ . $venue_city . ‘</span>’; ?></td>

If so, I did that and now the City is removed from the Table (row).


Josh

  • Support Staff

August 2, 2019 at 2:51 pm

$venue_address = $venue->city();
$venue_address = $venue->city();

is incorrect. That’s why things are broken now.

What you actually need to copy and paste in there is:

$venue_city = $venue->city();
$venue_address = $venue->address();


learn@refocusrealestate.com

August 2, 2019 at 3:05 pm

I made the update. It City is on the Table (row) right aligned. Is it possible to have it centered or I would be happy with it following the Event Title (e.g. Principles and Practice of Real Estate -(dash) “City” or “City”)?

After clicking Toggle:
The Address is named City.

https://refocusrealestate.com/test-ee-with-elementor/

How do I remove the Search box on the Table View?

How are Events listed on the Table View (e.g. alphabetically, start date)?


Josh

  • Support Staff

August 2, 2019 at 3:33 pm

I made the update. It City is on the Table (row) right aligned. Is it possible to have it centered or I would be happy with it following the Event Title (e.g. Principles and Practice of Real Estate -(dash) “City” or “City”)?

You can remove the float:right; to remove the right aligment, and add back in the dash as it was before.

After clicking Toggle:
The Address is named City.

You must have changed “Venue:” to “City:” in the template. You can change the label back to “Venue:” or to “Address:”.

How do I remove the Search box on the Table View?

You add table_search=false to the shortcode.

How are Events listed on the Table View (e.g. alphabetically, start date)?

They’re ordered by next upcoming start date.


learn@refocusrealestate.com

August 4, 2019 at 11:39 am

I’m not exactly sure where the “Venue:” to “City” label is located in the template to change it.

Where would I add the dash back to?


Josh

  • Support Staff

August 6, 2019 at 7:53 am

The default template has this starting on its 45th line:

<?php if( $show_venues ) { ?>
	<th data-hide="all" class="th-group"><?php _e('Venue','event_espresso'); ?></th>
<?php } ?>

It appears that you’ve changed the label there to be “City”.

Where would I add the dash back to?

This part:

<td class="event_title event-<?php echo $post->ID; ?>"><?php echo $post->post_title . '<span style="font-weight:bold; float:right;">' . $venue_city . '</span>'; ?></td>

could be changed back to this:

<td class="event_title event-<?php echo $post->ID; ?>"><?php echo $post->post_title . ' - ' . $venue_city; ?></td>


learn@refocusrealestate.com

August 9, 2019 at 1:35 pm

Is it possible to include the City, State, and Zip in the Address?


Josh

  • Support Staff

August 9, 2019 at 1:48 pm

Do you mean when the table row is expanded?

If so, where you have the code that displays the address, you can replace that with:
espresso_venue_address()
e.g.
<td class="venue_title event-<?php echo $post->ID; ?>"><?php espresso_venue_address(); ?></td>


learn@refocusrealestate.com

August 9, 2019 at 2:12 pm

That worked, thank you. It’s now displaying the Address on separate lines:
Address
Address 2
City
State
Zip

Is there a way to have it on one line?


Josh

  • Support Staff

August 9, 2019 at 4:42 pm

Yes.

You change this:
espresso_venue_address()
to this:
espresso_venue_address('inline')

The support post ‘Event Table View Template Appearance’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3

Documentation for Event Espresso 4

Status: closed

Updated by  Josh 4 months ago ago

Topic Tags

Notifications

This topic is: not resolved
Do NOT follow this link or you will be banned from the site!