Support

Home Forums Event Espresso Premium Customize single event page layout

Customize single event page layout

Posted: November 16, 2017 at 9:56 am


marusceac

November 16, 2017 at 9:56 am

Hi there,

I want to customize the design of single event page, I followed this article – https://eventespresso.com/topic/ee4-single-event-template-2/ and made “singe-espresso_events.php” and added a filter in function.php then I viewed the single event page and this file “singe-espresso_events.php” was not running on single event page.

Could you please tell me what steps I follow to customize the single event layout?

I want remove some elements and modify design of current layout.

Thanks


Josh

  • Support Staff

November 16, 2017 at 9:58 am

Hi there,

May I ask which elements do you want to remove, and what part of the layout do you want to modify?


Tony

  • Support Staff

November 16, 2017 at 10:07 am

Further to the above, there was a typo in my reply in the above thread.

singe-espresso_events.php should be single-espresso_events.php

As Josh mentioned if you let us know what it is you want to change you may not need to use a custom template.


marusceac

November 16, 2017 at 10:14 am

For example,

https://peakperformanceassociates.com/events/unshakeable-confidence-workshop-2-know-reshape-future/

1. I want to make this image size small.
2. I want to change place of phone number, http://prntscr.com/hbbr70
3. I want these two boxes side by side etc…http://prntscr.com/hbbrfz


Josh

  • Support Staff

November 16, 2017 at 12:10 pm

Some of those items can be done with CSS only. For example the image size can be set with CSS (or potentially set by uploading a smaller image if you want to save bandwidth).

If you want to keep the larger image but just make it smaller (and center it!) you add the following CSS to your site’s CSS Customizer:

.espresso_event_type-single-event .fusion-post-slideshow a img {
max-width: 400px;
text-align: center;
margin: 0 auto 2em;
}

.espresso_event_type-single-event .fusion-post-slideshow ul li{
float: none !important;
}

With regards to the phone number, may I ask where do you want to move the phone number to?


marusceac

November 18, 2017 at 3:57 am

Hi there,

Can you please list file names I need to play with alignment. I am a tech guy I know PHP so I can take care of it and will not mess anything.


marusceac

November 19, 2017 at 7:47 am

Hey Josh,

Waiting to hear from you…


Tony

  • Support Staff

November 20, 2017 at 3:36 am

Hi there

Bumping your threads will have the opposite effect than intended as we view threads based on the last reply date, so bumping a thread basically moves it to the back of the queue.

Can you please list file names I need to play with alignment. I am a tech guy I know PHP so I can take care of it and will not mess anything.

If that’s the case you should easily be able to find the templates yourself, they are named in the same way as standard WP template parts and are stored within /event-espresso-core-reg/public/Espresso_Arabica_2014

Copy those to your themes root directory (preferably a child theme) to override the defaults.

Also note that, as Josh mentioned above, most of what you are asking for does not need custom templates and can be done using CSS.


marusceac

November 20, 2017 at 5:50 am

Hey Tony, thanks for this, I’ll see the files as per your given path. I dont’t want to use css because css will only help to hide some things. But I want to change position of some things so it will good if I go into core PHP files and play around.


Tony

  • Support Staff

November 20, 2017 at 8:41 am

CSS can do much more than hide things, see here:

http://www.csszengarden.com/

You can load multiple different style sheets all applied to exactly to the same html markup on that site.

You mentioned you want two elements next to each other above, that’ll be done with CSS not PHP, so as mentioned most of what you have asked for so far can be done using CSS without any custom templates at all.

Using custom templates is an option, but just seems like overkil, but either way the above location should get you going.


marusceac

November 22, 2017 at 10:27 am

Ok, let me see.


marusceac

November 22, 2017 at 11:23 am

Hi Tony,

As per your message above to overwrite the template I followed your advice in my website with AVADA theme, I copied the folder and pasted into my child theme i.e. http://prntscr.com/hdw5pz and I am trying to make some change in PHP files like I am adding a new class to phone number i.e. http://prntscr.com/hdw6zh and in PHP file I am adding like this – http://prntscr.com/hdw7fv. But it is not applying my class.

Please suggest?

I want this – http://prntscr.com/hdw89n & http://prntscr.com/hdw8nk


Tony

  • Support Staff

November 23, 2017 at 1:49 am

You don’t copy the Espresso_Arabica_2014 directory into your theme, you only copy the template you actually need to modify over and place them in the root directory of your theme.

Remove the Espresso_Arabica_2014 directory from the child theme and then assuming you are editing content-espresso_events-venues.php place that file within the root directory of your child theme.

Then confirm if the changes you made display on the event.


marusceac

November 23, 2017 at 10:23 am

Ok got it, let me do that.

The support post ‘Customize single event page layout’ 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