Support

Home Forums Event Espresso Premium layout and walkthrough

layout and walkthrough

Posted: December 3, 2018 at 5:30 am


Davidfine

December 3, 2018 at 5:30 am

Crazy that I spent $80 to get one to one support time and I have to leave a post here… strange approach.

I have questions on layout and function… but would much rather talk to someone via chat / skype.

Thanks.


Josh

  • Support Staff

December 3, 2018 at 6:42 am

Hi David,

Thanks for reaching out today. Since we do not offer chat or Skype support, we can refund the $80, and we can answer your questions here, or via email if you prefer.

With regards to your comment:

The layout is terrible.

If you can send a screenshot of an improved layout, we can give you the steps to snap that layout into shape. Usually this involves adding a few CSS tweaks to override the theme’s styles.


Davidfine

December 3, 2018 at 6:46 am

This reply has been marked as private.


Davidfine

December 3, 2018 at 1:16 pm

This reply has been marked as private.


Josh

  • Support Staff

December 3, 2018 at 2:00 pm

I would like to see some cool examples of people using the system and their layouts… do you have any?

You’ll find some examples in the showcase:
https://eventespresso.com/showcase/

My idea would be that this button would link to a page which has multiple listings for this course

After you’ve set up some events, you can display multiple listings by setting up a category, assign the similar events to a category, then display on a page using a shortcode like this:
[ESPRESSO_EVENTS category_slug=your-category-slug]

Then, you can configure how the output of the shortcode looks by going to Event Espresso > Events > Templates, and change the settings under “Event List Pages”

Would be cool then if those listings then opened up a main page for that listing, similar to this – https://eventespresso.com/use-cases/seminars/

The page that the screenshot is from the demo site:
https://demoee.org/use-cases/events/seminar-introduction-to-wordpress/

and that page is the “native” single event post. You can get the same look with the “twentysixteen” WordPress theme, available from here:
https://wordpress.org/themes/twentysixteen/

how do i remove the “online event registration…”

You go to Event Espresso > General Settings > Admin Options and set “Link to Event Espresso in your Registration Page?” to No. Then you click Save.

When you click “show details” what appears is a real mess… do you have an example of how this should look please?

It will normally look like what’s in the demo:
https://demoee.org/use-cases/events/seminar-introduction-to-wordpress/
If you click the “show details” link you’ll see how it should look.

If you intend on using that theme, you can get a head start on cleaning up the mess it makes of html tables by adding the following CSS to its custom CSS panel:

table td, table th {
text-align: left;
border: 1px solid #efefef;
}
table {
max-width: 800px;
font-size: 20px;
border: 1px solid #efefef;
}


Davidfine

December 4, 2018 at 3:20 am

This reply has been marked as private.


Davidfine

December 4, 2018 at 3:40 am

This reply has been marked as private.


Tony

  • Support Staff

December 4, 2018 at 6:41 am

Anymore tips to clean it up please?

The look of the site is subjective so it really depends on what you want to change, how I like to display tables will not be how you would, personally I think the current output is fine but no everyone will.

the “register now” button is in the corner…

May I ask, where would you prefer it to load?

also when you click “show details” what should be in the “Details” and “price” area?

‘Details’ loads the ticket description, click the <span class=”gear-icon dashicons dashicons-admin-generic”></span> icon on your ticket and input some text in the description field – http://take.ms/89hWF

‘Price’ will show a breakdown of how the price is calculated on that ticket, if you have price modifiers on the ticket, that’s were you would view those. For a ticket with a just a simple price set, it just lists the price you set in the editor.

Also in “Access” can we control what is shown in here like “remaining” etc? Maybe show “location” instead?

There some options on what is shown in that section in:

Event Espresso -> Events -> Templates -> Ticket Selector Template Settings

You’ll see ‘Show Ticket Details?’ to completely remove that section and ‘Show Ticket Sale Info?’ which removes the sale counts in the ‘access’ section.

Adding location could be done but you’ll need custom development, are you familiar with PHP?

Can I clone an event to edit it simply? I.e. Same course in multiple locations and different times.

Yes, there is a ‘duplicate’ button under the event title – http://take.ms/lxuWP

https://www.bmatcrashcourse.com/register/
https://6med.co.uk/shop/courses/bmat-21-july-2018/ (woocommerce?)

Neither of those are using Event Espresso.

http://www.vpclasses.com/events/ – is this your page?

The problem with that question is ‘our’ event list page looks different depending on your theme. The default Event List for Event Espresso is the post archive for posts so the how that looks depends on the theme and if the theme author spent time building out the archive template.

So, yes, that is our event list, but the output is very much controlled by the theme, we just inject the event content into the templates. The reason for this is so that Event Espresso continues to follow the styles of your other ‘posts’ within your site.

http://www.vpclasses.com/events/adobe-indesign-cc-level-1-dec-6-7-2018-2/ – and this?

Again, yes, that’s our single event page, which is just a single post template from the site’s theme, so the exact look changes from site to site. The event content is generally the same, but how its presented can change depending on what the theme is doing.

