Support

Home Forums Event Espresso Premium Corrupted Emails in EE4 4.6.6 – Top of Email Whole Bunch CSS, HTML and PHP Code

Corrupted Emails in EE4 4.6.6 – Top of Email Whole Bunch CSS, HTML and PHP Code

Posted: February 14, 2015 at 8:58 pm

Viewing 17 reply threads


Terina Allen

February 14, 2015 at 8:58 pm

In my pending and registration confirmation emails, there is an entire (more than half a page) of amount of raw code, and I have to scroll way down passed the code to read the actual email.

I just purchased this plugin yesterday and have been setting it up. I have a few other problems, but this one is HUGE! The email that goes to the registrant to me has so much code – looks like a whole mess of corrupted code covering 2/3 of the email page.

Help…


Terina Allen

February 14, 2015 at 8:59 pm

Here is what is at the top of the email:

/* ————————————- Attention! This CSS file is used for generating the final messages that are sent to the attendees and admins. ————————————- */ /* ————————————- GLOBAL ————————————- */ * { margin:0; padding:0; } * { font-family: “Helvetica Neue”, “Helvetica”, Helvetica, Arial, sans-serif; } img { max-width: 100%; } .collapse { margin:0; padding:0; } body { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; width: 100%!important; height: 100%; } /* ————————————- ELEMENTS ————————————- */ a { color: #2BA6CB;} .btn { text-decoration:none; color: #FFF; background-color: #666; padding:10px 16px; font-weight:bold; margin-right:10px; text-align:center; cursor:pointer; display: inline-block; } p.callout { padding:15px; background-color:#ECF8FF; margin-bottom: 15px; } .callout a { font-weight:bold; color: #2BA6CB; } table.social { /* padding:15px; */ background-color: #ebebeb; } .social .soc-btn { padding: 3px 7px; font-size:12px; margin-bottom:10px; text-decoration:none; color: #FFF;font-weight:bold; display:block; text-align:center; } a.fb { background-color: #3B5998!important; } a.tw { background-color: #1daced!important; } a.gp { background-color: #DB4A39!important; } a.ms { background-color: #000!important; } .sidebar .soc-btn { display:block; width:100%; } /* ————————————- HEADER ————————————- */ table.head-wrap { width: 100%;} .header.container table td.logo { padding: 15px; } .header.container table td.label { padding: 15px; padding-left:0px;} /* ————————————- BODY ————————————- */ table.body-wrap { width: 100%;} /* ————————————- FOOTER ————————————- */ table.footer-wrap { width: 100%; clear:both!important; } .footer-wrap .container td.content p { border-top: 1px solid rgb(215,215,215); padding-top:15px;} .footer-wrap .container td.content p { font-size:10px; font-weight: bold; } /* ————————————- TYPOGRAPHY ————————————- */ h1,h2,h3,h4,h5,h6 { font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif; line-height: 1.1; margin-bottom:15px; padding-bottom:15px; padding-top:10px; color:#000; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; } h1 { font-weight:200; font-size: 36px;} h2 { font-weight:200; font-size: 30px;} h3 { font-weight:500; font-size: 24px;} h4 { font-weight:500; font-size: 19px;} h5 { font-weight:900; font-size: 16px;} h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;} h4.attendee-name { margin: 10px 0; } .collapse { margin:0!important;} p, ul { margin-bottom: 10px; font-weight: normal; font-size:14px; line-height:1.6; } p.lead { font-size:17px; } p.last { margin-bottom:0px;} ul li { margin-left:5px; padding-bottom: 5px; list-style-position: inside; list-style-type: none; } ul.question-list li, ol.datetime-list li { margin-left:10px; padding-bottom: 5px; list-style-position: inside; list-style-type: none; } li.ticket-name em, li.question-item em {padding-left: 15px;} hr { margin: 10px 0; } /* ————————————- SIDEBAR ————————————- */ ul.sidebar { background:#ebebeb; display:block; list-style-type: none; } #ee-message-preview-container ul.sidebar li { display: block; margin:0; padding:10px 16px;} #ee-message-preview-container ul.sidebar li h5 { text-decoration:none; color: #000; padding:10px 0 20px 0; display:block; margin:0; } ul.sidebar li a.last { border-bottom-width:0px;} ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;} /* ————————————————— RESPONSIVENESS Nuke it from orbit. It’s the only way to be sure. —————————————————— */ /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */ .container { display:block!important; max-width:600px!important; margin:0 auto!important; /* makes it centered */ clear:both!important; } /* This should also be a block element, so that it will fill 100% of the .container */ .content { padding:15px; max-width:600px; margin:0 auto; display:block; } /* Let’s make sure tables in the content area are 100% wide */ .content table { width: 100%; } /* Odds and ends */ .column { width: 300px; float:left; } .column tr td { padding: 15px; } .column-wrap { padding:0!important; margin:0 auto; max-width:600px!important; } .column table { width:100%;} .social .column { width: 280px; min-width: 279px; float:left; } .column-large { width: 550px; margin:0 auto; padding-left: 10px; } /* Be sure to place a .clear element after each set of columns, just to be safe */ .clear { display: block; clear: both; } /* ——————————————- PHONE For clients that support media queries. Nothing fancy. ——————————————– */ @media only screen and (max-width: 600px) { a[class=”btn”] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;} div[class=”column”] { width: auto!important; float:none!important;} table.social div[class=”column”] { width:auto!important; } }


Tony

  • Support Staff

February 16, 2015 at 9:50 am

Hi Terina,

The code you see at the beginning of those emails is the inline CSS styles for that email, EE4 emails are HTML emails with inline CSS.

This usually happens when your email is being marked as potential spam by the mail server. The email is then send as plain text and your email client will often try its best to figure out what to display when displaying the email to you.

This can happen for many reasons but is usually due to poorly/incorrectly configured mailservers, for that reason we recommend using a transactional email service such as PostMark or Mandrill to handle your emails as you can be sure their servers are correctly configured to handle these emails.

We have more information on both services here:

https://eventespresso.com/wiki/postmark-app-mandrill-transactional-email-handling-services/

Personally I recommend Mandrill (free for up to 12k emails per month) as it integrates with MailChimp, allows for much more in-depth reporting and is very easy to set-up. Here is a step by step guide to doing so:

http://blog.mailchimp.com/transactional-email-plugin-for-WordPress/


Terina Allen

February 17, 2015 at 4:40 pm

Hello Tony. I will try the methods you prescribe and let you know whether things work. Thank you.


Terina Allen

February 17, 2015 at 9:44 pm

Do I need to have a Mailchimp account as well to use Mandrill?


Terina Allen

February 17, 2015 at 9:50 pm

Tim – The myMandrill plugin is says – “Warning: This plugin has not been tested with your current version of WordPress” and there have not been updates on it in more than a year. Is it safe to install this to use with Event Expresso?


Terina Allen

February 18, 2015 at 12:07 am

Okay Tim – I just finished setting up Mandrill and following the install and setup instructions as per the link you gave me. I sent a test email and also sent a test registration from Events Expresso. Nothing. My emails still have the same inline CSS styles in them as they did before. Nothing works with email.

What does it mean that I am getting this error even when using Mandrill?

Terina


Terina Allen

February 18, 2015 at 12:10 am

I am sorry I listed your name as Tim instead of Tony. Tony – my messages are intended for you. Please read the four messages since your reply and let me know what I should do. Thank you.


Tony

  • Support Staff

February 18, 2015 at 6:02 am

Hi Terina,

Do I need to have a Mailchimp account as well to use Mandrill?

No you only need a Mandrill account, however you can integrate the two together if you do have a MailChimp account so then if you send newsletter campaigns with Mandrill I believe you can do some in depth campaign targeting.

Is it safe to install this to use with Event Expresso?

I use Mandrill often and have it installed on most of my local test sites. There is a small issue with using formatted email addresses within Mandril, but we have a fix for that here (if you do actually run into it we can help with that)

The support staff use wpMandril and we recommend it often, so far we’ve had no major problems, wp_mail() the core function that wpMandrill overrides isn’t likely to change any time soon so there shouldn’t be a problem.

What does it mean that I am getting this error even when using Mandrill?

Hmm, have you modified any of the message templates at all?

Also have you now updated to the latest version of EE4? (Currently 4.6.9.p)


Terina Allen

February 18, 2015 at 6:21 am

Yes, I modified the messages (customized the invoice and confirmation messages). Is that a problem? I thought we could customize if we wanted to…


Tony

  • Support Staff

February 18, 2015 at 6:29 am

You can customize the message yes, I wanted to confirm if you were using the default message templates or customized versions.

Is it those message types that have that styles or others?


Terina Allen

February 18, 2015 at 6:31 am

The only change I made was to add some extra text and an image into the existing template.


Terina Allen

February 18, 2015 at 6:33 am

Using the default message template. When I did it in the customized versions, it did not link to the event. The default kept showing up so I modified the default. Which can I modify, both? And how do I connect the customized version to the actual event I am modifying it for?


Terina Allen

February 18, 2015 at 7:11 am

I checked, and yes – I have the latest update of EE4? (Currently 4.6.9.p). This was updated prior to adding the Mandrill plugin.


Terina Allen

February 18, 2015 at 6:08 pm

Okay Tony. It is jut not working. I have uninstalled Mandrill, reset those two Event Espresso mail templates (even though I did not change much to begin with) and then reinstalled Mandrill and this is what happens:

Mandrill works just fine with sending email without all the CSS code at the top for all emails EXCEPT those coming from Event Espresso. So whether I am using wp-mail or Mandrill, I get this mess of CSS code at the top of the Event Espresso emails and only the Event Espresso emails.

I never had any problems with my wp-mail, and I installed Mandrill just to get Event Espresso mail to send without that code at the top. After all of this, I still have the same problem.

What do you suggest?


Terina Allen

February 18, 2015 at 6:13 pm

You said this usually happens when the email is thought to be spam. Why is it picking up that the Event Espresso emails are spam when all the other email sent from the same program are not getting this treatment. There is no code on contact form submits and a few other forms on the site. They all come through just as they should. But Event Espresso mail is coming through with all this CSS inline code at the top of each email that is sent from it specifically.


Tony

  • Support Staff

February 19, 2015 at 4:08 am

Hi Terina,

The reason I checked if you had customised the templates was to check if you were using the default template or not (not the ‘default message’, but the template that we include within the message) as it is also happening since you reset the templates, that’s no longer a factor.

Event Espresso sends HTML emails which include HTML and inline CSS within the emails. WP Emails are generally plain text (although not always if you are using a contact form plugin for example), it is rare to have issues with plain text emails.

However it is strange that you still see the same issue when using Mandrill, would it be possible for me to take a look at your messages setup? I’d like to check for anything amiss.

If so please send temporary log in details using this form:

https://eventespresso.com/send-login-details/


Lorenzo Orlando Caum

  • Support Staff

May 15, 2015 at 9:33 am

Hi Terina, I wanted to share an update on the report of this issue with CSS appearing in the notification emails.

We have seen this issue from time to time in our support forums and with each report, we try to duplicate the issue on our testing sites. Until recently, we have not been able to duplicate the issue.

I was able to trigger the issue under a specific set of conditions and with the recent maintenance release for Event Espresso 4, we’ve added a fix that should correct the CSS appearing at the top of the email notifications.

https://eventespresso.com/wiki/ee4-changelog/#4.6.27

Note that we still recommend continuing to use a transactional email service such as Postmark app and Mandrill since they help ensure that emails arrive to the inbox instead of the spam or junk email folder.

Thanks!


Lorenzo

Viewing 17 reply threads

The support post ‘Corrupted Emails in EE4 4.6.6 – Top of Email Whole Bunch CSS, HTML and PHP Code’ 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