Change Newsletter Background color in Outlook client

SOLVE
Highlighted
New Contributor

Hi all,

 

I've been banging my head on this one for awhile. I would like to change the default background color for our newsletter. I have managed to do this for most e-mail clients by just adding the following in the <head> tag of the newsletter:

 

#backgroundTable{
background-color:#f2f2f2!important;
border-color:#f2f2f2!important

}


#templateTable{
background-color:#f2f2f2!important;
border-color:#f2f2f2!important;
}

#headerTable{
background-color:#f2f2f2!important
}

#contentTableOuter{
background-color:#f2f2f2!important;
border:none;
border-color:#f2f2f2!important;
border-color:#f2f2f2!important;
}

#contentTableInner{
background-color:#f2f2f2!important;
border-color:#f2f2f2!important;
}

 

However, this trick doesn't seem to work for the Outlook client we're using here. You can see below that the Outlook client adds it's own border color and an additional whitespace. Do any of you guys know, what I can do to fix this?

 

Untitled.pngThe part within the red lines should have a different color

 

It would mean a lot!

 

Thanks!

 

 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
New Contributor

I found the solution. In the email.txt is found the line below: 

 

id="contentTableOuter" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:separate !important; background-color:#ffffff; box-shadow:0px 1px rgba(0, 0, 0, 0.1); padding:20px; border:1px solid #cccccc; border-bottom:1px solid #acacac" bgcolor="#ffffff">
<tbody><tr>

 

So I just had to remove the border and padding for the right ID... and it was fixed Smiley Happy 

1 Reply 1
New Contributor

I found the solution. In the email.txt is found the line below: 

 

id="contentTableOuter" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:separate !important; background-color:#ffffff; box-shadow:0px 1px rgba(0, 0, 0, 0.1); padding:20px; border:1px solid #cccccc; border-bottom:1px solid #acacac" bgcolor="#ffffff">
<tbody><tr>

 

So I just had to remove the border and padding for the right ID... and it was fixed Smiley Happy