Menu icon Foundation
Background Colors in Foundation for Email 2.1

I'm using Foundation for Email 2.1 for the first time and so far I'm quite impressed!

Unfortunately, there's one issue I can't seem to solve... How do I get background colors to work in Outlook?!

Here's a code sample of how I do it typically

 

 <container>
	  <row class="green-bg">
	    <columns small="12" large="12">
	    <h1 class="headline">Main Story ipsum dolor sit amet</h1>
	      <p>2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt.</p>
	     </columns>
	  </row>
</container>

In app.scss I have:

.green-bg{background-color:#b9cd98 !important;}

It appears that from this Foundation adds style="background-color:#b9cd98 !important;" to the <table> element, but not add bgcolor="#b9cd98", which I think would make background colors work in Outlook. Is there any way around this?

 edit:typos

 

backgroundcolorbgcolorbackground-colorOutlookemailemails

I'm using Foundation for Email 2.1 for the first time and so far I'm quite impressed!

Unfortunately, there's one issue I can't seem to solve... How do I get background colors to work in Outlook?!

Here's a code sample of how I do it typically

 

 <container>
	  <row class="green-bg">
	    <columns small="12" large="12">
	    <h1 class="headline">Main Story ipsum dolor sit amet</h1>
	      <p>2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt.</p>
	     </columns>
	  </row>
</container>

In app.scss I have:

.green-bg{background-color:#b9cd98 !important;}

It appears that from this Foundation adds style="background-color:#b9cd98 !important;" to the <table> element, but not add bgcolor="#b9cd98", which I think would make background colors work in Outlook. Is there any way around this?

 edit:typos

 

Roy Hinkley over 3 years ago

I just confirmed that if I manually add bgcolor="#b9cd98" to the table element in the final minified file, the background colors work fine. However, there is no way I can see to place that code into the files. Every time the dist index.html file is built, it strips out that bit of code. Could this be a bug or perhaps there's a reason it works this way?

 

 

Corey Schaaf over 3 years ago

Try this approach. 

Use your same code snippet

<container>
	  <row class="green-bg">
	    <columns small="12" large="12">
	    <h1 class="headline">Main Story ipsum dolor sit amet</h1>
	      <p>2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt.</p>
	     </columns>
	  </row>
</container>

 

But for the CSS, do this instead. The reason you do it this way is to target the <TH> container.  This should inline the style on the TH, which would be the same as adding to the Table itself. 

.green-bg{
      th{
          background-color:#b9cd98 !important;
      }
}

Roy Hinkley over 3 years ago

Thanks Corey. Yes, it does inline that style on the <th> container, but it still doesn't work in Outlook 2007, 10, 13 or 16. 

The only way I've found to use background colors that work in the Outlooks is to add the bgcolor="#b9cd98" attribute to the table element in addition to the inline CSS.

I was thinking that a modification to node_modules/inky/lib/componentFactory.js might be the fix. It seems like it should be easy to modify it to add in a case for the bgcolor attribute if it's used in the code, but my JS is not that strong. Thoughts?

Corey Schaaf over 3 years ago

That could work. The only thing I would watch out for when doing an update to the js file is if you ever updated foundation for emails from 2.1.0 to 2.1.1 (or whatever) - you would just need to make sure that your settings or any modifications you made to the js would get added back to fix the problem you're having. 

Corey Schaaf over 3 years ago

Also, I asked a similar question about inlining on this post earlier today.  If someone from Zurb answer's it, it might help you out as well. 

http://foundation.zurb.com/forum/posts/39801-question-about-characters-changing-after-using-in-liner-using-sass-version-of-foundation-for-emails

 

Roy Hinkley over 3 years ago

SUCCESS!!

Here's how I did it...

in node_modules/inky/lib/componentFactory.js, at or around line 17 you'll see:   

    // <row>
    case this.components.row:
      var classes = ['row'];
      if (element.attr('class')) {
        classes = classes.concat(element.attr('class').split(' '));
      }

      return format('<table class="%s"><tbody><tr>%s</tr></tbody></table>', classes.join(' '), inner);

That builds the tables structure when it sees <row>

I added in some code to also look for the attribute bgcolor="#XXXXXX". If it finds it, it adds the value into the HTML that it outputs. If it does not find a value, it reverts to the default value from the var, which is bgcolor="". You could also put a value in there if you have a default color.

 

// <row>
    case this.components.row:
      var classes = ['row'];
      var bgcolor = "";
      if (element.attr('class')) {
        classes = classes.concat(element.attr('class').split(' '));
      }
      if (element.attr('bgcolor')) {
        bgcolor = (element.attr('bgcolor'));
      }

      return format('<table class="%s" bgcolor="'+bgcolor+'"><tbody><tr>%s</tr></tbody></table>', classes.join(' '), inner);

My Inky markdown looks like this: 

<row class="green-bg" bgcolor="#b9cd98">

I just built it out and tested it at emailonacid.com and it works perfectly across all the clients and platforms.

As I stated before, bgcolor is, as far as I know, the ONLY way to get background colors to work in Outlook. I think this should be added to the next release of Foundation for Emails. Can anyone suggest how to get this done?

Corey Schaaf over 3 years ago

Nice job Roy.  I'm going to try your fix above in some of my templates. One thing to note if others try the fix above, you need to use the six figure hex value and not the short hand version. For example, if you were to use bgcolor="#fff" that will not render is some email clients. You have to use bgcolor="#ffffff".  

Corey Schaaf over 3 years ago

Roy, quick follow up, how is it adding the # tag to the front of the hex value. 

 

bgcolor="#XXXXXX"

Roy Hinkley over 3 years ago

The # is part of the string enclosed in the quotes. This modification makes a variable out of whatever is inside the quotes for bgcolor, so the # just comes along with the hex.

 

 

Rafi Benkual over 3 years ago

With v2.1 we added a <wrapper> Inky tag that handles backgrounds really well. It's been used and tested in our templates. Example https://github.com/zurb/foundation-emails/blob/develop/templates/basic.html

Roy Hinkley over 3 years ago

Thanks Rafi, but I'm unsure how that applies to the issue.

The problem I was having was setting the background colors on certain table cells, not the entire background. Can <wrapper> help with that? The documentation is pretty vague.

 

Corey Schaaf over 3 years ago

Roy your original question had to do with backgrounds in Outlook not working. 

Using the following markup works really well when needing a background. 

.half-background-1{
  background-color:green;
}

.half-background-2{
  background-color:red;
}

.full-background-1{
  background-color:purple;
}

.full-background-2{
  background-color:orange;
}
<container>
  <row class="collapse">
    <columns large="6">
        <wrapper class="half-background-1">
            <p>This background should take up the width of the cell.</p>
        </wrapper>
    </columns>
    <columns large="6">
        <wrapper class="half-background-2">
            <p>This background should take up the width of the cell.</p>
        </wrapper>
    </columns>
  </row>
  <wrapper class="full-background-1">
    <row>
      <columns>
        <p>This background should take up the full width including the left and right gutter.</p>
      </columns>
    </row>
  </wrapper>
  <row class="collapse">
    <columns>
        <wrapper class="full-background-2">
            <p>This background should take up the width but have gutters to the left and right.</p>
        </wrapper>
    </columns>
  </row>
</container>

Rafi Benkual over 3 years ago

This is awesome @corey! Being able to pass in the bgcolor attribute helps!

@roy - this conversation continues over here: http://foundation.zurb.com/forum/posts/44863-add-html-attributes-to-your-inky-markup

Would love to hear your thoughts!

Julian Warren almost 3 years ago

I wasted a wash over the whole email background and Outlook just ignored the built in delcaration in _template.scss:

 

// Body Styles 
body,
html,
.body {
  background: #f3f3f3 !important;
  }

It turns out it was the old chestnut "!important" which seem to be anything but important in all flavours of Outlook. Leave out the !important.  See the same problem in F2 with expanded buttons: 

https://github.com/zurb/foundation-emails/pull/628

and this specific issue with Outlook:

https://www.campaignmonitor.com/blog/email-marketing/2010/05/outlook-2007-and-the-inline-important-declaration

 

Omwati Sharma over 1 year ago

Best calendar template may calendar 2018.

may calendar 2018 Excel