Difference between revisions of "Email Styling"
From WHMCS Documentation
| Line 1: | Line 1: | ||
| − | All email messages sent to clients are wrapped in a customisable email design. | + | All email messages sent to clients are wrapped in a customisable email design. By default, the email design is a cross platform compatible, mobile friendly, responsive email design featuring your company logo at the top and useful links in the footer: |
| − | |||
| − | By default, the email design is a cross platform compatible, mobile friendly, responsive email design featuring your company logo at the top and useful links in the footer | ||
[[File:DefaultEmailStyle.jpg]] | [[File:DefaultEmailStyle.jpg]] | ||
| − | + | You can customize this at '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > General Settings > [[Mail Tab|Mail]]''' or, prior to WHMCS 8.0, '''Setup > General Settings > Mail'''. | |
Admin notifications use a fixed design and cannot be customised. | Admin notifications use a fixed design and cannot be customised. | ||
Revision as of 18:05, 7 February 2022
All email messages sent to clients are wrapped in a customisable email design. By default, the email design is a cross platform compatible, mobile friendly, responsive email design featuring your company logo at the top and useful links in the footer:
You can customize this at Configuration () > System Settings > General Settings > Mail or, prior to WHMCS 8.0, Setup > General Settings > Mail.
Admin notifications use a fixed design and cannot be customised.
Default Styling
The default styling is as follows:
Global Email Header
<!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={$charset}" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
[EmailCSS]
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
<tr>
<td valign="top" class="headerContent">
<a href="{$company_domain}">
<img src="{$company_logo_url}" style="max-width:600px;padding:20px" id="headerImage" alt="{$company_name}" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
<tr>
<td valign="top" class="bodyContent">Global Email Footer
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<a href="{$company_domain}">visit our website</a>
<span class="hide-mobile"> | </span>
<a href="{$whmcs_url}">log in to your account</a>
<span class="hide-mobile"> | </span>
<a href="{$whmcs_url}submitticket.php">get support</a> <br />
Copyright © {$company_name}, All rights reserved.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>CSS Styling
.ExternalClass,.ExternalClass div,.ExternalClass font,.ExternalClass p,.ExternalClass span,.ExternalClass td,h1,img{line-height:100%}
h1,h2{display:block;font-family:Helvetica;font-style:normal;font-weight:700}
#outlook a{padding:0}
.ExternalClass,.ReadMsgBody{width:100%}
a,blockquote,body,li,p,table,td{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
table,td{mso-table-lspace:0;mso-table-rspace:0}
img{-ms-interpolation-mode:bicubic;border:0;height:auto;outline:0;text-decoration:none}
table{border-collapse:collapse!important}
#bodyCell,#bodyTable,body{height:100%!important;margin:0;padding:0;width:100%!important}
#bodyCell{padding:20px;}
#templateContainer{width:600px;border:1px solid #ddd;background-color:#fff}
#bodyTable,body{background-color:#FAFAFA}
h1{color:#202020!important;font-size:26px;letter-spacing:normal;text-align:left;margin:0 0 10px}
h2{color:#404040!important;font-size:20px;line-height:100%;letter-spacing:normal;text-align:left;margin:0 0 10px}
h3,h4{display:block;font-style:italic;font-weight:400;letter-spacing:normal;text-align:left;margin:0 0 10px;font-family:Helvetica;line-height:100%}
h3{color:#606060!important;font-size:16px}
h4{color:grey!important;font-size:14px}
.headerContent{background-color:#f8f8f8;border-bottom:1px solid #ddd;color:#505050;font-family:Helvetica;font-size:20px;font-weight:700;line-height:100%;text-align:left;vertical-align:middle;padding:0}
.bodyContent,.footerContent{font-family:Helvetica;line-height:150%;text-align:left;}
.footerContent{text-align:center}
.bodyContent pre{padding:15px;background-color:#444;color:#f8f8f8;border:0}
.bodyContent pre code{white-space:pre;word-break:normal;word-wrap:normal}
.bodyContent table{margin:10px 0;background-color:#fff;border:1px solid #ddd}
.bodyContent table th{padding:4px 10px;background-color:#f8f8f8;border:1px solid #ddd;font-weight:700;text-align:center}
.bodyContent table td{padding:3px 8px;border:1px solid #ddd}
.table-responsive{border:0}
.bodyContent a{word-break:break-all}
.headerContent a .yshortcuts,.headerContent a:link,.headerContent a:visited{color:#1f5d8c;font-weight:400;text-decoration:underline}
#headerImage{height:auto;max-width:600px;padding:20px}
#templateBody{background-color:#fff}
.bodyContent{color:#505050;font-size:14px;padding:20px}
.bodyContent a .yshortcuts,.bodyContent a:link,.bodyContent a:visited{color:#1f5d8c;font-weight:400;text-decoration:underline}
.bodyContent a:hover{text-decoration:none}
.bodyContent img{display:inline;height:auto;max-width:560px}
.footerContent{color:grey;font-size:12px;padding:20px}
.footerContent a .yshortcuts,.footerContent a span,.footerContent a:link,.footerContent a:visited{color:#606060;font-weight:400;text-decoration:underline}
@media only screen and (max-width:640px){h1,h2,h3,h4{line-height:100%!important}
#templateContainer{max-width:600px!important;width:100%!important}
#templateContainer,body{width:100%!important}
a,blockquote,body,li,p,table,td{-webkit-text-size-adjust:none!important}
body{min-width:100%!important}
#bodyCell{padding:10px!important}
h1{font-size:24px!important}
h2{font-size:20px!important}
h3{font-size:18px!important}
h4{font-size:16px!important}
#templatePreheader{display:none!important}
.headerContent{font-size:20px!important;line-height:125%!important}
.footerContent{font-size:14px!important;line-height:115%!important}
.footerContent a{display:block!important}
.hide-mobile{display:none;}
}