Support

Home Forums Event Espresso Premium EE4 Calendar Plugin Customization

EE4 Calendar Plugin Customization

Posted: April 29, 2015 at 1:14 pm

Viewing 7 reply threads


Kirstin

April 29, 2015 at 1:14 pm

Hello –

Per my pre-sales email with Garth, please provide the custom css to modify the calendar to display as shown on this site http://www.sockeyebrew.com/events/

Thank you!
Kirstin Hawayek


Jonathan Wilson

April 30, 2015 at 2:08 pm

Hi Kirstin,

What elements of that calendar are you wanting to look similar on your EE calendar?


Kirstin

May 1, 2015 at 7:37 am

I would like the calendar to be fullwidth and centered on page, I like the grey bands within the calendar, I would like to move the categories to under the calendar title. I also like the filter block at the top of the page above the calendar. In general I would like the calendar page to appear as it is in the link I sent vs. how it is displaying on my site currently http://0ae.f46.myftpupload.com/calendar/

Also, I have added the custom plugin to change the slug for “Events” to “Classes” and “Venue” to “Location”. It does not seem to be working. Could you please troubleshoot.


Lorenzo Orlando Caum

  • Support Staff

May 4, 2015 at 1:51 pm

Hi Kirstin, some of those customizations are possible.

Go to the WordPress page in your WordPress dashboard that has the calendar shortcode and set it to use a full-width layout. It is currently using a content + sidebar layout.

The filters can’t currently be relocated under the name of the month.

The URLs do appear to be using the new slugs. Could you confirm?


Lorenzo


Kirstin

May 4, 2015 at 5:13 pm

Lorenzo –

I would like the custom CSS to add the grey bands/shading and also to change the button size for the filter category tags (increase padding). Also, to center the filter category tags. Also, to change the font of the calendar title. I still see the use of “venue” in multiple cases (i.e. on the calendar page – the filter button)

Thanks.


Lorenzo Orlando Caum

  • Support Staff

May 5, 2015 at 9:45 am

Hello,

You can inspect any element on a page using a free tool like Chrome Developer Tools (available with Google Chrome) or Firebug (available as a web browser extension).

This will show you the CSS that is handling the styling including the file and line number. Then you can add new styling to your child theme’s stylesheet or through a plugin like Reaktiv CSS builder or My Custom CSS.

Try this CSS:

#espresso_calendar .fc-day-number {background:#EEEEEE;}
ul#ee-category-legend-ul {padding-left:175px !important;}
#espresso-category-legend li {
padding: 7px 7px 7px 7px;
}
span.ee-category {padding:5px}

Try this sample coding for changing the dropdown messaging:

function ee_mycustom_filter_gettext( $translated, $original, $domain ) {

// This is an array of original strings
// and what they should be replaced with
$strings = array(
'Select a Venue' => 'Select a Location',
);

// See if the current string is in the $strings array
// If so, replace its translation
if ( isset( $strings[$original] ) ) {
// This accomplishes the same thing as __()
// but without running it through the filter again
$translations = get_translations_for_domain( $domain );
$translated = $translations->translate( $strings[$original] );
}

return $translated;
}

add_filter( 'gettext', 'ee_mycustom_filter_gettext', 10, 3 );

It can be added to your child theme’s functions.php file (do not include the opening php tag) or a site specific plugin:

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


Lorenzo


Kirstin

May 5, 2015 at 1:41 pm

Lorenzo, I added the custom coding to my site specific plugin and it now returns an error. Please see http://0ae.f46.myftpupload.com/classes/learn-to-skate/


Lorenzo Orlando Caum

  • Support Staff

May 5, 2015 at 7:44 pm

Hi, try removing the function and add it towards the end of the file. Also, the function that I shared is ready to go so it can be copied and pasted into your child theme’s functions.php or an existing site specific plugin.

No other edits should be needed.

If it still doesn’t work, then copy and paste your entire site specific plugin here so we can take a look.

Thanks


Lorenzo

Viewing 7 reply threads

The support post ‘EE4 Calendar Plugin Customization’ 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