Google Map and Map links

[Stuart]

This reply is private.

[Stuart]

Hi Nico,

Just checking in again to see if you have any further thoughts on this.

Thanks for all your help,
Stuart

[Nico]

Hey Stuart,

Sure, let’s continue to work on this:

1) The map seems to be appearing twice. How do I remove the larger one?

To remove the larger one, make sure the following line is deleted or commented in the functions.php file:

add_action ( 'tribe_events_after_the_meta', 'tribe_print_map_in_list_view' );


2) Can we remove the “View Full Map” link beneath the map and make the map itself a link to the map? Looks like this part of the code is controlling that in the functions.php file.

Unfortunately this is not possible as the map is actually an interactive element so wrapping it in a link won’t make it clickable. To remove the ‘view full map link’ remove or comment out this line:

echo 'ID ) . '">View full map';


Please let me know if the above help, and what else you need to have this done 🙂
Best,
Nico

[Stuart]

Hi Nico,

Well, I think we’ve made some progress. 🙂 The large Map is no gone. Yay!

Now, the small map seems to have wreaked havoc with the layout. 🙁

I think the size of the map is disrupting the layout. The map should have a horizontal orientation, but has a vertical orientation.

I’mm attaching a screen shot of the Avada Event List demo page. The map should fit inside the box that has the link to the Google Map. Otherwise it throws off the layout.

Do you know of a way to fix that?

Thanks,
Stuart

[Nico]

This reply is private.

[Stuart]

Hi Nico,

I think I’ve got this looking pretty much the way I want.

I added the following CSS:

div[id^="tribe-events-gmap-"] {
height: 150px !important;
}
.fusion-tribe-events-venue-details-map {
    padding: 0 !important
}
.tribe-events-list .tribe-events-venue-details {
    font-style: italic;
    font-weight: 600;
}
.tribe-events-event-meta, body {
    font-size: 18px;
}

Now, I’d like to know what’s controlling the fields for the date? I’d like to change that to a different format. Something like:
October 21
9:30 a.m.–1:00 p.m.

So, that’s removing the “@” and putting the time on the second line.

Also, with the Location. I bumped up the size of the font mainly so the country would be on its own line. Is there another way to accomplish that?

Thanks for all your help!
Stuart

[Nico]

Awesome Stuart, great job with the CSS 🙂

You can control the date time settings in ‘WP-Admin > Events > Settings > Display > Date Format Settings’, for example you could use ‘<br>’ as ‘Date time separator’ to move the time to a new line. This will affect the rest of the site, if this doesn’t work we can explore other options, but probably will have to replace how the date output in the template.

Regarding the country in the venue details, you can use this CSS snippet to make always show in a new line without increasing font size:

.tribe-country-name {
display:block;
}


You can do the same with other lines of the venue details if you want or also add some more specificity to the selector (by preprending .tribe-events-list) to narrow the effect of this rule just to list view.

Please let me know if those tips help you out,
Best,
Nico

[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