Hi guys,
How do I get the content for my email footer to center when using my own custom HTML for my emails?
Thanks,
Tony
Thanks,
Tony
You bet and thank you again Martin 
What is the proper way to post my code? should I just copy and paste right into this forum or zip it up as attachment?
Thanks,
Tony
Just copy and paste. The editor can detect most languages automatically and display it properly.
1 Like
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regular Email Updated 5-31-17 Responsive Email Template Infusionsoft Main Simple by Tony States</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing.*/
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
.image_fix {display:block;}
p {margin: 0px 0px !important;}
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
a {color: #0a8cce;text-decoration: none;text-decoration:none!important;}
/*STYLES*/
table[class=full] { width: 100%; clear: both; }
/*IPAD STYLES*/
@media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #0a8cce; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #0a8cce !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 440px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
img[class=banner] {width: 440px!important;height:98px!important;}
img[class=colimg2] {width: 440px!important;height:293px!important;}
img[class=colimg3] {width: 440px!important;height:304px!important;}
img[class=colimg4] {width: 440px!important;height:200px!important;}
img[class=colimg5] {width: 440px!important;height:406px!important;}
img[class=colimg6] {width: 440px!important;height:305px!important;}
img[class=colimg7] {width: 440px!important;height:335px!important;}
img[class=colimg8] {width: 440px!important;height:337px!important;}
img[class=colimg9] {width: 440px!important;height:173px!important;}
img[class=colimg10] {width: 440px!important;height:220px!important;}
img[class=colimg11] {width: 440px!important;height:172px!important;}
img[class=colimg12] {width: 440px!important;height:369px!important;}
img[class=colimg13] {width: 440px!important;height:528px!important;}
img[class=colimg14] {width: 440px!important;height:434px!important;}
img[class=colimg15] {width: 440px!important;height:413px!important;}
img[class=colimg16] {width: 440px!important;height:389px!important;}
img[class=colimg17] {width: 440px!important;height:314px!important;}
img[class=colimg18] {width: 440px!important;height:200px!important;}
img[class=colimg19] {width: 440px!important;height:252px!important;}
img[class=colimg20] {width: 440px!important;height:267px!important;}
img[class=colimg21] {width: 440px!important;height:386px!important;}
img[class=colimg22] {width: 440px!important;height:276px!important;}
img[class=colimg23] {width: 440px!important;height:379px!important;}
img[class=colimg24] {width: 440px!important;height:247px!important;}
img[class=colimg25] {width: 440px!important;height:346px!important;}
img[class=colimg26] {width: 440px!important;height:352px!important;}
img[class=colimg27] {width: 440px!important;height:295px!important;}
img[class=colimg28] {width: 440px!important;height:330px!important;}
img[class=colimg31] {width: 440px!important;height:293px!important;}
img[class=colimg32] {width: 440px!important;height:191px!important;}
}
/*IPHONE STYLES*/
@media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #0a8cce; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #0a8cce !important;
pointer-events: auto;
cursor: default;
}
/*Below Tony increased the width to 300px to get rid of the huge margins on iphones*/
/*Below Tony increased the width to 320px to get rid of the MORE OF THE MARGINS on iphones*/
table[class=devicewidth] {width: 320px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 320px!important;text-align:center!important;}
img[class=banner] {width: 280px!important;height:62px!important;}
img[class=colimg2] {width: 280px!important;height:187px!important;}
img[class=colimg3] {width: 280px!important;height:193px!important;}
img[class=colimg4] {width: 280px!important;height:100px!important;}
img[class=colimg5] {width: 280px!important;height:258px!important;}
img[class=colimg6] {width: 280px!important;height:194px!important;}
img[class=colimg7] {width: 280px!important;height:226px!important;}
img[class=colimg8] {width: 280px!important;height:215px!important;}
img[class=colimg9] {width: 280px!important;height:110px!important;}
img[class=colimg10] {width: 280px!important;height:140px!important;}
img[class=colimg11] {width: 280px!important;height:109px!important;}
img[class=colimg12] {width: 280px!important;height:235px!important;}
img[class=colimg13] {width: 280px!important;height:336px!important;}
img[class=colimg14] {width: 280px!important;height:276px!important;}
img[class=colimg15] {width: 280px!important;height:263px!important;}
img[class=colimg16] {width: 280px!important;height:248px!important;}
img[class=colimg17] {width: 280px!important;height:200px!important;}
img[class=colimg18] {width: 280px!important;height:127px!important;}
img[class=colimg19] {width: 280px!important;height:160px!important;}
img[class=colimg20] {width: 280px!important;height:170px!important;}
img[class=colimg21] {width: 280px!important;height:246px!important;}
img[class=colimg22] {width: 280px!important;height:176px!important;}
img[class=colimg23] {width: 280px!important;height:241px!important;}
img[class=colimg24] {width: 280px!important;height:157px!important;}
img[class=colimg25] {width: 280px!important;height:220px!important;}
img[class=colimg26] {width: 280px!important;height:224px!important;}
img[class=colimg27] {width: 280px!important;height:188px!important;}
img[class=colimg28] {width: 280px!important;height:210px!important;}
/*Tony bumped the width up to 300px so it fits better on the iphones*/
img[class=colimg29] {width: 300px!important;height:225px!important;}
/*Tony bumped the width up to 320px so it fits EVEN BETTER on the iphones*/
img[class=colimg30] {width: 320px!important;height:240px!important;}
img[class=colimg31] {width: 320px!important;height:213px!important;}
img[class=colimg32] {width: 320px!important;height:139px!important;}
}
</style>
</head>
<body>
<!-- Start of preheader -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="preheader"><tbody><tr>
<td>
<table width="630" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody><tr>
<td width="100%">
<table width="630" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody>
<!-- Spacing --><tr>
<td width="100%" height="10"></td>
</tr>
<!-- Spacing --><tr>
<tr>
<td>
<table width="630" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth"><tbody><tr>
<td align="left" valign="middle" style="font-family: 'Georgia', serif; font-size: 14px; color: rgb(17,85,204);" st-content="viewonline">
</td>
</tr></tbody></table>
</td>
</tr>
<!-- Spacing --><tr>
<td width="100%" height="1"></td>
</tr>
<!-- Spacing -->
</tbody></table>
</td>
</tr></tbody></table>
</td>
</tr></tbody></table>
<!-- End of preheader -->
<!-- Start of header -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="header"><tbody><tr>
<td>
<table width="630" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody><tr>
<td width="100%">
<table width="630" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody>
<!-- Spacing --><tr>
<td height="2" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<!-- Spacing --><tr>
<td>
<!-- logo -->
<table width="630" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth"><tbody><tr>
<td width="100%" align="center">
<div class="imgpop">
<img src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/business5/uploads/infusionsoft1/original/2X/d/dd597e57846497ab96cd8ee122dd29166fd2b614.jpg' st-image="banner" alt="Robert B. Ritter, Jr. Image (Bob Ritter)" width="630" border="0" height="140" style="display:block; border:none; outline:none; text-decoration:none;" class="banner">
</div>
</td>
</tr></tbody></table>
<!-- end of logo -->
</td>
</tr>
<!-- Spacing --><tr>
<td height="2" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<!-- Spacing -->
</tbody></table>
</td>
</tr></tbody></table>
</td>
</tr></tbody></table>
<!-- End of Header -->
<!-- Start of separator -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="separator"><tbody><tr>
<td>
<table width="630" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth"><tbody>
<tr>
<td align="center" height="10" style="font-size:1px; line-height:1px;"></td>
</tr>
<tr>
<td width="550" align="center" height="1" bgcolor="#d1d1d1" style="font-size:1px; line-height:1px;"></td>
</tr>
<tr>
<td align="center" height="10" style="font-size:1px; line-height:1px;"></td>
</tr>
</tbody></table>
</td>
</tr></tbody></table>
<!-- End of separator -->
<!-- Start of main-banner -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="banner"><tbody><tr>
<td>
<table width="630" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody><tr>
<td width="100%">
<table width="630" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth"><tbody>
<!-- Spacing -->
<tr>
<td width="100%" height="10"></td>
</tr>
<!-- Spacing -->
<!-- Title -->
<tr>
<td style="font-family: 'trebuchet ms',arial,sans-serif; font-size:20px; font-weight: bold; text-decoration: none; text-align:center; line-height: 24px; color: rgb(17,85,204);" st-title="fulltext-heading">
Blog #163: Family Net Worth</td>
</tr>
<!-- End of Title -->
<!-- Spacing -->
<!--<tr>
<td width="100%" height="10"></td>
</tr>-->
<!-- Spacing -->
<!--Begin Date-->
<tr>
<td align="left" valign="middle" st-content="date">
<div style="text-align: left; color: #434343; font-family: 'Georgia', Helvetica, Arial, sans-serif; font-size: 11pt; line-height: 25px;">
June 5, 2017
</div>
</td>
</tr>
<!-- /End Date-->
<!-- spacing --><tr>
<td width="100%" height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<!-- End of spacing -->
<tr>
<!-- start of image -->
<td align="center">
<div class="imgpop">
</div>
</td>
<!-- end of image -->
</tr></tbody></table>
</td>
</tr></tbody></table>
</td>
</tr></tbody></table>
<!-- / End of main-banner -->
<!-- Start of separator -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="separator"><tbody><tr>
<td>
<table width="630" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth"><tbody>
<tr>
<td align="center" height="15" style="font-size:1px; line-height:1px;"> </td>
</tr>
</tbody></table>
</td>
</tr></tbody></table>
<!-- End of separator -->
<!-- Start main content -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="full-text"><tbody><tr>
<td>
<table width="630" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody><tr>
<td width="100%">
<table width="630" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody>
<tr>
<td>
<table width="630" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidth"><tbody>
<!-- spacing -->
<!--<tr>
<td width="100%" height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>-->
<!-- End of spacing -->
<!-- content -->
<tr>
<td st-content="fulltext-content">
<div style="text-align: left; color: #434343; font-family: 'Georgia', Helvetica, Arial, sans-serif; font-size: 13pt; line-height: 25px;">
Blog #.......LINE 1 -------<br></div>
</td>
</tr>
<!-- Spacing -->
<tr>
<td height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<!-- Spacing -->
<!-- content -->
<tr>
<td st-content="fulltext-content">
<div style="text-align: left; color: #434343; font-family: 'Georgia', Helvetica, Arial, sans-serif; font-size: 13pt; line-height: 25px;">
Blog #...............LINE 2 -------<br></div>
</td>
</tr>
<!-- Spacing -->
<tr>
<td height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<!-- Spacing -->
<!-- content -->
<tr>
<td st-content="fulltext-content">
<div style="text-align: left; color: #434343; font-family: 'Georgia', Helvetica, Arial, sans-serif; font-size: 13pt; line-height: 25px;">
Blog #...........................LINE 3 -------<br></div>
</td>
</tr>
<!-- Spacing -->
<tr>
<td height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<!-- Spacing -->
<!-- content -->
<tr>
<td st-content="fulltext-content">
<div style="text-align: left; color: #434343; font-family: 'Georgia', Helvetica, Arial, sans-serif; font-size: 13pt; line-height: 25px;">
Blog #.................................................LINE 4 ------- Wealthy and Wise<span style="vertical-align:7%;">®</span><br></div>
</td>
</tr>
<!-- Spacing -->
<tr>
<td height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<!-- Spacing -->
<tr>
<td st-content="fulltext-content">
<div style="text-align: left; color: #434343; font-family: 'Georgia', Helvetica, Arial, sans-serif; font-size: 13pt; line-height: 25px;">
<strong>Please head over to our website to read Blog #1## . . . </strong>
<br><br></div>
</td>
</tr>
<tr>
<td st-content="fulltext-content">
<div style="text-align: left; color: #434343; font-family: 'Georgia', Helvetica, Arial, sans-serif; font-size: 13pt; line-height: 25px;">
******TONY SEND A PREVIEW OF THIS TO BOB ASAP******
<br><br></div>
</td>
</tr>
<!-- End of content -->
</tbody></table>
</td>
</tr>
<!-- Spacing --><tr>
<td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td>
</tr>
<!-- Spacing -->
</tbody></table>
</td>
</tr></tbody></table>
</td>
</tr></tbody></table>
<!-- /End main content -->
<!-- Start of separator -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="separator"><tbody><tr>
<td>
<table width="630" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth"><tbody>
<tr>
<td align="center" height="10" style="font-size:1px; line-height:1px;"></td>
</tr>
<tr>
<td width="550" align="center" height="1" bgcolor="#d1d1d1" style="font-size:1px; line-height:1px;"></td>
</tr>
<tr>
<td align="center" height="10" style="font-size:1px; line-height:1px;"></td>
</tr>
</tbody></table>
</td>
</tr></tbody></table>
<!-- End of separator -->
<!-- Begin footer -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="footer"><tbody>
<tr>
<td>
<table width="630" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody>
<tr>
<td width="100%">
<table width="630" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody>
<tr>
<td align="left" valign="middle" st-content="postfooter">
<div style="text-align: left; color: #434343; font-family: 'Georgia', Helvetica, Arial, sans-serif; font-size: 11pt; line-height: 25px;">
Robert B. Ritter, Jr.<br>
President/CEO<br>
InsMark, Inc.<br>
Phone: 1-888-InsMark (467-6275)
<br><br></div>
</td>
</tr>
<!-- Spacing -->
<tr>
<td width="100%" height="10"></td>
</tr>
<!-- Spacing -->
</tbody></table>
</td>
</tr></tbody></table>
</td>
</tr></tbody></table>
<!-- / End footer -->
<!-- Begin links -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="footer"><tbody>
<tr>
<td>
<table width="630" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody>
<tr>
<td width="100%">
<table width="630" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody>
<tr>
<td align="center" valign="middle" style="text-align: center; line-height: 16px; font-family: georgia,times,serif; color: rgb(51,51,51); font-size: 12px;" st-content="postfooter">
<a style="color: rgb(17,85,204); font-family: georgia,times,serif; font-size: 12px; text-decoration: none;" href="http://www.robert-b-ritter-jr.com/" target="_blank">www.Robert-B-Ritter-Jr.com</a>
|
<a style="color: rgb(17,85,204); font-family: georgia,times,serif; font-size: 12px; text-decoration: none;" href="http://www.youtube.com/user/insmarkinc" target="_blank">InsMark’s Youtube Channel</a>
|
<a style="color: rgb(17,85,204); font-family: georgia,times,serif; font-size: 12px; text-decoration: none;" href="http://www.insmark.com/" target="_blank">www.InsMark.com</a>
</td>
</tr>
<!-- Spacing -->
<tr>
<td width="100%" height="10"></td>
</tr>
<!-- Spacing -->
</tbody></table>
</td>
</tr></tbody></table>
</td>
</tr></tbody></table>
<!-- / End links -->
<!-- Begin InsMark Copyright -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="footer"><tbody>
<tr>
<td>
<table width="630" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody>
<tr>
<td width="100%">
<table width="630" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody>
<tr>
<td align="center" valign="middle" style="text-align: center; line-height: 16px; font-family: georgia,times,serif; color: rgb(51,51,51); font-size: 12px;" st-content="postfooter">
Copyright © 2017 InsMark, Inc. All Rights Reserved
</td>
</tr>
<!-- Spacing -->
<tr>
<td width="100%" height="10"></td>
</tr>
<!-- Spacing -->
</tbody></table>
</td>
</tr></tbody></table>
</td>
</tr></tbody></table>
<!-- / End InsMark Copyright -->
</body>
</html>
Well, that looks fun. 
Can you just design it using the regular email builder? Or, I would suggest using something like https://htmlmail.pro/ and design it from scratch using their WYSIWYG/html editor to obtain cleaner html.
Currently, this is how your code is going to render in gmail:
Thanks for the tips Martin, this is precisely how my client wanted it designed!!! we have been using this template for 2 years with constant contact and it has been perfect every single time, every single week and never one complaint or problem on any platform. I don’t really care that much about the spam thing at the bottom being left aligned I thought if there was a way to make it align center that would be great, I will just tell my client it can’t be done in your user interface as there is no where to set it be center aligned from my area of the user interface. (It would be nice if there was)!!
- Below is how nice it looks inside gmail, I copied this exact same code into here for you to look at, as you can see it displays perfectly
Best regards,
Tony
