Support

March 22, 2019 at 6:16 am

Hi Melanie,

Do you offer Custom CSS support for styling?

Can you clarify what you mean by this, please?

You can add additional CSS styling to your theme’s styles to target EE’s elements if preferred, but I’m not sure if that what you are referring to.

Are you able to offer help with how to style the new page in a similar way to the old site?

Event Espresso applies minimal styling to most of its output and relies on the theme’s styling, the reason for this is it allows our output to be styled consistently with the rest of your site. We don’t override the styles your theme is applying with our own which means EE will automatically look similar to the rest of your site.

However, the output from here:

https://themaxim.com/event-category/maximum-copy/

Is not the default EE output so its not just CSS styling being applied there, that’s a custom table being generated by something on the site.

The table has a class of sessions_table (which is not something EE uses) and theres specific styles for that output in the themes styles.css file but to get that to work and look exactly the same your going to need your own custom table on the next site.

Also not sure where to address styling for the registration page.

Can you explain further what you want to style?

EE doesn’t have a ‘Custom CSS’ section for you to add styles to, but in short, it doesn’t need one. You add your custom styles to either the themes styles, or you could use a custom CSS plugin if needed.

March 26, 2019 at 3:47 pm

A lot of what you are asking for is effectively re-applying customizations a developer has made on the original site to the new one, which is not something we would normally cover under support.

However, here is what I can answer:

ON COURSE CATGEORY PAGES

Are you not adding the ticket selector to this section now then? (I added details on how in my previous reply)

The reason I’m asking is it changes some of the sections you are requesting to change.

Change “Upcoming events” text from H1 to H3 (with H3 styling from Theme Options)

To do this you need to be using a child theme as you need to load a custom version of the template EE uses, or at least a custom theme that you full control, are you using either of those?

Reduce blank space under Event Title

There’s a BR included in the form (where the button is located), you can hide the space from that using:

.espresso-event-list-wrapper-dv .event-content form br {
    display: none;
}

But this may change if you add the ticket selector in.

Hide “add to iCal” link

Whilst you can do that with CSS, I’d recommend adding a small snippet of code to the site to remove the feature rathr than leaving it in and then hiding it.

The snippet is here:

https://gist.github.com/joshfeck/1bc3731cd1c468916c7f

You can add that to a custom functions plugin on your site, we have some documentation on creating one here:

https://eventespresso.com/wiki/create-site-specific-plugin-wordpress-site/

Style “View Details” button to match Default Button, as seen here https://maxim.bantergroup.com.au/courses/. Default Button settings from Theme https://pasteboard.co/I796imq.jpg. Text color is #4d4d4d and Hover Background Color is #9498ad

As it stands EE would need to have the button class added to it from your theme to allow your theme’s styles to target that button but we don’t have an option to do that currently, the other option is to copy the current styles into their own CSS selector that does apply to the button but it means any changes made in the theme panel will not apply, you’d have to update the CSS in use manually to match.

So are the buttons styles you are using now final?

Change “View Details” button text to “Register”


This can be done (you’ll need another snippet to do it), but if you are going to include the ticket selector in the event lists anyway, this will change automatically.

So are you adding the ticket selector?

ON COURSE PAGES

Hide “show details+” text

We have an option for this in the plugin:

Event Espresso -> Events -> Templates -> Ticket Selector Template Settings
-> Show Ticket Details?

Set that to no and save.

Align “Details” and “price” columns better, similar to the existing site https://themaxim.com/events/maximum-copy-brisbane-april-2019/

You can left align the ticket selector table using:

.tkt-slctr-tbl thead th, .tkt-slctr-tbl tbody td {
    text-align: left;
}

Style “Register Now” button to match Default Button, and move location to underneath, as per existing site https://themaxim.com/events/maximum-copy-brisbane-april-2019/

Same issue regarding the CSS class and styles as the previous button, so before selecting a method to do this, are the styles currently in use final?

To move the button below on the left you can use:

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

Can Quantity buttons be styled as per existing site?

No, not with just CSS at least as the old site is using some jQuery to add additional elements and style those.

Hide “add to iCal” link

This is done with the snippet I provided earlier, it’s the same output just in another location so it removes it in both pages.

Remove link from Venue city name, as it goes to a page with no useful info

That links to the venue’s custom page, looking at it it looks like you’ve not added anything to the venue details page.

The link can be removed but usually users add venue details there so are you sure you want it remove rather than adding details to the venue?

Event Espresso -> Veneus -> {Venue}

ON REGISTRATION (CHECKOUT) PAGE

Hide “Details” below Event Title

You can use:

#spco-attendee_information-dv .spco-ticket-info-dv h5 {
    display: none;
}

Change “Name and Description” to “Description”

This can be done but needs some PHP, I can give you an example that can go in the same custom functions plugin you create from earlier but checking your comfortable with that first?

Left align Column headings, eg. “Description” and “Price”

You can use:

.spco-ticket-info-dv thead th, 
.spco-ticket-info-dv tbody td {
    text-align: left;
}

March 29, 2019 at 10:47 am

