Looks of booking form

[Evert]

Hi Stephen,

I would like to change the appearance of the booking form. Do you want to give me a tip which files I have to adjust for that. I use a child theme and currently it looks like this with my theme.(full page with, not by choice. I am using Elementor Pro)

[Evert]

https://i752.photobucket.com/albums/xx166/Volvoknuppel/Schermafdruk%202019-10-01%2012.49.26.png

[Stephen Harris]

Hi Evert,

The booking form templates can be found in event-organiser-pro/templates (e.g event-organiser-pro/templates/eo-booking-form.php, or event-organiser-pro/templates/booking-form/ for individual fields).

What I think you want to edit though is the template used for the event page (so that’s not full-screen).

By default (and assuming you don’t have a single-event.php template in your theme). the plug-in uses page.php and injects content for the event page. If you create your own single-event.php in your (child) theme, the plug-in will automatically use that.

It’s recommended to pick an existing template from your theme that matches closely what you want, copy it and name it single-event.php and then add the line

 <?php eo_get_template_part( 'event-meta', 'event-single' ); ?>

where you want the event information to go. Of course, you don’t have to do that, and the plug-in provides a range of functions for displaying dates etc.

Some more information on templates is provided here: http://docs.wp-event-organiser.com/theme-integration/how-do-i-customise-the-templates/

[Evert]

Again a super support.

If I follow your instruction, the entire css seems to disappear. All content is there but without formatting.

I use the Astra theme and as soon as I delete the renamed singel.php (to single-event.php in Child-theme) the layout returns.

I haven’t added anything yet.(except the standard template content)

I also tested whether the default setting, on or off of EO organizer, still makes a difference. Unfortunately not.

What am I doing wrong?

[Stephen Harris]

Hi Evert,

What happens if you copy the single.php from the parent theme and name it single-event.php – or is that what you had done?

If you do that then an event should look the same as a post in the theme (generally speaking).

I’ll take a look at the Astra theme

[Evert]

That is indeed what I have already done. What strikes me is that the theme is divided into parts and the css location is not standard.

[Stephen Harris]

Hi Evert,

I’ve taken a look at this, and ‘out of the box’ Astra and the event page look fine.

When I enable ‘full width / stretched’ in the theme customiser, then content area is full width (which results in the event form being aligned against the left side of the screen – the ticket selection table is full-width but the fields themselves are not stretched ).

I’m not sure if the theme supports changing the layout on particular pages or not, but otherwise you could add your own styling through the child theme. E.g.

.single-event .ast-post-format-.single-layout-1 {
    max-width: 900px;
    margin: auto;
}

will limit the width of the event page and center it.

[Evert]

Hello Stephen,

I was able to adjust everything. The css could not be adjusted via the childtheme but it does work via the Theme Astra customizer (extra ccs option)

Thank you for the assistance

[Author]

Posts