0

I have a VF page created with resources and css in it. I would like to create a classic Email template that poke that VF page and include it in the body of my email.I tried to copy the content of my VF page and use this in my email template by changing the merge tags but I lost all my CSS. to be able to make it work, I need to include the CSS in the body but no preview available to make changes... Any idea on how I can achieve that CSS in my code?

    <messaging:emailTemplate subject="Voici votre facture" recipientType="Contact" relatedToType="Invoice__c" replyTo="xxx@xxx.com">
    <messaging:htmlEmailBody >

        <html>
            <body>
                <p>Dear {!recipient.Name}</p>
                <div class="header">
                    <div><img src="{!URLFOR($Resource.Invoice,'Logo.png')}" width="175"/></div>
                    <div><p style="margin-top: 0; margin-bottom: 0">CP 96524 Montréal Gare Centrale</p></div>
                    <div><p style="margin-top: 0; margin-bottom: 0">Montréal, Québec, H3B 5J8</p></div>
                    <div><p style="margin-top: 0; margin-bottom: 0">514-613-3264</p></div>
                    <div><a href="mailto:payables@fidelitix.ca"></a></div>
                </div>
                
                <div class="row">
                    <div class="columnLeft">
                        <div style="color: #777777; font-size: 12px;">FACTURÉ À :</div>
                        <h3 style="margin-bottom: 0">{!relatedTo.Account__r.Name}</h3>
                        <div><p style="margin-top: 0; margin-bottom: 0">{!relatedTo.BilltoAddress__c}</p></div>
                        <div><p style="margin-top: 0">{!relatedTo.BilltoCityProvinceZip__c}</p></div>
                    </div>
                    
                    <div class="columnRight">
                        <h1 style="margin-top: 0">{!relatedTo.Name}</h1>
                        <div> <p style="margin-top: 0; margin-bottom: 0">Date de facturation:  <apex:outputText value="{0,date,MM/dd/yyyy}"><apex:param value="{!relatedTo.Date_of_Issue__c}"/></apex:outputText></p></div>
                        <div> <p style="margin-top: 0">Date échéance:  <apex:outputText value="{0,date,MM/dd/yyyy}"><apex:param value="{!relatedTo.Due_Date__c}"/></apex:outputText></p></div>
                    </div>
                </div>
                <div>
                    <div class="columnMain">
                        <p style="margin-top: 0; margin-bottom: 0">Contract #: {!relatedTo.Contract_Number__c}</p>
                        <p style="margin-top: 0; margin-bottom: 0">Campaign Name: {!relatedTo.Opportunity__c}</p>
                    </div>
                    
                </div>
                <div class="columnMain" style="padding-top:50px; height:500px;">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <thead>
                          <tr>
                            <th class="no">#</th>
                            <th class="desc">PRODUITS</th>
                            <th class="qty">QUANTITÉ</th>
                            <th class="unit">PRIX</th>
                            <th class="taxes">TPS/TVH</th>
                            <th class="taxes">TVQ</th>
                            <th class="total">TOTAL</th>
                          </tr>
                        </thead>
                        <tbody>
                           <apex:variable var="i" value="{!1}"/>
                           <apex:repeat value="{!relatedTo.Invoice_Products__r}" var="line" >
                             <tr style="line-height:1">
                                <td class="no" style="width:10px; height:15px;">{!i}</td>
                                <td class="desc" style="width:30%; height:10px;"><h3>{!line.Code__c}</h3><p>{!line.Product_Name__c}</p></td>
                                <td class="unit" style="width:10%; height:10px; text-align:Center;">{!line.Quantity__c}</td>
                                <td class="qty" style="width:10px; height:10px; text-align:Center;">${!line.Rate__c}</td>
                                <td class="taxes" style="width:10px; height:10px; text-align:Center;">${!line.TPS_TVH__c}</td>
                                <td class="taxes" style="width:10px; height:10px; text-align:Center;">${!line.TVQ__c}</td>
                                <td class="total" style="width:10%; height:10px; text-align:Center;">${!line.Total__c}</td>
                             </tr>
                           <apex:variable var="i" value="{!i+1}"/>  
                           </apex:repeat>
                        </tbody>
                        <tfoot>
                          <tr>
                              <td colspan="4"></td>
                              <td colspan="2">SOUS-TOTAL</td>
                              <td>${!relatedTo.Sub_Total__c}</td>
                          </tr>
                          <tr>
                              <td colspan="4"></td>
                              <td colspan="2">TPS/TVH</td>
                              <td>${!relatedTo.TPS_TVH__c}</td>
                          </tr>
                          <tr>
                              <td colspan="4"></td>
                              <td colspan="2">TVQ</td>
                              <td>${!relatedTo.TVQ__c}</td>
                          </tr>
                          <tr class="grandtotal">
                            <td colspan="4"></td>
                            <td colspan="2">GRAND TOTAL</td>
                            <td>${!relatedTo.Total__c}</td>
                          </tr>
                        </tfoot>
                    </table>
                    <div class="footer" >
...

Thanks for your help

2
  • I'm not sure I understand -- you are trying to embed the above VF page markup into an HTML email template?
    – cropredy
    Sep 19 at 4:47
  • What do you mean "classic Email template that poke that VF page"? Sep 19 at 19:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.