Support

Home › Forums › Event Espresso Premium › Uniform design in Email Notification

Uniform design in Email Notification

Posted: July 18, 2019 at 6:41 am

Viewing 7 reply threads


motio

July 18, 2019 at 6:41 am

Hi,

I would like to unify the design of all outgoing Email (Event Espresso, Contact Forms, Newsletter, WordPress and other Plugins).

I found the following Plugin, which can organize that goal at one place.
https://wordpress.org/plugins/email-templates/#how%20to%20add%20a%20custom%20template%3F
It works pretty well, accept some formatting issues.

When I send an Event Espresso Notification there are 10 blank lines between the point where the message should start and where the EE Message actually is starting.

In the raw file of the email I found, that the header of EE is inserted into the message as paragraphs:

<p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" style="margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;"><br />
  <head style="margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;"><br />
<!-- If you delete this meta tag, Half Life 3 will never be released. --><br />
    <meta name="viewport" content="width=device-width" style="margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;" /><br />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" style="margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;" /><br />
<!-- Facebook sharing information tags --><br />
    <meta property="og:title" content="Test E-Mail gesendet von Motio" style="margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;" /><br />
    <title style="margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;">Test E-Mail gesendet von Motio</title><br />
  </head><br />
  <body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; width: 100%!important;"></p>

Can I disable that part somehow? Or do you see an other option to only have the content of the EE notification?


Josh

  • Support Staff

    •

July 19, 2019 at 12:17 pm

Hi,

There may be another plugin adding that <p> tag. Normally you wouldn’t see a <p> tag there. If you temporarily deactivate all other plugins beside Event Espresso and that email templates plugin, does the <p> tag go away?


motio

July 22, 2019 at 3:29 am

Hi Josh,

I deactivated all plugins, except event espresso an email templates, and switched the theme to a new installed twentynineteen theme. The email still has the header of eventespresso in tags and a huge gap at the beginning. The email template plugin insert the email content into a div and probably is formatted before that. Or do you see another explanation?

How cloud I remove the header/meta tags from the event espresso emails?


Josh

  • Support Staff

    •

July 22, 2019 at 2:40 pm

You’ll need to hook in a custom template to do that.

Step 1) You set up a site specific plugin by following this guide:
https://eventespresso.com/wiki/create-site-specific-plugin-wordpress-site/

Step 2) Add this PHP code to your site specific plugin’s main file:

add_filter(
	'FHEE__EE_Messages_Template_Pack__get_wrapper', 
	'my_custom_email_wrapper_override', 
	10, 
	4
);
function my_custom_email_wrapper_override($template, $messenger, $type, $object) {
	if($messenger == 'email' && $type == 'main') {
		$template = plugin_dir_path( __FILE__ ) . 'email_main_wrapper.template.php';
	}
	return $template;
}

Step 3) create a new file within the site specific plugin, and name it:
email_main_wrapper.template.php
Step 4) Put this code to the email_main_wrapper.template.php file:
<?php echo $main_body; ?>
Step 5) Activate the plugin


motio

July 23, 2019 at 2:11 am

Hi Josh,

it looks definitely better. Now there are only 2 rows at the start and at the end, which are caused by this lines:

<p><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><br />
<html style="margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;"><br />
  <body style="margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; width: 100%!important;"></p>
<p>  </body><br />
</html></p>

This part isn’t part of the $main_body. If tried to erase the html and body by the strip_tags() function but both are inserted somewhere else. Do you have another idea to fix it?

By adding your code there was also a formatting issues that I solved with utf8_decode() (put the text back to unicode).


Josh

  • Support Staff

    •

July 23, 2019 at 2:39 pm

It looks like what you’ll need to do is remove any unexpected (unexpected by the html within the Email Templates plugin) html tags from the email Message templates in Event Espresso. So for example, if your email message template has only the following:

<p>This is a test</p>

then does the extra DOCTYPE and body tag go away?


motio

July 24, 2019 at 12:59 am

I’ve put <p>This is a test</p> (wit nothing else) into the message template of Event Espresso and have send a test mail to me. The following code ist the whole Email that I’Ve got. The content ist inserted at the div with the id=”mailtpl_body”.

