CSS in Email


Recently I had a problem (and a solution for it) that I'd like to share with the comunity.
The costumer has 9 oml's that share the same css. But instead of copying the css to each one, or using the "External Stylesheet" option in service studio, I decided to use another method.

I created an Espace called "StyleEspace.oml" and added the line "@import url("/StyleEspace/web.css");" to every stylesheet on the other Espaces.

The "StyleEspace.oml" has all the common styles and the ServiceStudio styles (like the ".Button", the ".EditRecord_Caption", etc....) definition. The other Espaces that "import" this one, have the same styles, but with no content

.Button {
.EditRecord_Caption {

I left them blank because they would override the imported styles.
And I didn't deleted them because if they don't exist in the stylesheet, they don't appear as a choice on the "Style Combobox" for each Widget.

This works fine and has the advantage of not needing to republish an Espace if you change one of the styles on the "StyleEspace.oml" (because the "import" command works at runtime).

The problem I faced was when creating a page to send through RichMail. Because Outlook (2003 and 2007) doesn't support the "import" command and the user was receiving an unformatted email without any styles.

I dealt with this problem by using the action "AddStyleSheetTag" on the HTTPRequestHandler Extension. This adds a "<link rel=stylesheet>" element to the "<HEAD>" of the page. Now it works on emails too. All you have to do is add this action to the Preparation of the screen that you want to send through RichMail.

I'm sending 2 oml's attached. One is the "StyleEspace" that only contains the styles and one Espace that consumes it and uses the trick I talked about to send a formatted email.