https://foodatheart.co.uk/food-at-heart-events/ – is this yours?
https://www.eventbrite.co.uk/e/londons-first-zero-waste-christmas-market-tickets-50823767256 – hmm.. the link they go to isnt..

Thats our Event Grid template but the site is running a modified version to output the details how they prefer. The links used on that site go to event brite, for that they are just using the ‘Alternative Registration URL’ feature within the Events – http://take.ms/CrV7f

If you set a URL there, any links to the event use that link, if its external (like above) that’s were the user goes…. so yes its our output, customized and then used to link to eventbrite.

https://saanys.org/event/financial-friday-webinar-10-financial-myths-demystified/ – is this your page? when you click”register now”it goes to an external site?

No, that’s using a different events plugin, you can do something simiar with EE using the feature mentioned above.

Is this yours? – https://www.dancecool.be/danskampen/

No, that’s custom, they are displaying EE events but using their own output, we don’t have any kind of selector/filter as shown on that page.

https://www.dancecool.be/evenementen/disco-showdance-kamp-2019-danskamp-in-de-zomervakantie/

Yes, that’s a single EE event page but again, it’s the theme that controls the majority of the output.

Is this yours? – https://londonschoolofphotography.com/event-registration/?ee=1912

It is yes, but, that’s Event Espresso 3 which is the ‘older’ version of Event Espresso, all development time is now spent on EE4 (any time you see ?ee=xx that’s likely going to be EE3 or possible EE4 with customizations, but most likely the former)

If I have a course that runs every Tuesday from 15th Jan – 2nd April, but after 15th Jan, there is no more entries… course is closed…how do I set that up please?

In short, manually. Event Espressod doesn’t currentl support ‘recurring events’ in that you can’t create an event that runs weekly for x amount of weeks.

You need to either create multiple datetimes (and tickets) within a single event, one datetime for each ‘instance’ of the event and a ticket to allow registrations onto that datetime…

Or, you create multiple single events, each with a single datetime for that specific week.

We can provide more specific details on setting this up, but point being there isn’t an option to generate X amount of weeks for an event, you need manually create multiple events, or multiple datetimes in an event


Tony

  • Support Staff

December 4, 2018 at 6:46 am

How do I control the size of the featured image and layout of this page please?

You can change the size of the image with some CSS:

article.espresso_events .ee-event-img {
    width: 200px;
}

How do I style this page please? and where is the link to buy?

The link to buy button is the ‘register now’ button, they need to select a qty of tickets and click ‘Register now’.

As for styling that page its based on your theme, can you send me a copy of the theme so I can take a look? You’ll likely need a custom template for EE single events.

You can send a copy to support[at]eventespresso.com


Josh

  • Support Staff

December 4, 2018 at 6:48 am

Is this your plug in? https://hangworkshop.com/

Yes, hangworkshop.com uses Event Espresso for their class registration & event calendar.


Davidfine

December 5, 2018 at 7:58 am

This reply has been marked as private.


Josh

  • Support Staff

December 5, 2018 at 8:06 am

Hi,

It was probably Tony that downloaded your theme.

If you can clearly define what you mean by getting the theme to “look decent” & “style up”, e.g. “Change this {specific element on a specific page} to have this {specific change to element}”, we’ll have something actionable to work with.


Davidfine

December 5, 2018 at 8:46 am

This reply has been marked as private.


Josh

  • Support Staff

December 5, 2018 at 8:59 am

I would suggest a design like this for listings…(also remove read more… i think its just doing the same job as “view details”

Can you post a link to the page? The screenshot is helpful, but we’ll need to see the source to move forward on this.

The part where you want to remove “Upcoming Events” is something you can do by adding a show_title parameter to the [ESPRESSO_EVENTS] shortcode. You can add the parameter like this:

[ESPRESSO_EVENTS show_title=false]


Davidfine

December 5, 2018 at 9:09 am

This reply has been marked as private.


Josh

  • Support Staff

December 5, 2018 at 9:59 am

You can add the following CSS to change the elements within the event list entries:

/* set up wrapper */

.espresso-event-list-wrapper-dv .event-content {
display: flex;
flex-flow: row wrap;
}
.espresso-event-list-wrapper-dv .event-content > div {
margin-top: 2rem;
}

/* move button */
.espresso-event-list-wrapper-dv .event-content form {
order: 4;
}

/* smaller heading text */
.event-header h2 {
font-size: 18px;
}

/* button */
input.view-details-btn {
margin: 20px 0;
padding: 16px 64px;
font-size: 16px;
font-weight: bold;
background-color: #fff;
border: 2px solid #000;
color: red;
text-transform: uppercase;
cursor: pointer;
}

/* hide read more link */
.espresso-event-list-wrapper-dv .event-content > p > a {
display: none;
}

I’m not sure what you want moved to 3 columns though, can you explain?


Davidfine

December 5, 2018 at 10:20 am

This reply has been marked as private.


Josh

  • Support Staff

December 5, 2018 at 10:51 am

Ok.

You will need to add a division wrapper around the shortcode to allow for 3 columns (normally not necessarily, but the Visual Composer plugin really mucks up the markup)

e.g.
<div id="ee-event-list-wrapper">[ESPRESSO_EVENTS show_title=false]</div>

Then, you can add more CSS to your stylesheet to achieve a column layout:

/* add 3 column grid if viewport is 960px or wider*/
@media screen and (min-width: 960px) {
#ee-event-list-wrapper {
  display: grid;
  grid-column-gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
}
}


