|
Expand Technology
|
April 27, 2015 at 10:22 pm
I am using a standard default (i.e. unmodified, uncustomized) email messaging template – “Registration Pending Payment”.
Upon registration, the registrant receives a very ugly email full of CSS code followed further down in the message by the actual intended message.
This is what appears at the start/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; } ul.sidebar li { display: block; margin:0; padding:10px 16px;} 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; } }
—————————————————
This appears to be the entire CSS file and I have no idea why it is appearing in the email…nor, do I see any way of fixing it.
Please advise…
Dale
|
|
Tony
|
April 28, 2015 at 2:13 am
Hi Dale,
Are you using the latest version of Event Espresso?
Generally when this happens the emails are being marks as spam and so are being sent as plain text, often due to incorrect (or to strict) mail server set ups.
When this happens we recommend using a transactional email service such as Mandill (free for up to 12k emails per month), which basically removes your hosts mail server from the equation and sends all of your WP emails through Mandrill’s mail server (which is much more reliable)
You can find more info here:
https://eventespresso.com/wiki/postmark-app-mandrill-transactional-email-handling-services/
Which also includes a step by step guide to setup Mandrill. Can you run through that guide and retest the messages please?
|
|
Expand Technology
|
April 28, 2015 at 2:42 am
Hi Tony,
Thank you for your reply…most helpful.
Yes, I am using the latest version of EE.
But, I had actually “discovered” other folks having the exact same problem so I have already setup Mandrill and got it working properly.
So, “problem solved” very nicely! 😉
Thanks again,
Cheers,
Dale
|
|
Lorenzo Orlando Caum
|
May 15, 2015 at 9:33 am
Hello Dale, I wanted to share an update on the report of this issue.
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
|
