Event Grid Template

Posted: January 11, 2016 at 3:28 am

Viewing 15 reply threads

January 11, 2016 at 3:28 am

Hi there,

I have installed the add-on for the grid template and have a couple of questions. The link to the page I’m talking about is here:
http://www.blacktownmarkets.com/book-a-casual-stall-new/

I have created 2 setups to show the events – the first row is using the Event Grid template. The second is just the events showing using the default short code – [ESPRESSO_EVENTS]

I have a few questions, if possible.

1. How do I centre everything. Whether using standard shortcode or the Grid Template shortcode, they’re all sitting left-aligned, rather than centred. I have centred all the shortcodes in their text boxes within the theme (Avada theme).

2. Ideally, I would like to have the grid template layout, using the featured image, and the ability to book tickets below. The Event Grid Template layout is just showing an image with rollover text to link to the pages, but I would like to keep the information here as well.

3. Can I restyle and centre the ‘View Event Cart’ buttons.

Thanks for your help 🙂
Cathy

Lorenzo Orlando Caum

Support Staff

January 11, 2016 at 10:05 am

Hi Cathy, you can’t currently start a registration from the grid template as that is started via selecting an option in the ticket selector.

It looks like you are using the grid template shortcode with the [ESPRESSO_EVENTS] shortcode.

The title appears to be shifted to the right for the [ESPRESSO_EVENTS] shortcode. Here is an example:

http://cl.ly/260k0S2G2605

Based on what you have shared I think you are wanting the grid template content to be centered at the top and then the event listing content below that.

Does that sound correct?

—
Lorenzo

Andrew Keir

January 12, 2016 at 8:28 am

Hi Lorenzo,

Thanks for getting back to me. What I want (ideally), is a grid layout, with an image at the top for each event, and then the option to select tickets with the dates etc (as per the [ESPRESSO_EVENTS] shorttag.

For the purposes of this support request, I included both shortcodes (the event grid template and the espresso_events), but I would like to use only one or the other.

So, I guess my questions is…is this possible? Also, how do I turn off the title that says ‘Upcoming Events’?

Thanks,
Cathy

Lorenzo Orlando Caum

Support Staff

January 12, 2016 at 9:17 am

Hi Cathy,

That will work but the registration flow may be different than what you are expecting.

If a registrant/attendee clicks on an event from the events grid, then they will be taken to that single event page. They won’t be brought down the page to make the ticket selection.

Here is how to remove the title:

https://gist.github.com/lorenzocaum/57b5bf02911d2995c2a1

It could also be done with CSS.

—
Lorenzo

Andrew Keir

January 12, 2016 at 12:30 pm

Hi Lorenzo,

Thanks for your reply. Could you give me the CSS to hide it as well?

Thanks,
Cathy

Andrew Keir

January 12, 2016 at 12:32 pm

Hi Lorenzo,

Also, could I have the code to recolour the buttons, and move them left-aligned.

Cheers,
Cathy

Lorenzo Orlando Caum

Support Staff

January 12, 2016 at 3:24 pm

Hi Cathy,

This CSS will hide the title:

.page-id-4757 h1.page-title { display:none; }

Try this CSS for centering the button under the ticket selector:

.page-id-4757 .ticket-selector-submit-btn.ticket-selector-submit-ajax {float:left; margin-left: 225px;}

The button color is coming from your theme. What color would you like the button to be?

—
Lorenzo

Andrew Keir

January 13, 2016 at 2:08 am

Hi Lorenzo,

Thanks, that code worked. I need the button to be red, which I’ve set up in the theme options, but doesn’t seem to be pulling through.

And sorry…one last question! Can you see any reason why the events aren’t sitting centred on the page?

Thanks,
Cathy

Tony

Support Staff

January 13, 2016 at 2:52 am

Hi Cathy,

If you want all of the elements centered you’ll need some different custom styles.

Remove the styles Lorenzo gave you above to center the button and use these:

article.espresso_events {
    text-align: center;
}

.tkt-slctr-tbl {
    margin: 0 auto;
}

.ticket-selector-submit-btn {
    margin: 0 auto;
    float: none;
}

That will center all of the EE elements on the page.

The theme still appears to be setup to use Green for the button colours, we can add styles to override this within the EE but it would be much better to do that through the theme.

It looks like there have been custom styles setup for buttons and the ticket selector buttons have been added to that, do you have a custom CSS section within your theme?

If search there for ‘.ticket-selector-submit-btn’

Andrew Keir

January 14, 2016 at 2:36 am

Hi Tony,

Thanks for your reply. I’ve set the overall theme colour to red, and in the options I’ve been able to customise the buttons a bit.

The code above for ticket-selector-submit-btn doesn’t appear to be selecting the buttons. The rest worked to centre the other parts of the events layout.

If I use Lorenzo’s code, it works on this page, but as it’s targeting the specific page, I’m not sure that’s the best approach long term? It also means a line of the same code for each of the separate single events pages.

Any help or insight much appreciated!

Thanks,
Cathy

Tony

Support Staff

January 14, 2016 at 2:50 am

The ticket selector code I provided works with:

article.espresso_events {
    text-align: center;
}

Which it seems your not currently using, is that right?

Its actually that code that centers the button, but when the button is floated right (by default) that doesn’t apply, so then:

.ticket-selector-submit-btn {
    float: none;
}

Removes the float and lets text-align do its magic, the margin: 0 auto; line is additional just to be sure but isn’t actually needed.

So if I use all of the code i provided above the page looks like this – http://take.ms/G0wPJ

Is that not what you are looking for?

Tony

Support Staff

January 14, 2016 at 3:01 am

Ah, ok. I checked on your page and can see why.

Chrome inspector rules have a higher priority than your custom CSS so whats happening is the float: none rule is being overriden by the default styles.

Change

.ticket-selector-submit-btn {
    margin: 0 auto;
    float: none;
}

.espresso-event-list-wrapper-dv .ticket-selector-submit-btn {
    margin: 0 auto;
    float: none;
}

That should work.

Andrew Keir

January 14, 2016 at 9:24 am

Hi Tony,

Thanks so much, that worked!

I thought it might centre the buttons on the single events page too – but it hasn’t done so:

http://www.blacktownmarkets.com/new-events/17-january-2016-10-off/

Would you mind taking a look at this one too? Sorry to be such a pain 🙂

Thanks,
Cathy

Tony

Support Staff

January 14, 2016 at 11:01 am

Something like this:

.espresso_events .ticket-selector-submit-btn {
    display: block;
    float: none;
    margin: 0 auto;
}

Generally when we provide CSS we’ll try to make it apply to specifically what your asking for, otherwise you could ask for css that applies to the single event page that then breaks the event archive listing. So we are usually careful to keep our selectors a little specific (although not all the time).

With the above you may find it conflicts with the rules for the archive page, it should still work as expected, but if not let me know after you have applied it to the site and I’ll take another look.

Andrew Keir

January 15, 2016 at 12:41 am

That’s worked. Thanks so much for your help!

Tony

Support Staff

January 15, 2016 at 1:39 am

You’re most welcome, Cathy 🙂

Just let us know if you have any further problems.

Viewing 15 reply threads

The support post ‘Event Grid Template’ 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 Premium
Attendee Mover Add-on
Automated Event Notifications Add-on
Events Calendar Add-on
MailChimp Integration
Multiple Event Registration Add-on
Printable Tickets Add-on
Wait List Manager Add-on
WordPress User Integration

Support

Topic Tags

Notifications