|
Jake Whitfield
|
May 13, 2016 at 9:37 pm
I am wanting to edit the email templates, I have tried following the suggestion below:
https://eventespresso.com/topic/custom-styles-to-email-message-and-invoice/
The files to modify don’t appear to be located there. I created my own files and tried to reference them but my templates don’t appear to be getting the CSS file. What am i doing wrong?
/* ----- Modify default email CSS ---- */
//assuming you have the files located in wp-content/uploads/
function ee_inline_css_swap( $url, $type ) {
$upload_dir = wp_upload_dir();
switch ( $type ) {
case 'preview' :
$url = $upload_dir['baseurl'] . '/email.css';
break;
case 'wpeditor' :
$url = $upload_dir['baseurl'] . '/email.css';
break;
default :
$url = $upload_dir['baseurl'] . '/email.css';
break;
}
return $url;
}
add_filter( 'FHEE__EE_Email_Messenger__get_inline_css_template__css_url', 'ee_inline_css_swap', 10, 2 );
|
|
Jake Whitfield
|
May 13, 2016 at 9:52 pm
Another issue is that some HTML keeps getting stripped out of the email templates when I save the template.
My background image and this code <!--[if gte mso 9]>
<td background="http://dev.thecassettes.com.au/wp-content/uploads/email/footer-bg.png" bgcolor="#fed900" valign="centre" align="center" height="205">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="http://dev.thecassettes.com.au/wp-content/uploads/email/footer-bg.png" color="#fed900" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div id="footer">
<a href="" ><img src="http://dev.thecassettes.com.au/wp-content/uploads/email/footer-logo.png" alt="" /></a> <br />
<span id="phone">[CO_PHONE]</span><br />
<span id="email"><a href="mailto:[CO_EMAIL]" target="_blank">[CO_EMAIL]</a></span><br />
<ul class="social-icons">
<li id="facebook"><a href="[CO_FACEBOOK_URL]"><span>Facebook</span></a></li>
<li id="instagram"><a href="[CO_INSTAGRAM_URL]"><span>Instagram</span></a></li>
</ul>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
|
|
Tony
|
May 16, 2016 at 3:16 am
Hi Jake,
I am wanting to edit the email templates, I have tried following the suggestion below:
https://eventespresso.com/topic/custom-styles-to-email-message-and-invoice/
The files to modify don’t appear to be located there. I created my own files and tried to reference them but my templates don’t appear to be getting the CSS file. What am i doing wrong?
Those hooks have been depreciated and whilst they should still work, the internal structure of the message system has changed since that thread which is why you can not find the files.
With the latest version of the messenger we introduced ‘Template Packs’ and ‘Variations’ which are basically a way to allow you to register your own html and css files for messages. You can read more about those here:
https://github.com/eventespresso/event-espresso-core/blob/master/docs/E–Messages-System/overview-message-template-packs-variations.md
You could just add a variation (which is basically the messages css file) to the current pack, we have an example here:
https://github.com/eventespresso/event-espresso-core/blob/master/docs/E–Messages-System/registering-message-template-variations.md
It depends on what you want to do and how much control you want/need.
There are also a ton of action hooks through the messages system that allow you to hook in an add additional CSS if needed:
Email messenger actions
do_action( 'AHEE__EE_Email_Messenger_main_wrapper_template_head', $message_type, $subject, $from, $main_body );
do_action( 'AHEE__EE_Email_Messenger_main_wrapper_template_header', $message_type, $subject, $from, $main_body );
do_action( 'AHEE__EE_Email_Messenger_main_wrapper_template_before_main_body', $message_type, $subject, $from, $main_body );
do_action( 'AHEE__EE_Email_Messenger_main_wrapper_template_after_main_body', $message_type, $subject, $from, $main_body );
do_action( 'AHEE__EE_Email_Messenger_main_wrapper_template_footer', $message_type, $subject, $from, $main_body );
Html messenger actions
do_action( 'AHEE__EE_Html_Messenger_main_wrapper_template_head', $message_type, $page_title, $base_css, $print_css, $main_css, $main_body);
do_action( 'AHEE__EE_Html_Messenger_main_wrapper_template_header', $message_type, $page_title, $base_css, $print_css, $main_css, $main_body);
do_action( 'AHEE__EE_Html_Messenger_main_wrapper_template_before_main_body', $message_type, $page_title, $base_css, $print_css, $main_css, $main_body);
do_action( 'AHEE__EE_Html_Messenger_main_wrapper_template_after_main_body', $message_type, $page_title, $base_css, $print_css, $main_css, $main_body);
do_action( 'AHEE__EE_Html_Messenger_main_wrapper_template_footer', $message_type, $page_title, $base_css, $print_css, $main_css, $main_body);
Another issue is that some HTML keeps getting stripped out of the email templates when I save the template.
My background image and this code <!--[if gte mso 9]>
Whats happening there is the messages system is detecting the square brackets – [] and is trying to parse the content as a messages shortcode. EE validates the shortcodes used within the messages system and only allows you to use ‘valid’ shortcodes (shortcodes the messages system has been set to allow), because that shortcode is not ‘valid’ it is being removed.
Another user wanted to use the same shortcodes within the messages, so I have previously created an example function that adds those shortcodes to the messages system which is available here:
https://gist.github.com/Pebblo/e03fe3a4fe02c2803a8786e63b8d6978
Which just adds ‘[if gte mso 9]’, ‘[endif]’ and ‘[if mso]’ to the messages system. It validates as a shortcode and then just returns the shortcode text as a string.
You can place that within you theme/child themes functions.php file or a Custom Functions Plugin.
|
|
Jake Whitfield
|
June 4, 2016 at 12:43 am
Thanks, I have figured out how to set up the email css modifications. Just wandering if there is a simpler option, like with a lot of the other files through out EE – Can I just upload an email css file to my child theme and have it over ride the default one?
I am still having issues with the wordpress editor striping out background images. Seems to be the only way to keep gmail happy is to put the background image inline on a <table> Is there a way to add this to the allowed code to accept?
|
|
Tony
|
June 6, 2016 at 8:45 am
Can I just upload an email css file to my child theme and have it over ride the default one?
No, not with the messages system, you need to create a variation or use the hooks above to add in your own custom CSS.
I am still having issues with the wordpress editor striping out background images. Seems to be the only way to keep gmail happy is to put the background image inline on a <table> Is there a way to add this to the allowed code to accept?
As you mentioned its the WP editor that is stripping that code as it seems background is not a valid html attribute for td. So it seems WP is stripping that element for good reason.
If it is invalid HTML then adding that to your email templates is going to cause more problems (email clients are very fussy over HTML emails)
The default templates were built based Zurb templates:
http://foundation.zurb.com/emails/email-templates.html
As unfortunately building consistent complex HTML emails is no-where near as simple as it should be.
|
