Using Dark Background Color in Newsletters for Outlook.com, Gmail and Yahoo!


Newsletters have usually a white or light background color and such newsletters will mostly be shown without problems in Outlook.com, Gmail and Yahoo!, and other web-based email clients. But if you want to use a dark background color, for example black color, there will be a problem if you do not design the newsletter in a special way. What usually happens is that outside the outer frame of the newsletter the background color will remain white instead of using the dark color that you have specified.
  
 If you want to use a dark background color in your newsletter and want it to be displayed correctly in Outlook.com, Gmail and Yahoo!, you should first create an empty table that you set to the width 100%. This table should have the desired background color and line color, for example black. Next, insert your current newsletter in this empty table (for example by using Windows Clipboard). When your newsletter is opened in Outlook.com, Gmail or Yahoo!, this table will be expanded in the background so it covers the whole reading pane of the email client. You will then have the desired background color in these web-based e-mail clients.
  
 
If an e-mail recipient uses Firefox or Chrome as web browser
 The method described above is not enough if the e-mail is opened with Mozilla Firefox or Google Chrome web browser. The problem with white color outside the outer frame will occur again. But this can be fixed by inserting three lines of script code in the newsletter's HTML code. In the <head> tag of your newsletter, in the top of the HTML code, you should add the following three lines:
 
 
 <style type="text/css">
   body { width: 100% !important; }
 </style>
  
 
A complete <head> tag can look like this: 
 
  
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>My Newsletter</title>
 <style type="text/css">
   body { width: 100% !important; }
 </style>
 </head>
  
 
If you use the e-mail tool SamLogic MultiMailer to send your newsletters you can insert the script above into the HTML code by choosing the menu item Format - View HTML code in the MultiMailer editor. If you use another program, and similar functions are missing, you can edit the HTML code with Windows Notepad.
  
 After you have added these three lines your newsletter will look good also in Firefox and Chrome, as well as in some other browsers that are related to them.
  
 << Go Back
  		 
SamLogic