Issues with emailing on XF2.0

Kainzo

Active member
Is there anyway aroaund this?

Code:
* {
    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%;
}
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 {

    background-color: #ebebeb;
  
}
.social .hclinks {
    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.hcf { background-color: #D1B60A!important; }
a.ms { background-color: #000!important; }
a.wl { background-color: #D1140A!important; }
.sidebar .hclinks {
    display:block;
    width:100%;
}
table.head-wrap { width: 100%;}
.header.container table td.logo { padding: 15px; }
.header.container table td.label { padding: 15px; padding-left:0px;}
table.body-wrap { width: 100%;}
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;
  
}
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; 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: 44px;}
h2 { font-weight:200; font-size: 37px;}
h3 { font-weight:500; font-size: 27px;}
h4 { font-weight:500; font-size: 23px;}
h5 { font-weight:900; font-size: 17px;}
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#93CBFA;}
.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;
    list-style-position: inside;
}
ul.sidebar {
    background:#ebebeb;
    display:block;
    list-style-type: none;
}
ul.sidebar li { display: block; margin:0;}
ul.sidebar li a {
    text-decoration:none;
    color: #666;
    padding:10px 16px;

    margin-right:10px;

    cursor:pointer;
    border-bottom: 1px solid #777777;
    border-top: 1px solid #FFFFFF;
    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;}
.container {
    display:block!important;
    max-width:600px!important;
    margin:0 auto!important;
    clear:both!important;
}
.content {
    padding:15px;
    max-width:600px;
    margin:0 auto;
    display:block;
}
.content table { width: 100%; }
.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;
}
.clear { display: block; clear: both; }
@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;
    }
}
ErrorException: [E_WARNING] DOMXPath::query(): Invalid expression in src/vendor/pelago/emogrifier/Classes/Emogrifier.php at line 984
  1. XF::handlePhpError()
  2. DOMXPath->query() in src/vendor/pelago/emogrifier/Classes/Emogrifier.php at line 984
  3. Pelago\Emogrifier->existsMatchForCssSelector() in src/vendor/pelago/emogrifier/Classes/Emogrifier.php at line 940
  4. Pelago\Emogrifier->copyCssWithMediaToStyleNode() in src/vendor/pelago/emogrifier/Classes/Emogrifier.php at line 410
  5. Pelago\Emogrifier->process() in src/vendor/pelago/emogrifier/Classes/Emogrifier.php at line 289
  6. Pelago\Emogrifier->emogrify() in src/XF/Mail/Styler.php at line 36
  7. XF\Mail\Styler->styleHtml() in src/XF/Mail/Mailer.php at line 189
  8. XF\Mail\Mailer->renderMailTemplate() in src/XF/Mail/Mail.php at line 278
  9. XF\Mail\Mail->renderTemplate() in src/XF/Mail/Mail.php at line 327
  10. XF\Mail\Mail->getSendableMessage() in src/XF/Mail/Mail.php at line 341
  11. XF\Mail\Mail->send() in src/XF/Job/UserEmail.php at line 69
  12. XF\Job\UserEmail->executeAction() in src/XF/Job/AbstractUserCriteriaJob.php at line 59
  13. XF\Job\AbstractUserCriteriaJob->run() in src/XF/Admin/Controller/User.php at line 1029
  14. XF\Admin\Controller\User->actionEmailSend() in src/XF/Mvc/Dispatcher.php at line 249
  15. XF\Mvc\Dispatcher->dispatchClass() in src/XF/Mvc/Dispatcher.php at line 89
  16. XF\Mvc\Dispatcher->dispatchLoop() in src/XF/Mvc/Dispatcher.php at line 41
  17. XF\Mvc\Dispatcher->run() in src/XF/App.php at line 1931
  18. XF\App->run() in src/XF.php at line 328
  19. XF::runApp() in admin.php at line 13
 
Last edited:

Chris D

XenForo developer
Staff member
To ensure the best stylistic compatibility with as many email clients as possible, we convert CSS rules into inline style attributes on elements using a library called "Emogrifier".

For it to be falling over here, it's possible there is something in your code it doesn't like.

My initial suspicion is this bit:
CSS:
@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;
    }
}
Specifically I wonder if it's the class="blah" bits because it's fairly weird targeting an element's class attribute in that way.

If it isn't that, you really need to just keep removing and re-adding bits in until it starts working so we can narrow down what (if anything) is causing it to fall over. We can then ascertain if that's something bad in the CSS or a bug that needs fixing in the code.
 
Top