I’ll work through all your notes. I’m not going to add the Ticket Selector to these pages

You can use this snippet to change the ‘View details’ text:

https://gist.github.com/lorenzocaum/04209991359866938dc0

Change the REPLACE ME text with whatever you prefer to be displayed on the button.

I hadn’t planned on using a Child theme – I find I can normally make all the changes I need by using the Code Snippets plugin, but can install Child theme if needed.

It all depends on the change you are trying to make, you can’t change/remove the link to the venue page using a snippet.

You’ll need a child theme, then copy:

\event-espresso-core-reg\public\Espresso_Arabica_2014\content-espresso_events-venues.php

To your child theme’s root directory and set line 9 to be:

$venue_name = espresso_venue_name( 0, 'none', FALSE );

April 1, 2019 at 7:38 am

1. Across ALL Event Espresso pages, style buttons to match Default Button, as seen here https://maxim.bantergroup.com.au/courses/. Default Button settings from Theme https://pasteboard.co/I796imq.jpg. Text color is #4d4d4d and Hover Background Color is #9498ad

Yes, because I asked a question on whether or not the current styles were final which I think you’ve missed, but here is a method that adds an additional class to some of EE’s buttons so that your theme’s styles should apply:

https://gist.github.com/Pebblo/d321818666fb1ba33140558744fe9b82

That function adds a ‘qbutton’ class to the ticket selector button and the SPCO checkout buttons.

2. On Course Pages, eg. https://maxim.bantergroup.com.au/course/maximum-copy-brisbane-april-2019/ how do I hide the information that I’ve now added to the Venue pages? The section I wish to hide is detailed on this screenshot https://pasteboard.co/I84AFMD.jpg I’m a bit confused that the Brisbane word is a link that then takes you to exactly the same information as displays on the previous page. I tried selecting NO for ‘Display Venue Details’ in the Settings but that then Hides everything.

For this, you need a child theme to do it properly, you can hide those details using CSS but one issue with that is Google maps is no longer free, loading it and then hiding it means you are paying for wasted page loads.

The file that loads that content, is also the same file you need to edit to remove the link from the Venue name (which you have as the location) so either of those fixes require you load a custom version of the template.

3. Are you able to provide a Code Snippet (similar to provided above) to change the text on the ‘Proceed to Finalize Registration’ button on the Registration Checkout page?

We have examples of updating the string used on that button here:

https://eventespresso.com/wiki/customize-checkout-registration-button-text/

Also Custom CSS to left align this button as we’ve done on the other pages.

For the alignment, try:

.spco-whats-next-buttons {
    text-align: left;
}

I have installed the Code Snippets plugin and have used that for a couple of your changes. At this stage I’m NOT using a Child Theme.

Some changes can be made using snippets, others need to be done using templates and those need a child theme.

April 9, 2019 at 9:02 am

Yes, I added this into Code Snippets https://gist.github.com/Pebblo/d321818666fb1ba33140558744fe9b82 Tried adding as one snippet, and also splitting into two. It doesn’t appear to be changing that first REGISTER button, seen here https://maxim.bantergroup.com.au/courses/maximum-copy/

Actually, my mistake.

Your Register button is the ‘view details’ button, which I thought was also passed through the filter I mentioned…. but digging into the code, it’s not.

Looking into this right after this reply and will update my gist shortly.

I agree about the red warning labels … unfortunately the very creative client has other ideas about how he would like it to look … Thanks for the Custom CSS, but it doesn’t appear to have changed the text below the fields, just the text in the popup. Any other ideas? https://pasteboard.co/I9fYubP.jpg

The text you’re referring to doesn’t have those styles applied, so my CSS isn’t working at all.

Because EE uses !important to set the colour both it and my CSS have the same specificity, meaning whichever one loads ‘last’ on the page will win.

Hmm, let’s try getting a little more specific with my CSS to see if that works, so try this:

#ee-single-page-checkout-dv .ee-asterisk, 
#ee-single-page-checkout-dv .ee-input-error, 
#ee-single-page-checkout-dv label.ee-required-text {
    font-weight: normal;
    color: blue !important;
}

Hi again – just a quick revisit of one of the above issues – I’ve installed the Child Theme – are you able to assist with removing all the information on this page, from “Description” down? https://maxim.bantergroup.com.au/course/maximum-copy-brisbane-april-2019/

Copy \event-espresso-core-reg\public\Espresso_Arabica_2014\content-espresso_events-venues.php

Into the root directory of your child theme.

You’ll need to remove the calls to whatever you don’t want included on the page from that file, for example to remove the map, remove:

<?php espresso_venue_gmap( $post->ID ); ?>

To remove the description etc after the map, you’ll have:

<?php  if ( espresso_venue_has_address( $post->ID )) : ?>
	<strong><span class="dashicons dashicons-location-alt"></span><?php _e( 'Address:', 'event_espresso' ); ?></strong>
	<?php espresso_venue_address( 'inline' ); ?>
	<div class="clear"><br/></div>
<?php endif;  ?>

Then after that remove everything up to the closing </div> tag on line 54.