Message from Event Espresso:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Motio Testpage</title>
	    <style type="text/css">
		    #template_body a{
			    color: #4ca6cf;
		    }
	    </style>
	    <style type="text/css" id="custom-css">
		    	    </style>
	</head>
    <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
    	<div id="body" style="
	background-color:#e3e3e3;
	width:100%;
	-webkit-text-size-adjust:none !important;
	margin:0;
	padding: 70px 0 70px 0;
">
        	<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
            	<tr>
                	<td align="center" valign="top">
                    	<table border="0" cellpadding="0" cellspacing="0"  id="template_container" style="
	-webkit-box-shadow:0 0 0 3px rgba(0,0,0,0.025) !important;
	box-shadow:0 0 0 3px rgba(0,0,0,0.025) !important;
	-webkit-border-radius:0px !important;
	border-radius:0px !important;
	background-color: #fafafa;
	border-radius:6px !important;
	max-width: 100%;">
                        	<tr>
                            	<td align="center" valign="top">
                                    <!-- Header -->
                                	<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_header" style="
	background-color: #c4c4c4;
	color: #f1f1f1;
	-webkit-border-top-left-radius:0px !important;
	-webkit-border-top-right-radius:0px !important;
	border-top-left-radius:0px !important;
	border-top-right-radius:0px !important;
	border-bottom: 0;
	font-family:Arial;
	font-weight:bold;
	line-height:100%;
	vertical-align:middle;
"">
                                        <tr>
                                            <td>
                                            	<h1 style="
	color: #545454;
	margin:0;
	padding: 28px 24px;
	display:block;
	font-family:Arial;
	font-size: 34px;
	font-weight:bold;
	text-align:left;
	line-height: 150%;
" id="logo">
		                                            <a style="
	color: #545454;
	text-decoration: none;
" href="" title="Text und text ">Text und text 		                                            
	                                            </h1>

                                            </td>
                                        </tr>
                                    </table>
                                    <!-- End Header -->
                                </td>
                            </tr>
                        	<tr>
                            	<td align="center" valign="top">
                                    <!-- Body -->
                                	<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_body">
                                    	<tr>
                                            <td valign="top" style="
	background-color: #fafafa;
" id="mailtpl_body_bg">
                                                <!-- Content -->
                                                <table border="0" cellpadding="20" cellspacing="0" width="100%">
                                                    <tr>
                                                        <td valign="top">
                                                            <div style="
	color: #888;
	font-family:Arial;
	font-size: 14px;
	line-height:150%;
	text-align:left;
" id="mailtpl_body"><p><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><br />
<html style="margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;"><br />
  <body style="margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; width: 100%!important;"></p>
<p style="margin: 0; padding: 0; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 1.6; margin-bottom: 10px;">This is a test</p>
<p>  </body><br />
</html></p>


				</div>
			</td>
        </tr>
    </table>
    <!-- End Content -->
            </td>
        </tr>
    </table>
    <!-- End Body -->
        </td>
    </tr>
	<tr>
    	<td align="center" valign="top">
            <!-- Footer -->
        	<table border="0" cellpadding="10" cellspacing="0" width="100%" id="template_footer" style="
	border-top:1px solid #E2E2E2;
	background: #eee;
	-webkit-border-radius:0px 0px 0px 0px;
	-o-border-radius:0px 0px 0px 0px;
	-moz-border-radius:0px 0px 0px 0px;
	border-radius:0px 0px 0px 0px;
">
            	<tr>
                	<td valign="top">
                        <table border="0" cellpadding="10" cellspacing="0" width="100%">
                            <tr>
                                <td colspan="2" valign="middle" id="credit" style="
	border:0;
	color: #777;
	font-family: Arial;
	font-size: 12px;
	line-height:125%;
	text-align:center;
">
                                
                                	©2019 Motio Testpage                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <!-- End Footer -->
        </td>
    </tr>
            </table>
			        </td>
    </tr>
</table>
        </div>     </body>
</html>

When I am doing the same through a newsletter (or other plugin), than the message looks like this and has no additional html or body tags, that’s why I think it comes from Event Espresso.

