projects / civicrm-core.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: e2c0052)
Style & layout clean up
authormagnolia61 <richard.van.oosterhout@gmail.com>
Wed, 4 Mar 2020 08:03:25 +0000 (09:03 +0100)
committermagnolia61 <richard.van.oosterhout@gmail.com>
Wed, 4 Mar 2020 20:14:26 +0000 (21:14 +0100)
CRM/Upgrade/Incremental/MessageTemplates.php patch | blob | blame | history
tests/phpunit/CRM/Contribute/Form/Task/InvoiceTest.php patch | blob | blame | history
xml/templates/message_templates/contribution_invoice_receipt_html.tpl patch | blob | blame | history

diff --git a/CRM/Upgrade/Incremental/MessageTemplates.php b/CRM/Upgrade/Incremental/MessageTemplates.php
index 1a7c945a800c33c6f535e87097f0dbcd0b0f1e8e..0b86bc6a6dce72e55275d2fd4cafd1a0e7179c07 100644 (file)
--- a/CRM/Upgrade/Incremental/MessageTemplates.php
+++ b/CRM/Upgrade/Incremental/MessageTemplates.php
@@ -208,6 +208,13 @@ class CRM_Upgrade_Incremental_MessageTemplates {
           ['name' => 'participant_confirm', 'type' => 'html'],
         ],
       ],
+      [
+        'version' => '5.24.alpha1',
+        'upgrade_descriptor' => ts('Layout fixes for the Contribution templates'),
+        'templates' => [
+          ['name' => 'contribution_invoice_receipt', 'type' => 'html'],
+        ],
+      ],
 
     ];
   }
