Moving all your CSS styles and placing them as in-lines styles for HTML E-mailers

This isn’t exactly an action but the people who tend to use this part of the Freewaytalk area will probably find this of the most value as it is a bit advanced to set up and to get to work. It also means you need to know how to install Textmate bundles and a Terminal window.

Anyway for those who want to have a go, here is the TextMate specific bundle Script download address and you will need to read the instructions on how to install:

A little while ago I started to look at what would be involved in getting all the css styles inline (for an emailer) Freeway is a fantastic tool for e-mailers except for a few things, and that being if like me you want to style text and image backgrounds etc etc then using HTML3.2 is really really limiting, So I tend to use 4.01 transitional. The downside to using this in Freeway is ideally you need to make all the styles inline including span styles table background etc etc etc. and up until recently I have been using the extended cell and table button a hell of a lot!! well it looks like most of that can be side stepped by use of textmate and a specific bundle.

From my initial tests it looks like this bundle when applied to the published Freeway HTML file will apply all your css styles that reside outside the body and place them as in-lines in the relevant parts of your HTML, cutting out huge amounts of time.

There are just a few caveats… three in fact, prior to using the bundle.

You will still need to remove the first div and final /div
and if you need to center the emailer then you would need to add align=center to the first table which is just after the first div which you deleted because freeway uses that div to center its page. The final thing to remember is the bundle doesn’t like the which placed just after the and just before the line.
if you just remove those lines then the bundle will work correctly without errors.

All you need to do then is run:
Bundles>Email Tester>Generate new doc w/inline CSS

This should generate a new file with all the styles placed as inline.
Then you need to delete all the reference stuff that is before:

  <html style="height: 100%;">

and and the old CSS references.

Finally save your new html file.

It sounds a lot of work but is in fact it’s really quick. Obviously you only want to do this when you are ready to actually start testing or sending out your emailer.
I tested it a few times and it’s working a treat!!

I hope people find this helpful

All the best Max

actionsdev mailing list
Update your subscriptions at: