CSS Inliner

Hi Tim, 

How would see that being added?  And could you implement it currently by using the inline styles in a template or wysiwyg with the "html" button?

I guess I'm looking at having the styles in a <style></styles> like the Custom CSS field, although it would be handy to have those styles applied to the WYSIWYG when the user edits the message.

Then, when the email is sent, the inliner is run, so rather than the <style> being put in to the head (where gmail etc strip it out) the styles are then turned to inline styles.

Hi Dave,

I've worked through this more.

I would like the templates in the newsletter module to have 3 fields rather than the current 2.

1. Core: Which contains the core structure of the email, such as boilerplate.html at http://zurb.com/ink/docs.php. This is where we will have any "reset.css" to try and overcome any variations in email browsers etc.

2. Default Content: This is the body of the email with Lorem Ipsum type text and placeholder images.  Currently it's very hard for me to give a client 2 different email, for instance, I cannot have a single column template and a two column template.

3. Template Styles: Here I can add additional css styles that can be used in that particular template.  For instance I may have a .header style that in one email is blue, but in another email is green.

When we then create a message, that content will display the default content.  Users can edit the words / pictures etc.  It would be great if the WYSIWYG could pick up the styles from the "Template Style" so the user can see how the email would look, and they would be able to select available styles to apply to elements as they edit.

When sent, CMSB should take the style from the core and the template styles and in-line them to ensure browsers don't strip important styles.

Hey Guys,

Have you had any further thoughts on this?

I think it would probably be quite tricky, but I could build it.

Let's say it would consist of a section where styles are stored, each with a name and CSS file associated with it. Then in the actual newsletter, you'd use a dropdown to select the style, and the system would try to convert the contents of the CSS file to inline styles applied to each HTML element in the email itself.

Does that sound right?

Hi Claire, I think that's too complicated.

I think the css section is just a text box where we can past a bunch of css.  Then, when editing the newsletter, could this block would be inserted "on-the-fly" into the wysiwyg-custom.css so those styles appear in the style-select dropdown?

This isn't the main requirement though - I'm mainly wanting to have the inliner functionality.

Hi Tim - I think it could be done. But the wysiwyg-custom.css is a plain stylesheet, no PHP running in it. If you want to just get the styles into the dropdown somehow, it'd mean hooking into the dropdown with JS and making sure that TinyMCE doesn't break or start behaving oddly.

So it's definitely possible, yeah.

I'll have to brush up on email formatting. Last time I discussed it with one of my designer friends, she was of the opinion that making an email show up consistently across all clients was one step down from voodoo.

Thanks Claire.

I understand that the CSS may be difficult - lets not worry about it as I can manually include them in the template.

Can you please review the inliner aspect?  This IS important as popular browsers still strip out the <style> tag (gmail!) so to be able to give my clients any ability to really edit their own emails to a consistent style, we MUST be able to convert the styles to inline.

Thanks!