diff --git a/tests/phpunit/CRM/Contribute/Form/Task/InvoiceTest.php b/tests/phpunit/CRM/Contribute/Form/Task/InvoiceTest.php
index 22eb76c60edc3e363a3c3c6fb6d3cf108312bb37..a38b8a2e958e76b727d47b2a1f3dbe8b9a60257a 100644 (file)
--- a/tests/phpunit/CRM/Contribute/Form/Task/InvoiceTest.php
+++ b/tests/phpunit/CRM/Contribute/Form/Task/InvoiceTest.php
@@ -73,8 +73,8 @@ class CRM_Contribute_Form_Task_InvoiceTest extends CiviUnitTestCase {
     $this->assertContains('Due Date', $invoiceHTML[$contribution['id']]);
     $this->assertContains('PAYMENT ADVICE', $invoiceHTML[$contribution['id']]);
 
-    $this->assertContains('AMOUNT DUE: </font></b></td>
-                  <td style = "padding-left:34px;text-align:right;"><b><font size = "1">$ 92.00</font></b></td>', $invoiceHTML[$contribution3['id']]);
+    $this->assertContains('AMOUNT DUE:</font></b></td>
+                  <td style="text-align:right;"><b><font size="1">$ 92.00</font></b></td>', $invoiceHTML[$contribution3['id']]);
 
   }
 
@@ -153,12 +153,12 @@ class CRM_Contribute_Form_Task_InvoiceTest extends CiviUnitTestCase {
     $lineItems = $this->callAPISuccess('LineItem', 'get', ['contribution_id' => $order['id']]);
 
     foreach ($lineItems['values'] as $lineItem) {
-      $this->assertContains("<font size = \"1\">$ {$lineItem['line_total']}</font>", $invoiceHTML);
+      $this->assertContains("<font size=\"1\">$ {$lineItem['line_total']}</font>", $invoiceHTML);
     }
 
     $totalAmount = $this->formatMoneyInput($order['values'][$order['id']]['total_amount']);
     $this->assertContains("TOTAL USD</font></b></td>
-                <td style = \"padding-left:34px;text-align:right;\"><font size = \"1\">$ $totalAmount</font>", $invoiceHTML);
+                <td style=\"text-align:right;\"><font size=\"1\">$ $totalAmount</font>", $invoiceHTML);
 
   }
 
diff --git a/xml/templates/message_templates/contribution_invoice_receipt_html.tpl b/xml/templates/message_templates/contribution_invoice_receipt_html.tpl
index 1a7b64bf5b8387a7cc44fc8b096e38bcd4fca4d6..d6093e8510f7f090825e838f39b962c5963b2887 100644 (file)
--- a/xml/templates/message_templates/contribution_invoice_receipt_html.tpl
+++ b/xml/templates/message_templates/contribution_invoice_receipt_html.tpl
@@ -1,102 +1,89 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <meta http-equiv = "Content-Type" content="text/html; charset=UTF-8" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <title></title>
   </head>
   <body>
-    <table style = "margin-top:2px;padding-left:7px;">
-      <tr>
-        <td><img src = "{$resourceBase}/i/civi99.png" height = "34px" width = "99px"></td>
-      </tr>
-    </table>
-    <center>
-      <table style = "padding-right:19px;font-family: Arial, Verdana, sans-serif;" width = "500" height = "100" border = "0" cellpadding = "2" cellspacing = "1">
+  <div style="padding-top:100px;margin-right:50px;border-style: none;">
+    {if $config->empoweredBy}
+      <table style="margin-top:5px;padding-bottom:50px;" cellpadding="5" cellspacing="0">
+        <tr>
+          <td><img src="{$resourceBase}/i/civi99.png" height="34px" width="99px"></td>
+        </tr>
+      </table>
+    {/if}
+      <table style="font-family: Arial, Verdana, sans-serif;" width="100%" height="100" border="0" cellpadding="5" cellspacing="0">
         <tr>
-          <td style = "padding-left:15px;" ><b><font size = "4" align = "center">{ts}INVOICE{/ts}</font></b></td>
-          <td colspan = "1"></td>
-          <td style = "padding-left:70px;"><b><font size = "1" align = "center" >{ts}Invoice Date:{/ts}</font></b></td>
-          <td><font size = "1" align = "right">{$domain_organization}</font></td>
+          <td width="30%"><b><font size="4" align="center">{ts}INVOICE{/ts}</font></b></td>
+          <td width="50%" valign="bottom"><b><font size="1" align="center">{ts}Invoice Date:{/ts}</font></b></td>
+          <td valign="bottom" style="white-space: nowrap"><b><font size="1" align="right">{$domain_organization}</font></b></td>
         </tr>
         <tr>
           {if $organization_name}
-            <td style = "padding-left:17px;"><font size = "1" align = "center" >{$display_name}  ({$organization_name})</font></td>
+            <td><font size="1" align="center">{$display_name}  ({$organization_name})</font></td>
           {else}
-            <td style = "padding-left:15px;"><font size = "1" align = "center" >{$display_name}</font></td>
+            <td><font size="1" align="center">{$display_name}</font></td>
           {/if}
-          <td colspan = "1"></td>
-          <td style = "padding-left:70px;"><font size = "1" align = "right">{$invoice_date}</font></td>
-          <td>
-            <font size = "1" align = "right">
+          <td><font size="1" align="right">{$invoice_date}</font></td>
+          <td style="white-space: nowrap">
+            <font size="1" align="right">
               {if $domain_street_address }{$domain_street_address}{/if}
               {if $domain_supplemental_address_1 }{$domain_supplemental_address_1}{/if}
-            </font>
+           </font>
           </td>
         </tr>
         <tr>
-          <td style = "padding-left:17px;"><font size = "1" align = "center">{$street_address}   {$supplemental_address_1}</font></td>
-          <td colspan = "1"></td>
-          <td style = "padding-left:70px;"><b><font size = "1" align = "right">{ts}Invoice Number:{/ts}</font></b></td>
+          <td><font size="1" align="center">{$street_address} {$supplemental_address_1}</font></td>
+          <td><b><font size="1" align="right">{ts}Invoice Number:{/ts}</font></b></td>
           <td>
-            <font size = "1" align = "right">
+            <font size="1" align="right">
               {if $domain_supplemental_address_2 }{$domain_supplemental_address_2}{/if}
               {if $domain_state }{$domain_state}{/if}
-            </font>
+           </font>
           </td>
         </tr>
         <tr>
-          <td style = "padding-left:17px;"><font size = "1" align = "center">{$supplemental_address_2}  {$stateProvinceAbbreviation}</font></td>
-          <td colspan="1"></td>
-          <td style = "padding-left:70px;"><font size = "1" align = "right">{$invoice_number}</font></td>
-          <td>
-            <font size = "1" align = "right">
+          <td><font size="1" align="center">{$supplemental_address_2} {$stateProvinceAbbreviation}</font></td>
+          <td><font size="1" align="right">{$invoice_number}</font></td>
+          <td style="white-space: nowrap">
+            <font size="1" align="right">
               {if $domain_city}{$domain_city}{/if}
               {if $domain_postal_code }{$domain_postal_code}{/if}
-            </font>
+           </font>
           </td>
         </tr>
         <tr>
-          <td style = "padding-left:17px;"><font size = "1" align = "right">{$city}  {$postal_code}</font></td>
-          <td colspan="1"></td>
-          <td height = "10" style = "padding-left:70px;"><b><font size = "1"align = "right">{ts}Reference:{/ts}</font></b></td>
-          <td><font size = "1" align = "right"> {if $domain_country}{$domain_country}{/if}</font></td>
+          <td><font size="1" align="right">{$city}  {$postal_code}</font></td>
+          <td height="10"><b><font size="1" align="right">{ts}Reference:{/ts}</font></b></td>
+          <td><font size="1" align="right">{if $domain_country}{$domain_country}{/if}</font></td>
         </tr>
         <tr>
-          <td></td>
-          <td></td>
-          <td style = "padding-left:70px;"><font size = "1"align = "right">{$source}</font></td>
-          <td><font size = "1" align = "right"> {if $domain_phone}{$domain_phone}{/if}</font> </td>
+          <td><font size="1" align="right"> {$country}</font></td>
+          <td><font size="1" align="right">{$source}</font></td>
+          <td valign="top" style="white-space: nowrap"><font size="1" align="right">{if $domain_email}{$domain_email}{/if}</font> </td>
         </tr>
         <tr>
           <td></td>
           <td></td>
-          <td></td>
-          <td><font size = "1" align = "right"> {if $domain_email}{$domain_email}{/if}</font> </td>
+          <td valign="top"><font size="1" align="right">{if $domain_phone}{$domain_phone}{/if}</font> </td>
         </tr>
       </table>
-      <table style = "margin-top:75px;font-family: Arial, Verdana, sans-serif" width = "590" border = "0"cellpadding = "-5" cellspacing = "19" id = "desc">
-        <tr>
-          <td colspan = "2" {$valueStyle}>
-            <table> {* FIXME: style this table so that it looks like the text version (justification, etc.) *}
+
+             <table style="padding-top:75px;font-family: Arial, Verdana, sans-serif;" width="100%" border="0" cellpadding="5" cellspacing="0">
               <tr>
-                <th style = "padding-right:34px;text-align:left;font-weight:bold;width:200px;"><font size = "1">{ts}Description{/ts}</font></th>
-                <th style = "padding-left:34px;text-align:right;font-weight:bold;" ><font size = "1">{ts}Quantity{/ts}</font></th>
-                <th style = "padding-left:34px;text-align:right;font-weight:bold;"><font size = "1">{ts}Unit Price{/ts}</font></th>
-                <th style = "padding-left:34px;text-align:right;font-weight:bold;width:20px;"><font size = "1">{$taxTerm} </font></th>
-                <th style = "padding-left:34px;text-align:right;font-weight:bold;"><font size = "1">{ts 1=$defaultCurrency}Amount %1{/ts}</font></th>
+                <th style="text-align:left;font-weight:bold;width:100%"><font size="1">{ts}Description{/ts}</font></th>
+                <th style="text-align:right;font-weight:bold;white-space: nowrap"><font size="1">{ts}Quantity{/ts}</font></th>
+                <th style="text-align:right;font-weight:bold;white-space: nowrap"><font size="1">{ts}Unit Price{/ts}</font></th>
+                <th style="text-align:right;font-weight:bold;white-space: nowrap"><font size="1">{$taxTerm}</font></th>
+                <th style="text-align:right;font-weight:bold;white-space: nowrap"><font size="1">{ts 1=$defaultCurrency}Amount %1{/ts}</font></th>
               </tr>
               {foreach from=$lineItem item=value key=priceset name=taxpricevalue}
                 {if $smarty.foreach.taxpricevalue.index eq 0}
-                  <tr>
-                    <td colspan = "5" ><hr size="3" style = "color:#000;"></hr></td>
-                  </tr>
                 {else}
-                  <tr>
-                    <td  colspan = "5" style = "color:#F5F5F5;"><hr></hr></td>
-                  </tr>
                 {/if}
                 <tr>
-                  <td style="text-align:left;" ><font size = "1">
+                  <td style="text-align:left;nowrap"><font size="1">
                     {if $value.html_type eq 'Text'}
                       {$value.label}
                     {else}
@@ -105,246 +92,228 @@
                     {if $value.description}
                       <div>{$value.description|truncate:30:"..."}</div>
                     {/if}
-                    </font>
+                   </font>
                   </td>
-                  <td style = "padding-left:34px;text-align:right;"><font size = "1"> {$value.qty}</font></td>
-                  <td style = "padding-left:34px;text-align:right;"><font size = "1"> {$value.unit_price|crmMoney:$currency}</font></td>
+                  <td style="text-align:right;"><font size="1">{$value.qty}</font></td>
+                  <td style="text-align:right;"><font size="1">{$value.unit_price|crmMoney:$currency}</font></td>
                   {if $value.tax_amount != ''}
-                    <td style = "padding-left:34px;text-align:right;width:20px;"><font size = "1"> {$value.tax_rate}%</font></td>
+                    <td style="text-align:right;"><font size="1">{$value.tax_rate}%</font></td>
                   {else}
-                    <td style = "padding-left:34px;text-align:right;width:20px;"><font size = "1">{ts 1=$taxTerm}No %1{/ts}</font></td>
+                    <td style="text-align:right;"><font size="1">{ts 1=$taxTerm}-{/ts}</font></td>
                   {/if}
-                  <td style = "padding-left:34px;text-align:right;"><font size = "1">{$value.subTotal|crmMoney:$currency}</font></td>
+                  <td style="text-align:right;"><font size="1">{$value.subTotal|crmMoney:$currency}</font></td>
                 </tr>
               {/foreach}
-              <tr><td  colspan = "5" style = "color:#F5F5F5;"><hr></hr></td></tr>
               <tr>
-                <td colspan = "3"></td>
-                <td style = "padding-left:20px;text-align:right;"><font size = "1">{ts}Sub Total{/ts}</font></td>
-                <td style = "padding-left:34px;text-align:right;"><font size = "1"> {$subTotal|crmMoney:$currency}</font></td>
+                <td colspan="3"></td>
+                <td style="text-align:right;"><font size="1">{ts}Sub Total{/ts}</font></td>
+                <td style="text-align:right;"><font size="1">{$subTotal|crmMoney:$currency}</font></td>
               </tr>
-              {foreach from = $dataArray item = value key = priceset}
+              {foreach from=$dataArray item=value key=priceset}
                 <tr>
-                  <td colspan = "3"></td>
+                  <td colspan="3"></td>
                     {if $priceset}
-                      <td style = "padding-left:20px;text-align:right;"><font size = "1"> {ts 1=$taxTerm 2=$priceset}TOTAL %1 %2%{/ts}</font></td>
-                      <td style = "padding-left:34px;text-align:right"><font size = "1" align = "right">{$value|crmMoney:$currency}</font> </td>
+                      <td style="text-align:right;white-space: nowrap"><font size="1">{ts 1=$taxTerm 2=$priceset}TOTAL %1 %2%{/ts}</font></td>
+                      <td style="text-align:right"><font size="1" align="right">{$value|crmMoney:$currency}</font> </td>
                     {elseif $priceset == 0}
-                      <td style = "padding-left:20px;text-align:right;"><font size = "1">{ts 1=$taxTerm}TOTAL NO %1{/ts}</font></td>
-                      <td style = "padding-left:34px;text-align:right"><font size = "1" align = "right">{$value|crmMoney:$currency}</font> </td>
+                      <td style="text-align:right;white-space: nowrap"><font size="1">{ts 1=$taxTerm}TOTAL %1{/ts}</font></td>
+                      <td style="text-align:right"><font size="1" align="right">{$value|crmMoney:$currency}</font> </td>
                 </tr>
               {/if}
               {/foreach}
               <tr>
-                <td colspan = "3"></td>
-                <td colspan = "2"><hr></hr></td>
-              </tr>
-              <tr>
-                <td colspan = "3"></td>
-                <td style = "padding-left:20px;text-align:right;"><b><font size = "1">{ts 1=$defaultCurrency}TOTAL %1{/ts}</font></b></td>
-                <td style = "padding-left:34px;text-align:right;"><font size = "1">{$amount|crmMoney:$currency}</font></td>
-                <td style = "padding-left:34px;"><font size = "1" align = "right"></font></td>
+                <td colspan="3"></td>
+                <td style="text-align:right;white-space: nowrap"><b><font size="1">{ts 1=$defaultCurrency}TOTAL %1{/ts}</font></b></td>
+                <td style="text-align:right;"><font size="1">{$amount|crmMoney:$currency}</font></td>
               </tr>
-              {if $is_pay_later == 0}
+             {if $amountDue != 0}
                 <tr>
-                  <td colspan = "3"></td>
-                  <td style = "padding-left:20px;text-align:right;"><font size = "1">
+                  <td colspan="3"></td>
+                  <td style="text-align:right;white-space: nowrap"><font size="1">
                     {if $contribution_status_id == $refundedStatusId}
-                      {ts}LESS Amount Credited{/ts}
+                      {ts}Amount Credited{/ts}
                     {else}
-                      {ts}LESS Amount Paid{/ts}
+                      {ts}Amount Paid{/ts}
                     {/if}
-                    </font>
+                   </font>
                   </td>
-                  <td style = "padding-left:34px;text-align:right;"><font size = "1">{$amountPaid|crmMoney:$currency}</font></td>
+                  <td style="text-align:right;"><font size="1">{$amountPaid|crmMoney:$currency}</font></td>
                 </tr>
                 <tr>
-                  <td colspan = "3"></td>
-                  <td colspan = "2" ><hr></hr></td>
+                  <td colspan="3"></td>
+                  <td colspan="2"><hr></hr></td>
                 </tr>
                 <tr>
-                  <td colspan = "3"></td>
-                  <td style = "padding-left:20px;text-align:right;"><b><font size = "1">{ts}AMOUNT DUE:{/ts} </font></b></td>
-                  <td style = "padding-left:34px;text-align:right;"><b><font size = "1">{$amountDue|crmMoney:$currency}</font></b></td>
-                  <td style = "padding-left:34px;"><font size = "1" align = "right"></font></td>
+                  <td colspan="3"></td>
+                  <td style="text-align:right;white-space: nowrap" ><b><font size="1">{ts}AMOUNT DUE:{/ts}</font></b></td>
+                  <td style="text-align:right;"><b><font size="1">{$amountDue|crmMoney:$currency}</font></b></td>
                 </tr>
               {/if}
               <br/><br/><br/>
               <tr>
-                <td colspan = "3"></td>
+                <td colspan="5"></td>
               </tr>
               {if $contribution_status_id == $pendingStatusId && $is_pay_later == 1}
                 <tr>
-                  <td><b><font size = "1" align = "center">{ts 1=$dueDate}DUE DATE: %1{/ts}</font></b></td>
-                  <td colspan = "3"></td>
+                  <td colspan="3"><b><font size="1" align="center">{ts 1=$dueDate}DUE DATE: %1{/ts}</font></b></td>
+                  <td colspan="2"></td>
                 </tr>
               {/if}
             </table>
           </td>
         </tr>
       </table>
+
       {if $contribution_status_id == $pendingStatusId && $is_pay_later == 1}
-        <table style = "margin-top:5px;padding-right:45px;">
+        <table style="margin-top:5px;" width="100%" border="0" cellpadding="0" cellspacing="0">
           <tr>
-            <td><img src = "{$resourceBase}/i/contribute/cut_line.png" height = "15" width = "630"></td>
+            <td><img src="{$resourceBase}/i/contribute/cut_line.png" height="15"></td>
           </tr>
         </table>
-        <table style = "margin-top:6px;padding-right:20px;font-family: Arial, Verdana, sans-serif" width = "480" border = "0"cellpadding = "-5" cellspacing="19" id = "desc">
+
+        <table style="margin-top:5px;font-family: Arial, Verdana, sans-serif" width="100%" border="0" cellpadding="5" cellspacing="0" id="desc">
           <tr>
-            <td width="60%"><b><font size = "4" align = "right">{ts}PAYMENT ADVICE{/ts}</font></b> <br/><br/> <font size = "1" align = "right"><b>{ts}To: {/ts}</b><div style="width:17em;word-wrap:break-word;">
-              {$domain_organization} <br />
-              {$domain_street_address} {$domain_supplemental_address_1} <br />
-              {$domain_supplemental_address_2} {$domain_state} <br />
-              {$domain_city} {$domain_postal_code} <br />
-              {$domain_country} <br />
-              {$domain_phone} <br />
+            <td width="60%"><b><font size="4" align="right">{ts}PAYMENT ADVICE{/ts}</font></b><br/><br/><font size="1" align="left"><b>{ts}To:{/ts}</b><div style="width:24em;word-wrap:break-word;">
+              {$domain_organization}<br />
+              {$domain_street_address} {$domain_supplemental_address_1}<br />
+              {$domain_supplemental_address_2} {$domain_state}<br />
+              {$domain_city} {$domain_postal_code}<br />
+              {$domain_country}<br />
               {$domain_email}</div>
-              </font><br/><br/><font size="1" align="right">{$notes}</font>
+              {$domain_phone}<br />
+             </font><br/><br/><font size="1" align="left">{$notes}</font>
             </td>
             <td width="40%">
-              <table  cellpadding = "-10" cellspacing = "22"  align="right" >
+              <table cellpadding="5" cellspacing="0"  width="100%" border="0">
                 <tr>
-                  <td colspan = "2"></td>
-                  <td><font size = "1" align = "right" style="font-weight:bold;">{ts}Customer: {/ts}</font></td>
-                  <td ><font size = "1" align = "right">{$display_name}</font></td>
+                  <td width="100%"><font size="1" align="right" style="font-weight:bold;">{ts}Customer:{/ts}</font></td>
+                  <td style="white-space: nowrap"><font size="1" align="right">{$display_name}</font></td>
                 </tr>
                 <tr>
-                  <td colspan = "2"></td>
-                  <td><font size = "1" align = "right" style="font-weight:bold;">{ts}Invoice Number: {/ts}</font></td>
-                  <td><font size = "1" align = "right">{$invoice_number}</font></td>
+                  <td><font size="1" align="right" style="font-weight:bold;">{ts}Invoice Number:{/ts}</font></td>
+                  <td><font size="1" align="right">{$invoice_number}</font></td>
                 </tr>
-                <tr><td colspan = "5"style = "color:#F5F5F5;"><hr></hr></td></tr>
+                <tr><td colspan="5" style="color:#F5F5F5;"><hr></td></tr>
                 {if $is_pay_later == 1}
                   <tr>
-                    <td colspan = "2"></td>
-                    <td><font size = "1" align = "right" style="font-weight:bold;">{ts}Amount Due:{/ts}</font></td>
-                    <td><font size = "1" align = "right" style="font-weight:bold;">{$amount|crmMoney:$currency}</font></td>
+                    <td><font size="1" align="right" style="font-weight:bold;">{ts}Amount Due:{/ts}</font></td>
+                    <td><font size="1" align="right" style="font-weight:bold;">{$amount|crmMoney:$currency}</font></td>
                   </tr>
                 {else}
                   <tr>
-                    <td colspan = "2"></td>
-                    <td><font size = "1" align = "right" style="font-weight:bold;">{ts}Amount Due: {/ts}</font></td>
-                    <td><font size = "1" align = "right" style="font-weight:bold;">{$amountDue|crmMoney:$currency}</font></td>
+                    <td><font size="1" align="right" style="font-weight:bold;">{ts}Amount Due:{/ts}</font></td>
+                    <td><font size="1" align="right" style="font-weight:bold;">{$amountDue|crmMoney:$currency}</font></td>
                   </tr>
                 {/if}
                 <tr>
-                  <td colspan = "2"></td>
-                  <td><font size = "1" align = "right" style="font-weight:bold;">{ts}Due Date:  {/ts}</font></td>
-                  <td><font size = "1" align = "right">{$dueDate}</font></td>
+                  <td><font size="1" align="right" style="font-weight:bold;">{ts}Due Date:{/ts}</font></td>
+                  <td><font size="1" align="right">{$dueDate}</font></td>
                 </tr>
                 <tr>
-                  <td colspan = "5" style = "color:#F5F5F5;"><hr></hr></td>
+                  <td colspan="5" style="color:#F5F5F5;"><hr></td>
                 </tr>
               </table>
-            </td>
-          </tr>
-        </table>
       {/if}
 
       {if $contribution_status_id == $refundedStatusId || $contribution_status_id == $cancelledStatusId}
-        <table style = "margin-top:2px;padding-left:7px;page-break-before: always;">
+      {if $config->empoweredBy}
+        <table style="margin-top:2px;padding-left:7px;page-break-before: always;">
           <tr>
-            <td><img src = "{$resourceBase}/i/civi99.png" height = "34px" width = "99px"></td>
+            <td><img src="{$resourceBase}/i/civi99.png" height="34px" width="99px"></td>
           </tr>
         </table>
-    <center>
+      {/if}
 
-      <table style = "padding-right:19px;font-family: Arial, Verdana, sans-serif" width = "500" height = "100" border = "0" cellpadding = "2" cellspacing = "1">
+    <center>
+      <table style="font-family: Arial, Verdana, sans-serif" width="100%" height="100" border="0" cellpadding="5" cellspacing="5">
         <tr>
-          <td style = "padding-left:15px;" ><b><font size = "4" align = "center">{ts}CREDIT NOTE{/ts}</font></b></td>
-          <td colspan = "1"></td>
-          <td style = "padding-left:70px;"><b><font size = "1" align = "right">{ts}Date:{/ts}</font></b></td>
-          <td><font size = "1" align = "right">{$domain_organization}</font></td>
+          <td style="padding-left:15px;"><b><font size="4" align="center">{ts}CREDIT NOTE{/ts}</font></b></td>
+          <td style="padding-left:30px;"><b><font size="1" align="right">{ts}Date:{/ts}</font></b></td>
+          <td><font size="1" align="right">{$domain_organization}</font></td>
         </tr>
         <tr>
           {if $organization_name}
-            <td style = "padding-left:17px;"><font size = "1" align = "center">{$display_name}  ({$organization_name})</font></td>
+            <td style="padding-left:17px;"><font size="1" align="center">{$display_name}  ({$organization_name})</font></td>
           {else}
-            <td style = "padding-left:17px;"><font size = "1" align = "center">{$display_name}</font></td>
+            <td style="padding-left:17px;"><font size="1" align="center">{$display_name}</font></td>
           {/if}
-          <td colspan = "1"></td>
-          <td style = "padding-left:70px;"><font size = "1" align = "right">{$invoice_date}</font></td>
+          <td style="padding-left:30px;"><font size="1" align="right">{$invoice_date}</font></td>
           <td>
-            <font size = "1" align = "right">
+            <font size="1" align="right">
               {if $domain_street_address }{$domain_street_address}{/if}
               {if $domain_supplemental_address_1 }{$domain_supplemental_address_1}{/if}
-            </font>
+           </font>
           </td>
         </tr>
         <tr>
-          <td style = "padding-left:17px;"><font size = "1" align = "center">{$street_address}   {$supplemental_address_1}</font></td>
-          <td colspan = "1"></td>
-          <td style = "padding-left:70px;"><b><font size = "1" align = "right">{ts}Credit Note Number:{/ts}</font></b></td>
+          <td style="padding-left:17px;"><font size="1" align="center">{$street_address}   {$supplemental_address_1}</font></td>
+          <td style="padding-left:30px;"><b><font size="1" align="right">{ts}Credit Note Number:{/ts}</font></b></td>
           <td>
-            <font size = "1" align = "right">
+            <font size="1" align="right">
               {if $domain_supplemental_address_2 }{$domain_supplemental_address_2}{/if}
               {if $domain_state }{$domain_state}{/if}
-            </font>
+           </font>
           </td>
         </tr>
         <tr>
-          <td style = "padding-left:17px;"><font size = "1" align = "center">{$supplemental_address_2}  {$stateProvinceAbbreviation}</font></td>
-          <td colspan="1"></td>
-          <td style = "padding-left:70px;"><font size = "1" align = "right">{$creditnote_id}</font></td>
+          <td style="padding-left:17px;"><font size="1" align="center">{$supplemental_address_2}  {$stateProvinceAbbreviation}</font></td>
+          <td style="padding-left:30px;"><font size="1" align="right">{$creditnote_id}</font></td>
           <td>
-            <font size = "1" align = "right">
+            <font size="1" align="right">
               {if $domain_city}{$domain_city}{/if}
               {if $domain_postal_code }{$domain_postal_code}{/if}
-            </font>
+           </font>
           </td>
         </tr>
         <tr>
-          <td style = "padding-left:17px;"><font size = "1" align = "right">{$city}  {$postal_code}</font></td>
-          <td colspan="1"></td>
-          <td height = "10" style = "padding-left:70px;"><b><font size = "1"align = "right">{ts}Reference:{/ts}</font></b></td>
+          <td style="padding-left:17px;"><font size="1" align="right">{$city}  {$postal_code}</font></td>
+          <td height="10" style="padding-left:30px;"><b><font size="1" align="right">{ts}Reference:{/ts}</font></b></td>
           <td>
-            <font size = "1" align = "right">
+            <font size="1" align="right">
               {if $domain_country}{$domain_country}{/if}
-            </font>
+           </font>
           </td>
         </tr>
         <tr>
           <td></td>
-          <td></td>
-          <td style = "padding-left:70px;"><font size = "1"align = "right">{$source}</font></td>
+          <td style="padding-left:30px;"><font size="1" align="right">{$source}</font></td>
           <td>
-            <font size = "1" align = "right">
-              {if $domain_phone}{$domain_phone}{/if}
-            </font>
+            <font size="1" align="right">
+              {if $domain_email}{$domain_email}{/if}
+           </font>
           </td>
         </tr>
         <tr>
-          <td></td>
           <td></td>
           <td></td>
           <td>
-            <font size = "1" align = "right">
-              {if $domain_email}{$domain_email}{/if}
-            </font>
+            <font size="1" align="right">
+              {if $domain_phone}{$domain_phone}{/if}
+           </font>
           </td>
         </tr>
       </table>
 
-      <table style = "margin-top:75px;font-family: Arial, Verdana, sans-serif" width = "590" border = "0"cellpadding = "-5" cellspacing = "19" id = "desc">
+      <table style="margin-top:75px;font-family: Arial, Verdana, sans-serif" width="100%" border="0" cellpadding="5" cellspacing="5" id="desc">
         <tr>
-          <td colspan = "2" {$valueStyle}>
+          <td colspan="2" {$valueStyle}>
             <table> {* FIXME: style this table so that it looks like the text version (justification, etc.) *}
               <tr>
-                <th style = "padding-right:28px;text-align:left;font-weight:bold;width:200px;"><font size = "1">{ts}Description{/ts}</font></th>
-                <th style = "padding-left:28px;text-align:right;font-weight:bold;"><font size = "1">{ts}Quantity{/ts}</font></th>
-                <th style = "padding-left:28px;text-align:right;font-weight:bold;"><font size = "1">{ts}Unit Price{/ts}</font></th>
-                <th style = "padding-left:28px;text-align:right;font-weight:bold;"><font size = "1">{$taxTerm} </font></th>
-                <th style = "padding-left:28px;text-align:right;font-weight:bold;"><font size = "1">{ts 1=$defaultCurrency}Amount %1{/ts}</font></th>
+                <th style="padding-right:28px;text-align:left;font-weight:bold;width:200px;"><font size="1">{ts}Description{/ts}</font></th>
+                <th style="padding-left:28px;text-align:right;font-weight:bold;"><font size="1">{ts}Quantity{/ts}</font></th>
+                <th style="padding-left:28px;text-align:right;font-weight:bold;"><font size="1">{ts}Unit Price{/ts}</font></th>
+                <th style="padding-left:28px;text-align:right;font-weight:bold;"><font size="1">{$taxTerm}</font></th>
+                <th style="padding-left:28px;text-align:right;font-weight:bold;"><font size="1">{ts 1=$defaultCurrency}Amount %1{/ts}</font></th>
               </tr>
               {foreach from=$lineItem item=value key=priceset name=pricevalue}
                 {if $smarty.foreach.pricevalue.index eq 0}
-                  <tr><td  colspan = "5" ><hr size="3" style = "color:#000;"></hr></td></tr>
+                  <tr><td colspan="5"><hr size="3" style="color:#000;"></hr></td></tr>
                 {else}
-                  <tr><td  colspan = "5" style = "color:#F5F5F5;"><hr></hr></td></tr>
+                  <tr><td colspan="5" style="color:#F5F5F5;"><hr></hr></td></tr>
                 {/if}
                 <tr>
                   <td style ="text-align:left;"  >
-                    <font size = "1">
+                    <font size="1">
                       {if $value.html_type eq 'Text'}
                         {$value.label}
                       {else}
@@ -353,100 +322,101 @@
                       {if $value.description}
                         <div>{$value.description|truncate:30:"..."}</div>
                       {/if}
-                    </font>
+                   </font>
                   </td>
-                  <td style = "padding-left:28px;text-align:right;"><font size = "1"> {$value.qty}</font></td>
-                  <td style = "padding-left:28px;text-align:right;"><font size = "1"> {$value.unit_price|crmMoney:$currency}</font></td>
+                  <td style="padding-left:28px;text-align:right;"><font size="1">{$value.qty}</font></td>
+                  <td style="padding-left:28px;text-align:right;"><font size="1">{$value.unit_price|crmMoney:$currency}</font></td>
                   {if $value.tax_amount != ''}
-                    <td style = "padding-left:28px;text-align:right;"><font size = "1"> {$value.tax_rate}%</font></td>
+                    <td style="padding-left:28px;text-align:right;"><font size="1">{$value.tax_rate}%</font></td>
                   {else}
-                    <td style = "padding-left:28px;text-align:right"><font size = "1" >{ts 1=$taxTerm}No %1{/ts}</font></td>
+                    <td style="padding-left:28px;text-align:right"><font size="1">{ts 1=$taxTerm}No %1{/ts}</font></td>
                   {/if}
-                  <td style = "padding-left:28px;text-align:right;"><font size = "1" >{$value.subTotal|crmMoney:$currency}</font></td>
+                  <td style="padding-left:28px;text-align:right;"><font size="1">{$value.subTotal|crmMoney:$currency}</font></td>
                 </tr>
               {/foreach}
-              <tr><td  colspan = "5" style = "color:#F5F5F5;"><hr></hr></td></tr>
+              <tr><td colspan="5" style="color:#F5F5F5;"><hr></hr></td></tr>
               <tr>
-                <td colspan = "3"></td>
-                <td style = "padding-left:28px;text-align:right;"><font size = "1">{ts}Sub Total{/ts}</font></td>
-                <td style = "padding-left:28px;text-align:right;"><font size = "1"> {$subTotal|crmMoney:$currency}</font></td>
+                <td colspan="3"></td>
+                <td style="padding-left:28px;text-align:right;"><font size="1">{ts}Sub Total{/ts}</font></td>
+                <td style="padding-left:28px;text-align:right;"><font size="1">{$subTotal|crmMoney:$currency}</font></td>
               </tr>
-              {foreach from = $dataArray item = value key = priceset}
+              {foreach from=$dataArray item=value key=priceset}
                 <tr>
-                  <td colspan = "3"></td>
+                  <td colspan="3"></td>
                   {if $priceset}
-                    <td style = "padding-left:28px;text-align:right;"><font size = "1"> {ts 1=$taxTerm 2=$priceset}TOTAL %1 %2%{/ts}</font></td>
-                    <td style = "padding-left:28px;text-align:right;"><font size = "1" align = "right">{$value|crmMoney:$currency}</font> </td>
+                    <td style="padding-left:28px;text-align:right;"><font size="1">{ts 1=$taxTerm 2=$priceset}TOTAL %1 %2%{/ts}</font></td>
+                    <td style="padding-left:28px;text-align:right;"><font size="1" align="right">{$value|crmMoney:$currency}</font> </td>
                   {elseif $priceset == 0}
-                    <td style = "padding-left:28px;text-align:right;"><font size = "1">{ts 1=$taxTerm}TOTAL NO %1{/ts}</font></td>
-                    <td style = "padding-left:28px;text-align:right;"><font size = "1" align = "right">{$value|crmMoney:$currency}</font> </td>
+                    <td style="padding-left:28px;text-align:right;"><font size="1">{ts 1=$taxTerm}TOTAL NO %1{/ts}</font></td>
+                    <td style="padding-left:28px;text-align:right;"><font size="1" align="right">{$value|crmMoney:$currency}</font> </td>
                 </tr>
                 {/if}
               {/foreach}
               <tr>
-                <td colspan = "3"></td>
-                <td colspan = "2"><hr></hr></td>
+                <td colspan="3"></td>
+                <td colspan="2"><hr></hr></td>
               </tr>
               <tr>
-                <td colspan = "3"></td>
-                <td style = "padding-left:28px;text-align:right;"><b><font size = "1">{ts 1=$defaultCurrency}TOTAL %1{/ts}</font></b></td>
-                <td style = "padding-left:28px;text-align:right;"><font size = "1">{$amount|crmMoney:$currency}</font></td>
+                <td colspan="3"></td>
+                <td style="padding-left:28px;text-align:right;"><b><font size="1">{ts 1=$defaultCurrency}TOTAL %1{/ts}</font></b></td>
+                <td style="padding-left:28px;text-align:right;"><font size="1">{$amount|crmMoney:$currency}</font></td>
               </tr>
               {if $is_pay_later == 0}
                 <tr>
-                  <td colspan = "3"></td>
-                  <td style = "padding-left:28px;text-align:right;"><font size = "1" >{ts}LESS Credit to invoice(s){/ts}</font></td>
-                  <td style = "padding-left:28px;text-align:right;"><font size = "1">{$amount|crmMoney:$currency}</font></td>
+                  <td colspan="3"></td>
+                  <td style="padding-left:28px;text-align:right;"><font size="1">{ts}LESS Credit to invoice(s){/ts}</font></td>
+                  <td style="padding-left:28px;text-align:right;"><font size="1">{$amount|crmMoney:$currency}</font></td>
                 </tr>
                 <tr>
-                  <td colspan = "3"></td>
-                  <td colspan = "2" ><hr></hr></td>
+                  <td colspan="3"></td>
+                  <td colspan="2"><hr></hr></td>
                 </tr>
                 <tr>
-                  <td colspan = "3"></td>
-                  <td style = "padding-left:28px;text-align:right;"><b><font size = "1">{ts}REMAINING CREDIT{/ts}</font></b></td>
-                  <td style = "padding-left:28px;text-align:right;"><b><font size = "1">{$amountDue|crmMoney:$currency}</font></b></td>
-                  <td style = "padding-left:28px;"><font size = "1" align = "right"></font></td>
+                  <td colspan="3"></td>
+                  <td style="padding-left:28px;text-align:right;"><b><font size="1">{ts}REMAINING CREDIT{/ts}</font></b></td>
+                  <td style="padding-left:28px;text-align:right;"><b><font size="1">{$amountDue|crmMoney:$currency}</font></b></td>
+                  <td style="padding-left:28px;"><font size="1" align="right"></font></td>
                 </tr>
               {/if}
               <br/><br/><br/>
               <tr>
-                <td colspan = "3"></td>
+                <td colspan="3"></td>
               </tr>
               <tr>
                 <td></td>
-                <td colspan = "3"></td>
+                <td colspan="3"></td>
               </tr>
             </table>
           </td>
         </tr>
       </table>
-      <table style = "margin-top:5px;padding-right:45px;">
+
+      <table width="100%" style="margin-top:5px;padding-right:45px;">
         <tr>
-          <td><img src = "{$resourceBase}/i/contribute/cut_line.png" height = "15" width = "630"></td>
+          <td><img src="{$resourceBase}/i/contribute/cut_line.png" height="15" width="100%"></td>
         </tr>
       </table>
 
-      <table style = "margin-top:6px;padding-right:20px;font-family: Arial, Verdana, sans-serif" width = "507" border = "0"cellpadding = "-5" cellspacing="19" id = "desc">
+      <table style="margin-top:6px;font-family: Arial, Verdana, sans-serif" width="100%" border="0" cellpadding="5" cellspacing="5" id="desc">
         <tr>
-          <td width="60%"><font size = "4" align = "right"><b>{ts}CREDIT ADVICE{/ts}</b><br/><br /><div  style="font-size:10px;max-width:300px;">{ts}Please do not pay on this advice. Deduct the amount of this Credit Note from your next payment to us{/ts}</div><br/></font></td>
+          <td width="60%"><font size="4" align="right"><b>{ts}CREDIT ADVICE{/ts}</b><br/><br /><div style="font-size:10px;max-width:300px;">{ts}Please do not pay on this advice. Deduct the amount of this Credit Note from your next payment to us{/ts}</div><br/></font></td>
           <td width="40%">
-            <table    align="right" >
+            <table align="right">
               <tr>
-                <td colspan = "2"></td>
-                <td><font size = "1" align = "right" style="font-weight:bold;">{ts}Customer:{/ts} </font></td>
-                <td><font size = "1" align = "right" >{$display_name}</font></td>
+                <td colspan="2"></td>
+                <td><font size="1" align="right" style="font-weight:bold;">{ts}Customer:{/ts}</font></td>
+                <td><font size="1" align="right">{$display_name}</font></td>
               </tr>
               <tr>
-                <td colspan = "2"></td>
-                <td><font size = "1" align = "right" style="font-weight:bold;">{ts}Credit Note#:{/ts} </font></td>
-                <td><font size = "1" align = "right">{$creditnote_id}</font></td>
+                <td colspan="2"></td>
+                <td><font size="1" align="right" style="font-weight:bold;">{ts}Credit Note#:{/ts}</font></td>
+                <td><font size="1" align="right">{$creditnote_id}</font></td>
               </tr>
-              <tr><td  colspan = "5"style = "color:#F5F5F5;"><hr></hr></td></tr>
+              <tr><td colspan="5"style="color:#F5F5F5;"><hr></hr></td></tr>
               <tr>
-                <td colspan = "2"></td>
-                <td><font size = "1" align = "right" style="font-weight:bold;">{ts}Credit Amount:{/ts}</font></td>
-                <td width='50px'><font size = "1" align = "right" style="font-weight:bold;">{$amount|crmMoney:$currency}</font></td>
+                <td colspan="2"></td>
+                <td><font size="1" align="right" style="font-weight:bold;">{ts}Credit Amount:{/ts}</font></td>
+                <td width='50px'><font size="1" align="right" style="font-weight:bold;">{$amount|crmMoney:$currency}</font></td>
               </tr>
             </table>
           </td>
@@ -454,5 +424,7 @@
       </table>
     {/if}
     </center>
+
+  </div>
   </body>
 </html>