Customizing the display of Notes e-mail documents

With Mainsoft SharePoint Integrator, you can upload Lotus Notes e-mail messages and document attachments to SharePoint document libraries. These e-mails can be opened and viewed from either the SharePoint Integrator sidebar panel in Lotus Notes, or from the SharePoint site's Web interface over the Internet.

By default, a Lotus Notes e-mail document looks like this when it is opened in Internet Explorer:

Notes e-mail document

To customize the HTML formatting of e-mail headers, follow these steps:

  1. Create a new empty file named mail.aspx on your local computer.

  2. Copy the content below into the file:

    <html>
<head>
    <title>
        <!--SUBJECT-->
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"> 
        DIV.email {MARGIN: 0px auto; WIDTH: 100%}
        DIV.emailheader {PADDING-LEFT: 0px;PADDING-TOP: 15px;
            PADDING-RIGHT: 0px;BACKGROUND-REPEAT: no-repeat;HEIGHT: 62px}
        DIV.subject {FONT-FAMILY: sans-serif; FONT-WEIGHT: bold; 
            FONT-SIZE: 12pt; COLOR: black}
        DIV.fromto_line {FONT-FAMILY: sans-serif; FONT-SIZE: 12pt; 
            PADDING-TOP: 3px; FLOAT: bottom}
        DIV.datetime_title {FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; 
            FLOAT: right; COLOR: black;}
        DIV.cc {FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; 
            PADDING-TOP: 5px; CLEAR: both}
        SPAN.from_value {FONT-WEIGHT: bold;COLOR: orange; 
            MARGIN-RIGHT: 10px}
        SPAN.msg_hdr_title {COLOR: lightgrey;}
        SPAN.msg_hdr_value {COLOR: black}
        DIV.separator {MARGIN-TOP: 10px;MARGIN-BOTTOM: 10px;
            BORDER-BOTTOM: 2px groove}
    </style>
</head>
<body>
    <div class="email">
        <div class="emailheader">
            <table style="width: 100%">
                <tr>
                    <td>
                        <div class="subject">
                            <img src = "cid:globe.gif@MainsoftLogo" />
                        </div>
                    </td>
                    <td>
                        <div class="subject">
                            <!--SUBJECT-->
                        </div>
                        <div class="fromto_line">
                            <span class="from_value">
                                <!--FROM-->
                            </span>
                        </div>
                        <div class="fromto_line">
                            <span class="msg_hdr_title">To:</span> 
                            <span class="msg_hdr_value">
                                <!--TO-->
                            </span>
                        </div>
                                <!--CC-->
                        <!--div class="cc"-->
                            <!--span class="msg_hdr_title">Cc:</span-->
                            <!--span class="msg_hdr_value">$$$CC$$$</span-->
                        <!--/div-->
                    </td>
                    <td align="right" valign="top">
                        <div class="datetime_title">
                            <span class="date_title">
                                <!--DATE-->
                            </span>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

  3. Modify the HTML code according to your requirements. For example, to replace the e-mail icon and change the font of the subject, make these highlighted changes:

            DIV.email {MARGIN: 0px auto; WIDTH: 100%}
        DIV.emailheader {PADDING-LEFT: 0px;PADDING-TOP: 15px;
            PADDING-RIGHT: 0px;BACKGROUND-REPEAT: no-repeat;HEIGHT: 62px}
        DIV.subject {font-family: sans-serif;
            font-weight: bold; font-size: 12pt; font-style: italic;
            font-variant: small-caps; letter-spacing: -1px;}
        DIV.fromto_line {FONT-FAMILY: sans-serif; FONT-SIZE: 12pt; 
            PADDING-TOP: 3px; FLOAT: bottom}
        DIV.datetime_title {FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; 
            FLOAT: right; COLOR: black;}

    <body>
    <div class="email">
        <div class="emailheader">
            <table style="width: 100%">
                <tr>
                    <td>
                        <div class="subject">
                            <img src = "http://www.mainsoft.com/images/mail.png" />
                        </div>
                    </td>
                    <td>

    This is what you will see:

    HTML view

  4. Create a new Site content type from SharePoint's Web interface: Site Settings > Site content types > Create. Give the new content type a Name, set the Parent Content Type to Document and click OK.

  5. From the Advanced settings of the newly created content type, upload the mail.aspx file as a new document template.

  6. Add the new content type to the SharePoint document libraries where you want the new e-mail format to be available. In Document Library Settings, the Change new button order and default content type link lets you prevent the new content type from showing up on the document library's New menu button.

  7. [Optional] Associate e-mails uploaded to SharePoint automatically with the new e-mail content type.