Change the Background-Color(s)
How to change Background-Colors for Body, Table and Cell in a HTML Email Newsletter
warning All samples and many more templates are included in MailList Controller.
Template Tutorial Download Free Version
It's recommend to use an external HTML editor (e.g. MS Expression Web) to
edit complex HTML templates, but you can also edit the HTML code directly.
If you are looking for a free HTML editor, then you should take a look at
MS Expression Web link.
How to change the Background Color of a Message?
- Locate the
<body tag
and add/change the background color:
e.g. <body bgcolor="#FF0000"> The color code is HEX #RRGGBB. - Many templates use a background table,
because some clients are cutting out the body tag.
Make sure you change the color for the background table, too.
...
<body bgcolor="#FF0000"
leftmargin="0" marginheight="0" marginwidth="0" offset="0" topmargin="0">
<!--
background table -->
<table bgcolor="#FF0000"
id="bgtable" align="center" border="0" cellpadding="0" cellspacing="0"
height="100%" width="100%">
<tr>
<td
align="center" valign="top">
<!--
container 600px -->
<table
border="0" cellpadding="0" cellspacing="0" class="container" width="600">
<tr>
<td
align="left">
<p>Hello
World!</p>
</td>
</tr>
</table>
<!--
container 600px -->
</td>
</tr>
</table>
<!--
background table -->
</body>
...
How to change the Background Color of a Table?
Locate the <table tag and add
the background color:
e.g. <table bgcolor="#FF0000">
The color code is HEX #RRGGBB#.
or <table bgcolor="#FF0000" style="background-color:#FF0000;">
...
<table bgcolor="#FF0000"
border="0" cellpadding="0" cellspacing="0">
<tr>
<td
align="left">Hello World!</td>
</tr>
</table>
...
How to change the Background Color of a Cell?
We use "content" tables (with a single
cell) in most multi-column templates, to make sure the cell/table layout
is fixed.
Change the background
color of the "content" table instead of the parent cell
(LEFT CELL in the sample below):
...
<TABLE width="600" class="container" style="line-height:
normal; font-family: Arial, Helvetica, sans-serif; font-size: 16px;"
border="0" cellspacing="0" cellpadding="0">
<TR>
<!--
LEFT CELL -->
<TD width="300" align="left"
valign="top">
<TABLE bgcolor="#FF0000"
width="300" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD
style="padding: 16px; line-height: normal; font-family: Arial, Helvetica,
sans-serif; font-size: 16px;">
In your schooldays most of you who read this book made acquaintance
with the noble building ...
</TD>
</TR>
</TABLE>
</TD>
<!--
LEFT CELL -->
<!-- RIGHT CELL -->
...
<!-- RIGHT CELL -->
</TR>
...
Alternate: Locate the <td tag and add the background color:
e.g. <td bgcolor="#FF0000"> The color code is HEX #RRGGBB.
or <td bgcolor="#FF0000" style="background-color:#FF0000;">
We recommend to use "content" tables instead, since some mail clients might not support cell background colors!
How to add a Border around a Table or Cell?
Locate the <td or <table tag and add the style:
e.g. <td
style="border: 1px dotted #CCCCCC;"
would draw a dotted
1px border with the color #CCCCCC around the cell.
e.g. <table style="border:
5px solid #0000FF;"
would draw a solid blue 5px border around
the table.
You can use: border, border-left, border-right, border-top,
border-bottom and combinations:
e.g. <td style="border-left:
1px solid #FF0000; border-right: 1px solid #FF0000;"
would
draw a line (border) left and right of the cell, 1px solid red.