Josh

  • Support Staff

December 6, 2018 at 10:39 am

Are you still there?

Here’s some additional CSS that will help snap the elements into place on the single event view. The EventBrite layout you shared isn’t really possible because of the differences of html markup between the two.

.espresso_events-template .event-content {
max-width: 1080px;
margin-left:auto;
margin-right:auto;
padding-left: 10px;
padding-right: 10px;
}
@media all and (min-width: 800px) {
.espresso_events-template .event-content {
display:flex;
flex-flow: row wrap;
}
.espresso_events-template .event-content  > * {
    flex: 0 1 auto;
}

.espresso_events-template .event-content  >  p {
  width: 60%;
  order: 3;
}

.event-tickets { 
  order: 1;
  width: 60%;

}
.event-datetimes { 
  padding: 10px 30px;
  order: 2;
  width: 30%;

  
}
.espresso-venue-dv { 
  padding: 10px 0;
 align-self: flex-start;
  order: 4; 
  width: 60%;
}

}

.ee-event-datetimes-li {
float: none;
width: auto;
}

.ticket-selector-submit-btn {
background-color: #129451;
border: none;
padding: 10px 60px;
color: #fff;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}


Davidfine

December 7, 2018 at 2:57 am

This reply has been marked as private.


Josh

  • Support Staff

December 7, 2018 at 9:54 am

A few fixes I can suggest for those dates:

1) Change this:

.event-datetimes { 
  padding: 10px 30px;
  order: 2;
  width: 30%;
}

to this:

.espresso_events-template .event-datetimes { 
  padding: 10px 30px;
  order: 2;
  width: 30%;
}

and change this:

.ee-event-datetimes-li {
float: none;
width: auto;
}

to this:

.ee-clearfix .ee-event-datetimes-li {
float: none;
width: auto;
}


Davidfine

December 17, 2018 at 3:47 am

This reply has been marked as private.


Tony

  • Support Staff

December 17, 2018 at 4:11 am

How do I disable “show details” it’s not necessary for these courses.

For only those courses? Or everywhere?

If you want to disable that sitewide you can use the option within EE:

Event Espresso -> Events -> Templates -> Ticket Selector Template Settings (bottom of the page)

Set ‘Show Ticket Details?’ to No and save.

If you only want to hide that link on the above event only, you can use some CSS:

#tkt-slctr-tbl-wrap-dv-273 .display-tckt-slctr-tkt-details {
    display: none;
}


Davidfine

December 17, 2018 at 4:13 am

This reply has been marked as private.


Davidfine

December 17, 2018 at 4:21 am

This reply has been marked as private.


Tony

  • Support Staff

December 17, 2018 at 4:22 am

I want to create an event listings page for specific events… can i list them by their IDs or something?

Not with our shortcodes, you would need to add them to a category and then use the category slug to pull them in.

How are you planning on ‘listing’ the events? You’re going to need some custom development if you want the output to look similar to the link you posted.


Davidfine

December 17, 2018 at 4:25 am

This reply has been marked as private.


Davidfine

December 17, 2018 at 4:57 am

This reply has been marked as private.


Josh

  • Support Staff

December 17, 2018 at 8:32 am

Hi David,

With regards to multiple categories in one shortcode, the shortcode can only accept one category. What you can do instead is install the Display Posts Shortcode plugin and use its shortcodes to display an event list filtered by multiple taxonomies. The plugin can be downloaded from here:
https://wordpress.org/plugins/display-posts-shortcode/

Then, in order to filter by both “Gentle-intro-7-8-Year-Olds” and “half-term”, one of them will need to be a tag (instead of a category). So for example, “Gentle-intro-7-8-Year-Olds” can be an event category, and “half-term” can be a tag. Then, to display a list of events that are in the “Beginner” event category AND are tagged “All”, you’d use this shortcode:

[display-posts post_type=”espresso_events” taxonomy=”espresso_event_categories” tax_term=”gentle-intro-7-8-year-olds” taxonomy_2=”post_tag” tax_2_term=”half-term” tax_operator=”AND” order=”DESC”]

Then, one other thing you might want to do if you don’t want past events displayed in that list, is add this code to a functions file/plugin on your site:

https://github.com/eventespresso/ee-code-snippet-library/blob/master/templates/de_ee_filter_events_out_with_expired_tickets.php

You can add the above to a functions plugin or, if applicable, into your WordPress child theme’s functions.php file.

What that will do is make it show only events that are available for registration, so past events will not be displayed.

You’ll note the output of the [display-posts] shortcode is much simpler than the [ESPRESSO_EVENTS] shortcode, but you may need to work with your developer to achieve the layout you’re looking for.

The support post ‘layout and walkthrough’ 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