Jump to content

Helpful Global Email Customized Template - With Header and Footer Code


nwd

Recommended Posts

Hello all,

After experiencing some issues with the Global CSS Style not working, I decided to customize my global emails strictly using inline styling.

I didn't see any templates of this so I am posting my code below. All you need to do is copy and paste the code in the Global Email Header Content and Global Email Footer Content sections accordingly.

 

Then simply modify the color's to match your theme. Of course it can be modified even more if you choose to. But this will give you a head start to make sure you emails are sent out with a little more class.

 

Example of email output from this code:

email-template-copy.gif

 

Simply add this code to your Global Email Header Content:

<!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">
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <title></title>
   </head>
   <body>
<table bgcolor="#48b1e1" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
   <tr>
       <td align="center" style="padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;">
           <table bgcolor="#dedee2" border="0" cellpadding="20" cellspacing="0" width="592" id="emailContainer" style="text-align: left; border-top-color: #666666; border-right-color: #666666; border-bottom-color: #666666; border-left-color: #666666; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-collapse: collapse;">
               <tr>
                   <td align="left" valign="top" padding-top: 20px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;>
                       <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailHeader">
                           <tr>
                               <td align="left" valign="top">
                               <img src="Link To Your Header Image">
                               </td>
                           </tr>
                       </table>
                   </td>
               </tr>
               <tr>
                   <td align="left" valign="top">
                       <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailBody">
                           <tr>
                               <td align="left" valign="top" style="color:#333333;" > <!--CONTENT STARTS-->

 

 

And add this code to your Global Email Footer Content:

</td>
                           </tr>
                       </table>
                   </td>
               </tr>
               <tr>
                   <td align="center" valign="top">
                       <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailFooter">
                           <tr>
                               <td align="center" valign="top">
                                   (Add Your Footer Info Here) Copyright 2013 XXXXXXXXXXXXXXXXXXXX
                               </td>
                           </tr>
                       </table>
                   </td>
               </tr>
           </table>
       </td>
   </tr>
</table>
   </body>
</html>

 

 

Thats it. Hope this helps someone.

-Jason

Link to comment
Share on other sites

  • 3 months later...
  • 11 months later...

Your welcome, hopefully this helps many. For those looking for some advanced, professionally styled (WHMCS HTML Global Email Header and Footer ) templates that can be downloaded instantly,you can check them out at my store here if you like. >> the-tech-central.com/store/whmcs-custom-email-templates/.

 

I don't want to spam anybody so if this link can't be shared, admins please remove it and those interested can PM me.

Best Regards Friends,

Jason

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated