Support

Home Forums Event Espresso Premium EE4, Custom Message Template, How to link to custom CSS file

EE4, Custom Message Template, How to link to custom CSS file

Posted: March 29, 2019 at 12:18 pm


lisa burgess

March 29, 2019 at 12:18 pm

Hi,

I have been wrangling with trying to find a solution for creating custom email templates that can be rendered nicely in Outlook. The bulk of my customers use Outlook and currently the default email templates look bad. They lose margin, padding, etc. I know this is due to the quirkiness of Outlook, but I need some way to make my email templates look professional.

I have customized a template with a very simple html email template that is guaranteed to work with Outlook, (https://htmlemail.io/) but I need to somehow get the CSS linked to my email template.

How would I go about doing this?

I read this on the custom message documentation, but did not understand what to do. Please help!

Excerpt:
Enqueue your own styles or scripts via this hook (and just add the regular wp_enqueue_style() etc in your function):
AHEE__EE_Html_messenger__enqueue_scripts_styles
That should load any CSS scripts/styles AFTER the messages styles/scripts.

Thanks,
Lisa


Josh

  • Support Staff

March 29, 2019 at 1:20 pm

Hi Lisa,

If you’re already using a child theme on the WordPress site, then a simple way to do this would be to upload the CSS file to the child theme, then add this to the child theme’s functions.php file:

add_filter(
 'FHEE__EE_Messages_Template_Pack__get_variation',
 'ee_modify_email_variation',
 10,
 8 
);

function ee_modify_email_variation(
    $variation_path,
    $messenger,
    $message_type,
    $type,
    $variation,
    $file_extension,
    $url,
    EE_Messages_Template_Pack $template_pack
) {
    if ( $messenger != 'email' ) {
        return $variation_path;
    }
    return get_stylesheet_directory_uri() . '/name-of-file.css';
}

You’ll need to make sure to change name-of-file.css to match the name of the CSS file.

or

If you’re not using a child theme, another way to make this happen would be to create a little plugin by following this guide:

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

Then, upload the CSS file into the plugin.
Then add the same code as above into the plugin’s main file. One change from above though: That last return line would need to be changed to:

return plugin_dir_path( __FILE__ ) . '/name-of-file.css';


lisa burgess

April 2, 2019 at 7:30 am

Hi Josh,
Ok, i will try this. one question though: I thought that all CSS for emails would need to be inlined. Will linking to an external stylesheet really work?


Josh

  • Support Staff

April 2, 2019 at 7:55 am

It really does work because the email’s CSS is converted to inline by means of the CSS inliner tool that’s bundled in EE4.

The support post ‘EE4, Custom Message Template, How to link to custom CSS file’ 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.

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3

Documentation for Event Espresso 4

Status: closed

Updated by  Josh 2 months, 2 weeks ago ago

Topic Tags

Tagged: 

Notifications

This topic is: not resolved
Do NOT follow this link or you will be banned from the site!