|
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
|
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
|
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.
|
