Once you have finished customizing the Email Template to your needs we recommend viewing our installation guide. View Guide
In this guide you'll learn how to customize our responsive HTML Email Template. You can also hire Zomex to complete the customization and installation for you for just $24.99:
The email template is made up of HTML/CSS, so the code must be edited to customize. While coding experience is an advantage it is possible to follow this guide to customize without any prior coding experience. In this guide we will customize the whmcs.html file (assuming WHMCS installation) as an example. If you're using a different software such as MailChimp you'll need to customize the html.html file.
The whmcs.html email will pull a lot of your content directly from WHMCS e.g URL paths, logo image (set within your WHMCS General Settings).
Uploading Images And Editing Paths
By default the images used within the email template are stored and loaded from our domain zomexdemo.com. While you can keep this default we recommend loading the images from your own domain as it could impact email deliverability. To do this complete the following steps:
1. Upload the images found in Email Template - Flex Mail > files > images to your website files using an FTP client such as FileZilla. For example you could upload them to https://www.yourdomain.com/images/ (path: public_html/images/).
2. Open the whmcs.html file and change all of the following paths:
https://www.zomexdemo.com/images/flexmail/to as an example:
https://www.yourdomain.com/images/To make this easy many editors use a find and replace feature to automatically update all references within the file.
Editing The Top Menu
Flex Mail uses a top menu displayed under the header. This menu is designed to list some important links to your website for example your most popular products/services. By default we have added some links to pages of our WHMCS Templates. If you'd like to customize these links they are handled by the following block of HTML:
<td class="flexmail-menu-top" align="center" style="padding: 8px 30px 8px 30px;border-bottom:#e3dfdf 1px solid;">
<a href="{$whmcs_url}" target="_blank" class="flexmail-menu-top-buttons" style="display:inline-block;padding:10px;border-right: #efeded 1px solid;text-decoration:none;font-family:'Roboto',Helvetica,Arial,sans-serif!important;font-size:14px;line-height:18px;color:#828282;">Home</a>
<a href="{$whmcs_url}web-hosting.php" target="_blank" class="flexmail-menu-top-buttons" style="display:inline-block;padding:10px;border-right: #efeded 1px solid;text-decoration:none;font-family:'Roboto',Helvetica,Arial,sans-serif!important;font-size:14px;line-height:18px;color:#828282;">Hosting</a>
<a href="{$whmcs_url}domain/pricing" target="_blank" class="flexmail-menu-top-buttons" style="display:inline-block;padding:10px;border-right: #efeded 1px solid;text-decoration:none;font-family:'Roboto',Helvetica,Arial,sans-serif!important;font-size:14px;line-height:18px;color:#828282;">Domains</a>
<a href="{$whmcs_url}store/ssl-certificates" target="_blank" class="flexmail-menu-top-buttons" style="display:inline-block;padding:10px;border-right:none;text-decoration:none;font-family:'Roboto',Helvetica,Arial,sans-serif!important;font-size:14px;line-height:18px;color:#828282;">SSL</a>
</td><!-- .flexmail-menu-top -->Each <a line represents one link button. To customize edit the URL within href="" and the text name before </a>. For example to change the second Web Hosting link to Merchandise you would need to change:
<a href="{$whmcs_url}web-hosting.php" target="_blank" class="flexmail-menu-top-buttons" style="display:inline-block;padding:10px;border-right: #efeded 1px solid;text-decoration:none;font-family:'Roboto',Helvetica,Arial,sans-serif!important;font-size:14px;line-height:18px;color:#828282;">Hosting</a>to for example:
<a href="https://www.yourdomain.com/merchandise/" target="_blank" class="flexmail-menu-top-buttons" style="display:inline-block;padding:10px;border-right: #efeded 1px solid;text-decoration:none;font-family:'Roboto',Helvetica,Arial,sans-serif!important;font-size:14px;line-height:18px;color:#828282;">Merchandise</a>Editing The Two Column Content
We have added a two column layout to the template giving you freedom to create your own two column content. By default we have added a web hosting block and web design block which will work out of the block with our WHMCS Templates. The HTML that makes up this section is:
<table border="0" cellpadding="0" cellspacing="0" width="580" class="flexmail-columns2">
<tr>
<td align="center" valign="top">
<table align="left" border="0" cellpadding="10" cellspacing="0" width="280" class="flexmail-columns2-column">
<tr>
<td style="padding:0 0 15px 0;">
<a href="{$whmcs_url}web-hosting.php" target="_blank"><img src="https://www.zomexdemo.com/images/flexmail/webhosting.png" alt="Web Hosting" width="280" style="max-width:280px;border-radius:5px;" /></a>
</td>
</tr>
<tr>
<td valign="top">
<h2 style="padding:0;margin:0 0 25px 0;color:#f39646;font-weight:bold;font-size:24px;line-height:28px;text-align:center;">Web Hosting</h2>
<p style="margin:0 0 25px 0;">We provide high quality cPanel based web hosting services.</p>
<p style="text-align:center;margin:0!important;"><a href="{$whmcs_url}web-hosting.php" target="_blank" style="display:inline-block!important;background-color:#3d3d3d!important;color:#ffffff!important;text-decoration:none!important;padding:12px!important;-webkit-border-radius:5px!important;-moz-border-radius:5px!important;border-radius:5px!important;text-align:center!important;">Learn More ></a></p>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="10" cellspacing="0" width="280" class="flexmail-columns2-column">
<tr>
<td style="padding:0 0 15px 0;">
<a href="{$whmcs_url}web-design.php" target="_blank"><img src="https://www.zomexdemo.com/images/flexmail/webdesign.png" alt="Web Design" width="280" style="max-width:280px;border-radius:5px;" /></a>
</td>
</tr>
<tr>
<td valign="top">
<h2 style="padding:0;margin:0 0 25px 0;color:#f39646;font-weight:bold;font-size:24px;line-height:28px;text-align:center;">Web Design</h2>
<p style="margin:0 0 25px 0;">Custom web design utilising the full power of WordPress.</p>
<p style="text-align:center;margin:0!important;"><a href="{$whmcs_url}web-design.php" target="_blank" style="display:inline-block!important;background-color:#3d3d3d!important;color:#ffffff!important;text-decoration:none!important;padding:12px!important;-webkit-border-radius:5px!important;-moz-border-radius:5px!important;border-radius:5px!important;text-align:center!important;">Learn More ></a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>For each block you would need to update the two href="" URLS (used by the image and button) and the text content. Optionally you can also edit or replace the default images.
Editing The Bottom Menu
Flex Mail uses a bottom menu displayed at the bottom of the content. This menu is designed to list some important links to your website for example your login, announcement pages. These will work for any WHMCS installation as your URL is pulled dynamically from your installation. If you'd like to customize these links they are handled by the following block of HTML:
<tr>
<td class="flexmail-menu-bottom" align="center" style="padding: 8px 30px 8px 30px;border-top:#e3dfdf 1px solid;">
<a href="{$whmcs_url}contact.php" target="_blank" class="flexmail-menu-bottom-buttons" style="display:inline-block;padding:10px;border-right: #efeded 1px solid;text-decoration:none;font-family:'Roboto',Helvetica,Arial,sans-serif!important;font-size:14px;line-height:18px;color:#828282;">Contact</a>
<a href="{$whmcs_url}clientarea.php" target="_blank" class="flexmail-menu-bottom-buttons" style="display:inline-block;padding:10px;border-right: #efeded 1px solid;text-decoration:none;font-family:'Roboto',Helvetica,Arial,sans-serif!important;font-size:14px;line-height:18px;color:#828282;">Login</a>
<a href="{$whmcs_url}knowledgebase.php" target="_blank" class="flexmail-menu-bottom-buttons" style="display:inline-block;padding:10px;border-right: #efeded 1px solid;text-decoration:none;font-family:'Roboto',Helvetica,Arial,sans-serif!important;font-size:14px;line-height:18px;color:#828282;">Knowledgebase</a>
<a href="{$whmcs_url}announcements.php" target="_blank" class="flexmail-menu-bottom-buttons" style="display:inline-block;padding:10px;border-right:none;text-decoration:none;font-family:'Roboto',Helvetica,Arial,sans-serif!important;font-size:14px;line-height:18px;color:#828282;">Announcements</a>
</td>
</tr><!-- .flexmail-menu-bottom -->Each <a line represents one link button. To customize edit the URL within href="" and the text name before </a>. For example to change the last Announcements link to Server Status you would need to change:
<a href="{$whmcs_url}announcements.php" target="_blank" class="flexmail-menu-bottom-buttons" style="display:inline-block;padding:10px;border-right:none;text-decoration:none;font-family:'Roboto',Helvetica,Arial,sans-serif!important;font-size:14px;line-height:18px;color:#828282;">Announcements</a>to:
<a href="{$whmcs_url}serverstatus.php" target="_blank" class="flexmail-menu-bottom-buttons" style="display:inline-block;padding:10px;border-right:none;text-decoration:none;font-family:'Roboto',Helvetica,Arial,sans-serif!important;font-size:14px;line-height:18px;color:#828282;">Server Staus</a>Setting The Social Icons/URLs
Flex Mail supports over 27 social networks with icons pre-integrated. We recommend displaying a few of your most popular. The social icons HTML starts under the comment:
<!-- Social Icons - Each <a> block represents one social network. Delete or comment out a block to remove the icon. -->Each <a block represents one social network. To set your URL change the default to your unique URL. To remove an icon either delete the block of code or comment it out (deleting is recommended as removing the icon image will reduce the filesize of your email). To comment out for example Facebook change:
<a href="https://www.facebook.com/" target="_blank" style="display:inline-block;padding:6px;width:50px;height:50px;-ms-text-size-adjust:100%;-webkit-text-size-adjust: 100%;">
<img src="https://www.zomexdemo.com/images/flexmail/facebook.png" style="width:50px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;" border="0" alt="Facebook">
</a>to:
<!--
<a href="https://www.facebook.com/" target="_blank" style="display:inline-block;padding:6px;width:50px;height:50px;-ms-text-size-adjust:100%;-webkit-text-size-adjust: 100%;">
<img src="https://www.zomexdemo.com/images/flexmail/facebook.png" style="width:50px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;" border="0" alt="Facebook">
</a>
-->Customizing The Address
We have added an address to the footer of the email. This can be customized easily to your own or removed completely (keep in mind that displaying an address in business emails is a legal requirement in some countries). The HTML for the address is:
<td style="padding: 0 30px 0 0;font-family:'Roboto',Helvetica,Arial,sans-serif!important;font-size:14px;line-height:18px;color:#828282;" width="50%">
{if $company_name}<strong style="font-size:16px;line-height:22px;">{$company_name}</strong><br />{/if}
2 street name,<br />
Town<br />
City<br />
County<br />
Country<br />
ME7 5BD
</td>Edit this text with your own or remove the address by changing the above to:
<td style="padding: 0 30px 0 0;font-family:'Roboto',Helvetica,Arial,sans-serif!important;font-size:14px;line-height:18px;color:#828282;" width="50%">
{if $company_name}<strong style="font-size:16px;line-height:22px;">{$company_name}</strong>{/if}
</td>Changing Colors
Flex Mail is fully customizable including all colors which are set with CSS. To update colors we recommend using a find and replace text editor to automatically update all references at once. The main colors to replace with your own are:
Body Background = #d9d9d9
Text = #828282
Links = #f39646
Header Background = #e8e8e8
Buttons Background = #3d3d3d
Social Background = #393939
Request Support
We hope you found this documentation useful. If you run into any issues we will be happy to assist you.