Email preview styling is off

[borisyordanov]

I just started using your library today, so I'm not too familiar with it. When i send an email a new tab opens up in the browser that allows me to see what the email i just sent looks like (great feature).

This is what i see in that tab

This is what i see in my email client (yahoo in this case)

As you can see the colours in the preview aren't the correct ones. The preview looks exactly as it should and how i designed it.

Let me know if you need any info about my config.

[niftylettuce]

Yeah @borisyordanov can you share your full config? If you can also share your template and your CSS file that'd be dope.

[borisyordanov]

@niftylettuce

Mr. Lettuce,

I made a gist with my email (i made it with mailchimp, because i got lazy) which has the CSS in it. I apologise for its poor formatting, tried to fix it but it's still a mess. I'm using ejs to add some variables to it.

const mail = new Email({
    message: {
        from: 'enjoycopenhagen.dk@gmail.com'
    },
    transport: transporter,
    send: true,
    views: {
        root: path.join(__dirname, 'emails'),
        options: {
            extension: 'ejs' // <---- HERE
        }
    }
});

exports.sendBookingRequestTourist = (email, img, name, date, travelers, status) => {
    // transporter.template
    mail
        .send({
            template: 'BookingRequestTourist',
            message: {
                to: email
            },
            locals: {
                img,
                name,
                date,
                travelers,
                status
            }
        })
        .then(console.log)
        .catch(console.error);
};

"dependencies": {
        "babel-core": "6.14.0",
        "body-parser": "^1.18.2",
        "cors": "^2.8.4",
        "ejs": "^2.5.7",
        "email-templates": "^3.5.2",
        "express": "4.13.3",
        "fs": "0.0.2",
        "node-schedule": "^1.3.0",
        "nodemailer": "^4.4.2",
        "sql.js": "0.3.2",
        "stripe": "^5.4.0"
    }

[borisyordanov]

Update:

For some reason mailchimp had generated the templates with #transparent as the background color. Not sure what that # is doing there but that was the reason for the broken styling. The emails looked wrong in gmail (like in the preview) but were fine in Yahoo mail.

Why is this happening?

[niftylettuce]

MailChimp has its own rendering thing probably, that's why. Do you still have this issue or find a workaround?

[borisyordanov]

@niftylettuce The CSS in the template was indeed, the problem, nothing wrong with email-templates. Should have checked more carefully before posting here!