Applying style to columns in Zurb Email Foundations

Question

I hope someone can point me in the right direction on how to change the background color of a column in Zurb Foundation for Emails 2 while using the Sass version. Is there a way to set the background color for the column or row ? I tried multiple things but for some reason cant apply a style to columns or row. body, html,

        h4.topline {
      text-align: center;
      color: rgb(0, 255, 85);
      background: red;
    }
    p.value {
      text-align: center;
      color:indigo;
      font-weight: bold;
      background: greenyellow
    }
    div.test{
        background: greenyellow
    }
    .columns.descr {
      text-align: center;
      color: gainsboro;
      font-weight: bold
    }
    .row.test{
        border-width: thick;
        border-color: aqua

    }
    </style>

<container class="body-notify">
                <row>
                    <columns small="12" large="12" >
                        <spacer size="10"></spacer>
                        <h4 class="topline">Information</h4>
                    </columns>
                </row>
                <row>
                    <div class="test">
                    <columns class="descr" small="12" large="6">Description 1</columns>
                    </div>
                    <columns small="12" large="6"><p class="value">Value 1</p></columns>
                </row>
                <row>
                    <columns small="12" large="6">Description 1</columns>
                    <columns small="12" large="6"><p class="value">Value 2</p></columns>
                  </row>
        </container>

Answer 1

A bit late on this, but hopefully it will still help! The columns element is part of the Inky templating markup and if you inspect it in the browser you'll see that this is actually a <th> element with the class name columns. So you should be able to target it with th.columns:

th.columns.descr { text-align: center; color: gainsboro; font-weight: bold }

Similarly, <row> in html markup is a table element so try table.row { add css here }

Also be wary of using <div> tags in html emails - they get stripped by some email clients. From the Foundation docs

When it comes to making emails, divs aren’t a thing. Don’t kill the messenger, but it’s true. It's not fun finding out we can't just use a with auto left and right margins for centering, or background colors; it won't work with most email clients. <div>'s can still be used for targeting CSS and for grouping semantically related elements, but shouldn’t be used for structural purposes or spacing.

You can use the <wrapper> element (also inky templating markup) instead. In actual html this is a table element with the class of wrapper, so if you needed to target this with sass it would be

table.wrapper

Answer 2

I work last year on the email marketing and I know some things , you can't add any style of css in email styles. so I think you can add background color inline on your div like this :

<div class="row" style="backgound:red;"></div>