Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1636
  • Last Modified:

Formatting HTML Emails in a workflow

I am designing a workflow for a discussion board through Sharepoint 2007. I am wanting to format the email messages that are sent out from the workflow via either CSS or some method so that it is not just black and white text.

I've formatted the html that I want, but it doesn't read any of my css. Of course I would prefer not to code every element of the message as I want future changes to be a lot easier. I was curious if anyone knew how to include css formatting in an email that is sent from a Sharepoint workflow.

Or if there is a better way to include some formatting to this message.

Thanks,
mark
0
crownpack
Asked:
crownpack
  • 3
  • 2
  • 2
  • +3
2 Solutions
 
jasonsbytesCommented:
For email you have to include the CSS inside <style type="text/css"> </style> tags.
0
 
jasonsbytesCommented:
Add them inside the <head> just like you would in an html document.  
0
 
crownpackAuthor Commented:
Yeah I tried that: My code looks like this:
<html>
<head>
<style type="text/css">
<!--
* {
padding:0;
margin:0;
}
table {
      border:thick;
      border-color:#CCCCCC;
}
td {
      font:Verdana, Arial, Helvetica, sans-serif;
      font-size:12px;      
      height:10px;
      border-bottom:thin;
      border-bottom-color:#cccccc;
}
h1 {
      font:Verdana, Arial, Helvetica, sans-serif;
      font-size:16px;
      font-weight:bold;
      color:#FFFFFF;
      padding-left:5px;
}
h2 {
      padding-left:5px;
      font:Verdana, Arial, Helvetica, sans-serif;
      font-size:14px;
}
h3 {
      padding-left:5px;
      font:Verdana, Arial, Helvetica, sans-serif;
      font-size:12px;
}
-->
</style>
</head>
<body>
<table width="85%" border="0" cellpadding="0" cellspacing="0">
   <tr bgcolor="#000033">
      <td colspan="2"><h1>New Inquiry Posted</h1></td>
   </tr>
   <tr>
      <td colspan="2"><h2>A new inquiry has been posted to the Idea Exchange on the Crown Treasure Chest Site.</h2></td>
   </tr>
   <tr>
      <td colspan="2"><h3>The inquiry is as follows:</h3></td>
   </tr>
   <tr>
      <td bgcolor="#CCCCCC"><h3>Subject</h3></td>
      <td>[%Idea Exchange:Subject%]</td>
   </tr>
   <tr>
      <td bgcolor="#CCCCCC"><h3>Body:</h3></td>
      <td>[%Idea Exchange:Description%]</td>
   </tr>
   
   <tr>
      <td bgcolor="#CCCCCC"><h3>Posted By:</h3></td>
      <td>[%Idea Exchange:Created By%]</td>
   </tr>
   <tr>
      <td bgcolor="#CCCCCC"><h3>Response Needed By:</h3></td>
      <td>[%Idea Exchange:Responses Need By%]</td>
   </tr>
   <tr>
      <td bgcolor="#CCCCCC"><h3>Application:</h3></td>
      <td>[%Idea Exchange:Application%]</td>
   </tr>
   <tr>
      <td bgcolor="#CCCCCC"><h3>Industry:</h3></td>
      <td>[%Idea Exchange:Industry%]</td>
   </tr>
   <tr>
      <td bgcolor="#CCCCCC"><h3>SRP1:</h3></td>
      <td>[%Idea Exchange:SRP1%]</td>
   </tr>
   <tr>
      <td bgcolor="#CCCCCC"><h3>SRP2:</h3></td>
      <td>[%Idea Exchange:SRP2%]</td>
   </tr>
   <tr>
      <td colspan="2" bgcolor="#CCCCCC"> <a href="[%Idea Exchange:Encoded Abolute URL%]"><strong>Click Here</strong></a> to post a response to this inquiry.</td>
   </tr>
   <tr>
      <td colspan="2" bgcolor="#CCCCCC"><a href="http://[%Variable:WebAppLocation%]/_layouts/SubNew.aspx?List=[%Variable:IdeaExchangeGUID%]&ID=[%Idea Exchange:ID%]&Source=[%Idea Exchange:Encoded Absolute URL%]"><strong>Click Here</strong></a> to be notified when someone else responds to this </td>
   </tr>
</table>
</body>
</html>

But it ignored all of that and just put the contents of my page without any formatting.
0
Restore individual SQL databases with ease

Veeam Explorer for Microsoft SQL Server delivers an easy-to-use, wizard-driven interface for restoring your databases from a backup. No expert SQL background required. Web interface provides a complete view of all available SQL databases to simplify the recovery of lost database

 
VirusMinusCommented:
for CSS to work effectively you cannot include it traditionally in the head tags. You MUST use inline CSS everywhere.

this is because most email clients will strip out any other CSS.

eg. <h2 style="padding-left:5px; font:Verdana, Arial, Helvetica, sans-serif; font-size:14px;" />
0
 
ellandrdCommented:
>>this is because most email clients will strip out any other CSS.

I'm not sure how true this is.  I build a mailing list in PHP once and in the emails i used CSS in the header and any emails that got send to me from this mailing script where fine.  This was tested in gmail, hotmail, outlook and yahoo.  However I do agree that applying inline CSS is best to use.
0
 
ellandrdCommented:
And on a side note placing this in your header and imports your CSS file will should also work.  I have tried and test it.

<link rel="stylesheet" type="text/css" href="main.css">

ellandrd
0
 
ellandrdCommented:
and use absolute paths instead of relative paths so the CSS file can be always found.
0
 
crownpackAuthor Commented:
To all those who replied, thanks for your comments:
1. Absolute Paths and inline paths did not work.
2. I ended up hard coding everything.

For anyone else dealing with this issue, you must also compress your html before putting it into the workflow. otherwise, your mail client may interpret a carriage return in the code as a carriage return in the email and your spacing will be jacked.

0
 
jonnyfbCommented:
Just a thought, maybe removing the comment marks around your css would work. I was just looking at the code for some html emails i have received (including one from this forum ) and none of them included the comment marks.

I beleive comments are used to prevent older browsers from displaying the code but they probably wont be necessary for email clients.
0
 
Ellis_FCommented:
I had the same problem with emails, and changed the styles to inline and this worked fine from Sharepoint Moss workflow emails. I compressed the entire email onto two lines to avoid incorrect spacing
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now