Menu icon Foundation
Background colour of a row?

How can I isolate a row and give it a separate background colour to the body?

Forgot to mention that I'm using Inky.

Thanks!

Background Colourrowemail

How can I isolate a row and give it a separate background colour to the body?

Forgot to mention that I'm using Inky.

Thanks!

Corey Schaaf over 3 years ago

I actually do this by creating a class on the wrapper. First we need some CSS

.my-color{
  background-color:#555555;
}

then we need our inky markup

<container>
  <row>
    <column>
      <wrapper class="my-color">
        <p>You can put your content inside here</p>
        <p>or you can next further if you have a 2 column format</p>     
        <row>
          <columns large="6"><p>1st column</p></columns>
          <columns large="6"><p>2nd column</p></columns>
        </row>
      </wrapper>
    </column>
  </row>
  <row>
    <columns>
      <p>This row will not have the new background color</p>
    </columns>
  </row>
</container>

Depending on how your gutters are setup and spacing: you can also try this approach:

<container>
  <wrapper class="my-color">  
    <row>
      <column>      
        <p>You can then nest your content inside here</p>
        <p>or you can next further if you have a 2 column format</p>     
      </column>
    </row>
  </wrapper>
  <row>
    <columns>This row will not have the background color.</columns>
  </row>
</container>

ADVANCED: If you want to avoid using CSS and just hardcode the background color directly on the wrapper you could modify the inlining code in this file: 

node_modules/inky/lib/componentFactory.js

Towards the bottom bottom of the file find the //wrapper js and copy the following: 

NOTES: I added comments where I modified the original code.

  • I created a var called bgcolor (4th line)
  • I then added an if statement. (Lines 8 - 11)
  • I then referenced the bgcolor in the return format statement. 
// <wrapper>
    case this.components.wrapper:
      var classes = ['wrapper'];
      var bgcolor = ""; // corey add this line
      if (element.attr('class')) {
        classes = classes.concat(element.attr('class').split(' '));
      }
      // corey added the following statement
      if (element.attr('bgcolor')) {
        bgcolor = (element.attr('bgcolor'));
      } // stop new statement

      return format('<table class="%s" align="center" bgcolor="'+bgcolor+'"><tr><td class="wrapper-inner">%s</td></tr></table>', classes.join(' '), inner);

    default:
      // If it's not a custom component, return it as-is
      return format('<tr><td>%s</td></tr>', $.html(element));

Once this is done, you can start directly adding bgcolor="#XXXXXX" directly to the wrapper which is quite handy (especially if you don't want to create a one off class each time). 

So we would reference the color using either method above, but instead of referencing a class we would write it like so: 

<wrapper bgcolor="#555555">
  <row>
    <columns>Background color added here</columns>
  </row>
</wrapper>
<row>
  <columns>Background color NOT ADDED to this row. </columns>
</row>

KUDOS to Roy Hinkley from this post for the advanced answer: http://foundation.zurb.com/forum/posts/39783-background-colors-in-foundation-for-email-21

Please let me know if you find this helpful. 

   ;;;;.
   ;;;;;
   ;;;;;
   ;;;;;
   ;;;;;
   ;;;;;
 ..;;;;;..
  ':::::'
    ':`

Jack Hobbs over 3 years ago

Great response, however I'm running into some issues with Outlook.

 

 

The wrapper seems to be throwing the container off completely. Do you know why this is?

Thanks!

Corey Schaaf over 3 years ago

I'm assuming you don't want the wrapper to go edge to edge? is that what you mean? 

Jack Hobbs over 3 years ago

I still want to maintain the 580px container but have the row bgcolor expand edge to edge inside the container like you would with

<row class="collapse">

 

Corey Schaaf over 3 years ago

Jack - still trying to understand the issue. I'm just not seeing the problem in the screenshot. A few more details would help me understand exactly what the problem is. 

Rafi Benkual over 3 years ago

Jack, are you using Litmus to test? Can you publish a link to the test? Or share the code you think is causing this?

Corey Schaaf over 3 years ago

@rafi - since Jack's post was marked as spam a few times, we were having a convo on email: 

We seem to be getting mixed results because I'm not having the issue he's having when I post his code in my project. 

This was a link to my email on acid results: 

https://www.emailonacid.com/app/acidtest/display/summary/1vtWyd1kXnD0GR9HGmYNTTf41GQureNTggt5VpTvddRD2/shared

vermaruby38 about 1 year ago

Visit tank trouble online game.

Phong kham nam khoa about 1 year ago

Phòng khám nam khoa tphcm là nhu cầu tìm thiết yếu của mọi bênh nhân nam khoa hiện nay bởi nhiều nguyên nhân khiến nam giới mắc các bệnh nam khoa , trong đó nguyên nhân chủ yếu là do vệ sinh không đúng cách khiến dương vật bị viêm nhiễm , quan hệ tình dục không an toàn …

Bệnh nam khoa có thể xảy ra ở mọi lứa tuổi , từ người cao tuổi cho đến người trưởng thành , thậm chí trẻ em cũng có khả năng mắc bệnh . 1 số bệnh có những dấu hiệu rất khó nhận biết , diễn ra âm thầm trong cơ thể . Đến khi triệu chứng quá nặng mới đi khám . Gây rất nhiều khó khăn trong việc điều trị , tốn kém nhiều chi phí.

adam christ about 1 year ago

@corey schaaf - Thanks for sharing