email-builder-core icon indicating copy to clipboard operation
email-builder-core copied to clipboard

Support for bgcolor

Open alexanderbuerner opened this issue 9 years ago • 8 comments

Hey guys,

first: I really thank you for developing such a tool - great work!

Now, I came to a point I needed support for the bgcolor-attribut due to problems in different email "browsers".

Is there a possibility to add a "bgcolor=COLOR" attribute when having a "background-color" attribute in my css file?

alexanderbuerner avatar Jun 23 '16 08:06 alexanderbuerner

Look like the new version of Juice supports it https://github.com/Automattic/juice/blob/master/client.js#L23 so we'll have to up our version

jeremypeter avatar Jun 23 '16 20:06 jeremypeter

@aj1991 version 1.4.0 now supports Juice 2.0. So you can do what you want using setting the following :

juice : {
  applyAttributesTableElements: true
}

jeremypeter avatar Jun 28 '16 00:06 jeremypeter

Was there a result for this, I have been looking into how to get it working. Does it require a separate file to tell it to take the CSS and apply it as the HTML attribute?

HowardChris avatar Jun 05 '17 12:06 HowardChris

@HowardChris You'll have to set the applyAttributesTableElements Juice option to true. Here's kind of a working example:

index.html

<!DOCTYPE html>
<html>
<head>
  <style>
    table { background-color: red; }
  </style>
</head>
<body>
  <table> .... </table>
</body>
</html>

main.js

var EmailBuilder = require('email-builder-core');
var emailBuilder = new EmailBuilder({ 
  juice: {
    applyAttributesTableElements: true
  }
});

output.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <table style="background-color: red;" bgcolor="red"> .... </table>
</body>
</html>

jeremypeter avatar Jun 05 '17 17:06 jeremypeter

@jeremypeter thanks for the info, I will see if I can add this into my current workflow. Still learning grunt to try and automate my emails but configuring the Gruntfile.js is still a learning curve

HowardChris avatar Jun 06 '17 08:06 HowardChris

Hi @jeremypeter

Do you know if there is also an option to not strip out the self-closing tags,

When compiled it is removing them.

For exmaple <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> becomes <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Any information is appreciated.

Thanks, Chris

HowardChris avatar Jun 09 '17 13:06 HowardChris

@HowardChris Set the options.cheerio.xmlMode to true

var EmailBuilder = require('email-builder-core');
var emailBuilder = new EmailBuilder({ 
  juice: {
    applyAttributesTableElements: true
  },
  cheerio: {
    xmlMode: true
  }
});

jeremypeter avatar Jun 09 '17 16:06 jeremypeter

Hi @jeremypeter thanks for all your help on this I really appreciate it, I got those options added and are now working perfect

HowardChris avatar Jun 13 '17 06:06 HowardChris