Support

Home Forums Event Espresso Premium EE4 Modification of Single Event Page with 907 Parallax

EE4 Modification of Single Event Page with 907 Parallax

Posted: October 21, 2014 at 2:48 pm

Viewing 10 reply threads


Nathan McLean

October 21, 2014 at 2:48 pm

Hello

I am using EE4 and the 907 parallax theme, and would like to make some minor modifications to the layout of the single event page. I essentially want to re-order the display of some things, make minor tweaks to words used (e.g. avoid the word “ticket” and also change the list layout of the dates and ical invites).

I have searched the forums and followed the instructions relating to copying certain php files from:

/wp-content/plugins/event-espresso-core-reg/public/Espresso_Arabica_2014

to:

/wp-content/themes/ninezeroseven

I specifically made copies of the following two files:

content-expresso_events.php
single-expresso_events.php

When I do this, I find I am able to make modifications, but the entire layout of the page has also changed significantly (I suspect due to the 907 theme css file being applied rather than the event expresso css file).

What should I do to be able to make the modifications I need, but at the same time keep the overall style of the page as it was before the files were copied to my theme folder?

Thanks!
Nathan

P.S. The website address is https://www.claymatter.com.au, but it is not yet live as we need to finalise the setup before launch. I would be happy to provide screen shots over email if that will help you understand the problem I am experiencing.


Lorenzo Orlando Caum

  • Support Staff

October 21, 2014 at 4:20 pm

Hi Nathan, we can help you with this. Lets work on these in different steps to minimize confusion.

For the ticket verbiage, please try this in your child themes’ functions.php file or a site specific plugin:

https://gist.github.com/b4bbd1bb839a1c80b2b4

Are you trying to change the order of the content on the single event pages (there are different ways to handle this)?


Lorenzo


Nathan McLean

October 23, 2014 at 1:48 am

Hi Lorenzo thanks for your fast response.

To make it easier for you to help me, I have made my website live. The website address is https://www.claymatter.com.au and one of the EE4 registration pages that I’ve created for testing can be found at: https://www.claymatter.com.au/events/modelling-for-consulting-strategy/

I have incorporated your function code into my functions.php file and have had some success. I have seen that some of the strings that include the word “ticket” now have been replaced with “registration”, but this has not worked for all of them. For example, if you go to the registration page address above, you will still see phrases like “Total Ticket Price”, “This Ticket Sold”, “This Ticket Left”, etc

I tried updating the function to simply say replace all instances of ticket with registration, but that didn’t work.

In terms of the other changes I am hoping to make, they are as follows:

1. I would like the “Available Registrations” heading and the small ticket icon to the left of it removed;
2. I would like the Qty* field and corresponding radio boxes removed (as we will always only sell one registration at a time);
3. I would like to remove the entire “show details” expanded section and instead simply display the “total spaces left” number next to the price (in other words, remove the Qty and radio box and instead have the spaces remaining number there;
4. I would like the session times to not be displayed in a long list, but instead in a tabular format (perhaps three columns)
5. I would like the description of the event (which currently comes after the calendar invites) to be at the top, immediately beneath the picture;

If we can knock these out that will be awesome!

Cheers
Nathan


Lorenzo Orlando Caum

  • Support Staff

October 23, 2014 at 9:08 am

Hi Nathan,

I’ve updated the gist:

https://gist.github.com/lorenzocaum/b4bbd1bb839a1c80b2b4

Please move the new version into place.

Also move this gist into place under the gist above:

https://gist.github.com/a33405557a2a065779ea


Lorenzo


Nathan McLean

October 24, 2014 at 6:13 pm

Hi Lorenzo

Thanks for this. I’ve added the two pieces of code to the functions.php file, and both appear to have worked. I made a few additions to the “ticket verbiage” code to pick up a few additional “ticket” references. It looks like they’ve all been captured now.

The course description is now showing up beneath the photo, which is excellent! So that deals with item 5 in my to-do list. I guess the next item to address is item 1, which is removing the “Available Registrations” heading and the ticket icon that is to the left of it.

Cheers
Nathan


Lorenzo Orlando Caum

  • Support Staff

October 25, 2014 at 4:48 pm

Hi,

This CSS will remove that:

.event-tickets .ee-icon.ee-icon-tickets {display:none;}

In the gist example (https://gist.github.com/lorenzocaum/b4bbd1bb839a1c80b2b4), set the first line to nothing. Change this:

‘Available Tickets’ => ‘Available Registrations’,

to this:

‘Available Tickets’ => ”,

That will remove that heading.


Lorenzo


Nathan McLean

October 25, 2014 at 8:20 pm

Love your work Lorenzo. That worked beautifully.

Item 2 we can ignore (I’ve replaced *Qty with the word “select” which serves my purposes well – I realised we can’t delete the radio boxes entirely as it is necessary for users to select which type of registration they need).

So the next item to work on is item 3, which is about removing the “show details +” sections and instead simply showing the number of available spaces (to the right of the Price, but before the radio buttons).

Cheers
Nathan


Dean

October 27, 2014 at 7:49 am

Hi Nathan,

Hiding the “show details” sections are easy enough, but only showing the available attendees is harder. The best you could do without getting into the PHP would be to hide all the sections barring the Event Access section.

.tckt-slctr-tkt-price-sctn,
.tckt-slctr-tkt-sale-dates-sctn {
display:none;
}


Nathan McLean

October 28, 2014 at 1:58 am

Hi Dean, thanks for your help. I’ve added that code to the css and it has worked well.

Given the “show details” section already has the dates and times of the sessions, I would like to delete the section below that contains all the iCal invites. Is that hard to do?

Also, how do I delete the large “Registration Details” heading in the “show details” section? I’d like the “show details” section to begin from the smaller “session details” heading.

Thanks!
Nathan


Dean

October 28, 2014 at 3:20 am

Hi,

CSS can again help here.

This will hide the datetimes section (the bit with the dates and icals)

.event-datetimes { display:none; }

This should hide the title in the show details section

.tckt-slctr-tkt-details-sctn h3 { display: none; }


Nathan McLean

October 28, 2014 at 6:21 am

Thanks Dean, that has worked perfectly. Which rounds out all my issues! Thanks both Dean and Lorenzo for your help!!

Viewing 10 reply threads

The support post ‘EE4 Modification of Single Event Page with 907 Parallax’ 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