Support

Home Forums Event Espresso Premium EE4 layout style

EE4 layout style

Posted: February 15, 2021 at 2:12 am


Mark

February 15, 2021 at 2:12 am

Hi Support,

As you know that I have updated ee3 to ee4, in the new one I have an issue with events styling. The default layout of ee4 screenshot: https://www.screencast.com/t/zBqJrMFaHMz

My old layout screenshot: https://www.screencast.com/t/axIjvLxqoKA6 now I want old layout in ee4 as well and I think I need to purchase an addon “Events Table View Template” I want to confirm if after punching addon can I get the same old styling if this addon will not work then let me know the other way how can I get my old layout styling.

Thank you,


Josh

  • Support Staff

February 15, 2021 at 6:56 pm

Hi,

The Events Table View Template add-on has a different “table” layout that actually looks like this picture:

If you need to have a list of events that has a layout that’s similar to the old EE3 layout, then you could use this code that adds a custom shortcode:

https://gist.github.com/joshfeck/c4dbc30d2d464d418b4957715c7bde0d

Ideally the code should go into a site-specific functions plugin, we have some documentation on creating one here:

https://eventespresso.com/wiki/create-site-specific-plugin-wordpress-site/

Then, after you activate the plugin, you can add a
[espresso_legacy_events] shortcode to any page or post.


Mark

February 16, 2021 at 12:56 am

Thank you Josh.
I have purchased the plugin table view is working for event listing, but on single event page it still messed with with styling. Please see this page: http://basicfirstaid.ca/demo/events/workplace-approved-cpr-hcp-and-aed-only-208/

you can see bullet points are not inline styled, map is also not being displayed.

Pls help.

Thanks


Tony

  • Support Staff

February 16, 2021 at 4:13 am

HI Mark,

you can see bullet points are not inline styled

The CSS used by your theme to style those bullet points and add margin uses:

.entry ul, .entry ol {
    margin: 0 0 1.618em 1.618em;
}

However, within the single event page, the theme is outputting those bullets in the header which is outside of the section is uses that has an entry class, meaning the above doesn’t style those.

If you want this applied specifically on EE pages you can add something like:

.type-espresso_events .post-meta ul,
.type-espresso_events .post-meta ol {
    margin: 0 0 1.618em 1.618em;
}

map is also not being displayed.

Google maps is no longer free, they now require an account within billing enabled and for you to add your API on the request to use it.

If you open up Chrome Dev Tools (or similar) and look in the console on that page you’ll see an error like this:

Geocoding Service: You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account

Go to Event Espresso -> Venues -> Google Maps (tab)

Under the API key field is link that sets up a project on your Google Account with the correct API’s enabled.

Google apply a $200 credit to your account each month, anything over that will be charged (which is why they require billing is enabled).

The support post ‘EE4 layout style’ 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.

Event Espresso