Message from other Plugins (What it should look like):

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Motio Testpage</title>
	    <style type="text/css">
		    #template_body a{
			    color: #4ca6cf;
		    }
	    </style>
	    <style type="text/css" id="custom-css">
		    	    </style>
	</head>
    <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
    	<div id="body" style="
	background-color:#e3e3e3;
	width:100%;
	-webkit-text-size-adjust:none !important;
	margin:0;
	padding: 70px 0 70px 0;
">
        	<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
            	<tr>
                	<td align="center" valign="top">
                    	<table border="0" cellpadding="0" cellspacing="0"  id="template_container" style="
	-webkit-box-shadow:0 0 0 3px rgba(0,0,0,0.025) !important;
	box-shadow:0 0 0 3px rgba(0,0,0,0.025) !important;
	-webkit-border-radius:0px !important;
	border-radius:0px !important;
	background-color: #fafafa;
	border-radius:6px !important;
	max-width: 100%;">
                        	<tr>
                            	<td align="center" valign="top">
                                    <!-- Header -->
                                	<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_header" style="
	background-color: #c4c4c4;
	color: #f1f1f1;
	-webkit-border-top-left-radius:0px !important;
	-webkit-border-top-right-radius:0px !important;
	border-top-left-radius:0px !important;
	border-top-right-radius:0px !important;
	border-bottom: 0;
	font-family:Arial;
	font-weight:bold;
	line-height:100%;
	vertical-align:middle;
"">
                                        <tr>
                                            <td>
                                            	<h1 style="
	color: #545454;
	margin:0;
	padding: 28px 24px;
	display:block;
	font-family:Arial;
	font-size: 34px;
	font-weight:bold;
	text-align:left;
	line-height: 150%;
" id="logo">
		                                            <a style="
	color: #545454;
	text-decoration: none;
" href="" title="Text und text ">Text und text 		                                            
	                                            </h1>

                                            </td>
                                        </tr>
                                    </table>
                                    <!-- End Header -->
                                </td>
                            </tr>
                        	<tr>
                            	<td align="center" valign="top">
                                    <!-- Body -->
                                	<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_body">
                                    	<tr>
                                            <td valign="top" style="
	background-color: #fafafa;
" id="mailtpl_body_bg">
                                                <!-- Content -->
                                                <table border="0" cellpadding="20" cellspacing="0" width="100%">
                                                    <tr>
                                                        <td valign="top">
                                                            <div style="
	color: #888;
	font-family:Arial;
	font-size: 14px;
	line-height:150%;
	text-align:left;
" id="mailtpl_body"><p>This is a test</p>


				</div>
			</td>
        </tr>
    </table>
    <!-- End Content -->
            </td>
        </tr>
    </table>
    <!-- End Body -->
        </td>
    </tr>
	<tr>
    	<td align="center" valign="top">
            <!-- Footer -->
        	<table border="0" cellpadding="10" cellspacing="0" width="100%" id="template_footer" style="
	border-top:1px solid #E2E2E2;
	background: #eee;
	-webkit-border-radius:0px 0px 0px 0px;
	-o-border-radius:0px 0px 0px 0px;
	-moz-border-radius:0px 0px 0px 0px;
	border-radius:0px 0px 0px 0px;
">
            	<tr>
                	<td valign="top">
                        <table border="0" cellpadding="10" cellspacing="0" width="100%">
                            <tr>
                                <td colspan="2" valign="middle" id="credit" style="
	border:0;
	color: #777;
	font-family: Arial;
	font-size: 12px;
	line-height:125%;
	text-align:center;
">
                                
                                	©2019 Motio                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <!-- End Footer -->
        </td>
    </tr>
            </table>
			        </td>
    </tr>
</table>
        </div>     </body>
</html>


Josh

  • Support Staff

    •

July 24, 2019 at 9:54 am

Hi,

In the future could you be so kind to use a paste bin (wpbin.io) for large blocks of code?

You can add the following code to your custom plugin to disable CSSinliner (which appears to be adding your second DOCTYPE and other things)

add_filter(
    'FHEE__EE_Email_messenger__apply_CSSInliner ',
    '__return_false'
);

Please note: The space at the end of the filter name is significant.
Viewing 7 reply threads

The support post ‘Uniform design in Email Notification’ 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 5 years, 2 months ago ago

Topic Tags

Tagged: 

Notifications

This topic is: not resolved
Event Espresso