Merge Field style attributes

Hi Chris



We send emails with merge fields on a daily basis using NetCommunity and never had this issue. Would you like me to send some of our sample code to you?



Cheers

Raluca

Hi Chris



All of this sounds really strange:) So, just to clarify, are you using NetCommunity Pro?

You can see attached one of our standard announcements (.zip file, .html file inside), with merge fields for "Pref name" and "Pref email address". I have also attached a screenshot of the email received as part of the final mass send, for comparison.



As you can see, only the paragraph is styled the way we need it, and you have to make sure there is no <span> or any other tag surrounding the merge field with a different styling.

What we do, in order to have a visual cue when (rarely) editing straight in BBNC, will be to add 1-2 letters before and after the merge field, without any space, so they are considered a single word. Then style it to our liking - we will be able to see the changes on the surrounding letters.

Also, we use non-breaking spaces instead of regular spaces between and around merge fields (&nbsp;) - I have noticed that sometimes the spaces seem to disappear around merge fields.

We are using a code editor (Dreamweaver, but it could be anything else) to style our emails, as the inbuilt BBNC editor is far from reliable for anything else than minor typo corrections:)).



Hope this helps

Raluca

 

Hi Chris



Well, I can see where your troubles came from:



First of all, you have defined the <td> style, at the very top, as having the white color - #ffffff - for text (highlighted in yellow - within the code posted by you). Therefore, any text within that table cell that's not styled differently will appear as white.

You have defined a different style for the <span> surrounding the merge fields (highlighted in blue), but you just defined the font-family, without defining a color - therefore the merge field inherited the white color from the parent tag (which is the table cell).

As about the font-family - I assume you would like a serif font, as defined in the span styles (Georgia, Palatino), not a sans-serif one, as defined in the td style (Arial).

The correct thing would be to define the text style for the whole cell as follows: font-family, font-size, color, alignment (please see cleaned code at the end of the email).



Second, and very important, try not to copy the text straight from Word. It would be better to copy it first in something like Notepad or similar, which strips off the formatting, leaving just clean text. Then you copy it from that Notepad and paste it into the BBNC interface. This is how the <p class=MsoNormal> appears (highlighted in orange). You shouldn't have any kind of classes into an email html, as some of the email clients will remove any style declaration in the email header, leaving you with useless markup.

The best practice would be to have the style for text repeated in each paragraph tag, to make sure everything is the way you want it. This way you won't need to use that many <span> tags, which are messy and really hard to maintain.

Also, I have noticed some font sizes are in points and some in pixels (highlighted in green) - they need to be all in pixels for email purposes.



A good example of clean code would be like that:

You may notice there is no need for <span> tags, or for separate styling for the merge fields, as they will all obey to the styling rules defined at the beginning of the paragraph.



So, the rule of thumb is to define the style whithin the surrounding tag (the <p> tag most of the time, and the <a> tag for the links), and this way any text within that tag will look the way you need it.



Unfortunately, all of this is quite hard to acomplish using the visual editor in BBNC, this is why I would strongly recommend to use a code editor and, most important, to have someone specialised in coding for emails (which is fairly different from coding for web), reviewing and helping with the emails.



Anyway, I've cleaned up the sample code and posted it below. It should fix your problems now, unless there is any other formatting inherited from parent HTML tags (the rest of the HTML email code that wasn't copied here).



<td style="padding: 10px 30px; text-align: left; color: #000000; font-family: Georgia, Palatino, serif; font-size: 16.1px; background-color: #b5cbbb;">

    <p style="text-align: left; color: #000000; font-family: Georgia, Palatino, serif; font-size: 16.1px; ">Dear <img src="https://community.cancercare.org/insertField.field?id=6&amp;nmode=0&amp;name=CNBIO_FIRST_NAME&amp;type=1290&quot; style="cursor: move;" title="" data-runat="server" data-fieldid="6" data-attribid="0" data-searchable="0" data-fieldname="CNBIO_FIRST_NAME" data-fieldtype="1290" data-htmlencode="True" data-isloop="False" />,</p>

    <p style="text-align: left; color: #000000; font-family: Georgia, Palatino, serif; font-size: 16.1px; ">As this joyous season rushes by, I hope you will take a moment to remember those whose holidays may not be so happy.</p>

    <p style="text-align: left; color: #000000; font-family: Georgia, Palatino, serif; font-size: 16.1px; ">When a person is diagnosed with cancer, it changes everything. But you can help in a very significant way by <a style="color:#000000;" href="http://community.cancercare.org/DonateNow/Dec_Ask"><strong>making a special holiday donation</strong></a> of <img src="https://community.cancercare.org/insertField.field?id=11&amp;nmode=0&amp;name=CNLGF_1_AMOUNT&amp;type=1290&quot; style="cursor: move;" title="" data-runat="server" data-fieldid="11" data-attribid="0" data-searchable="0" data-fieldname="CNLGF_1_AMOUNT" data-fieldtype="1290" data-htmlencode="True" data-isloop="False" /> or more to Cancer<em>Care.</em></p>

    <p style="text-align: left; color: #000000; font-family: Georgia, Palatino, serif; font-size: 16.1px; ">Your gift will provide emotional, practical, educational, and financial support to people coping with cancer. More than 170,000 people have already been helped this year&mdash;with co-pay assistance, support groups, one-to-one counseling, transportation and day care aid, and more.&nbsp; But to make sure we can continue providing these services<strong> free of charge</strong> to everyone seeking help this holiday season, we need your support.</p>

    <p style="text-align: left; color: #000000; font-family: Georgia, Palatino, serif; font-size: 16.1px; ">Please <a style="color:#000000;" href="http://community.cancercare.org/DonateNow/Dec_Ask"><strong>donate now</strong></a>&hellip; and please accept my warmest wishes for a very happy holiday season!</p>

    <p style="text-align: left; color: #000000; font-family: Georgia, Palatino, serif; font-size: 16.1px; ">Thank you for caring,<br />

      Patricia J. Goldsmith</p>

    <p style="text-align: left; color: #000000; font-family: Georgia, Palatino, serif; font-size: 16.1px; ">PS.&nbsp;Would you like to send a holiday e-card to a friend or family member with a personal message of hope? <strong><a style="color: #000000;" href="target=&amp;pid=1516&amp;did=0&amp;tab=0">Click here to send a complimentary e-card</a></strong>.</p>

</td>





Hope this helps a bit,



Best

Raluca

Chris Pitzer:

Well, the email was sent with pretty disastourous results. The merge fields became WHITE when I'm pretty sure the code was telling them to be black. I'm going to post the code and a screen shot. I thought maybe it was due to my trying to stylize the merge fields, but I just sent another test where I didn't tell the system what font/size/color to make the fields, and they still came across as white.



<td style="padding: 10px 30px; text-align: left; color: #ffffff; font-family: Arial; font-size: 12px; background-color: #b5cbbb;">

<p class="MsoNormal"><span style="font-family: georgia,palatino; font-size: 12pt; color: #000000;">Dear </span><span style="font-family: georgia,palatino;"><img src="https://community.cancercare.org/insertField.field?id=6&amp;nmode=0&amp;name=CNBIO_FIRST_NAME&amp;type=1290&quot; style="cursor: move;" title="" data-runat="server" data-fieldid="6" data-attribid="0" data-searchable="0" data-fieldname="CNBIO_FIRST_NAME" data-fieldtype="1290" data-htmlencode="True" data-isloop="False" /></span><span style="color: #000000;"><span style="font-family: georgia,palatino; font-size: 12pt;">, </span></span></p>

<p class="MsoNormal"><span style="color: #000000;"><span style="font-family: georgia,palatino; font-size: 12pt;">As this joyous season rushes by, I hope you will take a moment to remember those whose holidays may not be so happy.<br /><br />When a person is diagnosed with cancer, it changes everything. But you can help in a very significant way by <a href="http://community.cancercare.org/DonateNow/Dec_Ask"><strong><span style="color: #000000;">making a special holiday donation</span></strong></a> of </span></span><span style="font-family: georgia,palatino;"><img src="https://community.cancercare.org/insertField.field?id=11&amp;nmode=0&amp;name=CNLGF_1_AMOUNT&amp;type=1290&quot; style="cursor: move;" title="" data-runat="server" data-fieldid="11" data-attribid="0" data-searchable="0" data-fieldname="CNLGF_1_AMOUNT" data-fieldtype="1290" data-htmlencode="True" data-isloop="False" /></span><span style="color: #000000;"><span style="font-family: georgia,palatino; font-size: 12pt;"> or more to Cancer<em>Care.</em><br /><br />Your gift will provide emotional, practical, educational, and financial support to people coping with cancer. More than 170,000 people have already been helped this year&mdash;with co-pay assistance, support groups, one-to-one counseling, transportation and day care aid, and more.&nbsp; But to make sure we can continue providing these services<strong> free of charge</strong> to everyone seeking help this holiday season, we need your support.<br /><br />Please <a href="http://community.cancercare.org/DonateNow/Dec_Ask"><strong><span style="color: #000000;">donate now</span></strong></a></span><span style="font-size: 12pt; font-family: georgia,palatino;">&hellip;and please accept my warmest wishes for a very happy holiday season!</span></span></p>

<p class="MsoNormal"><span style="font-family: georgia,palatino; font-size: 12pt; color: #000000;">Thank you for caring,<br />Patricia J. Goldsmith</span></p>

<p class="MsoNormal"><span style="font-family: georgia,palatino; font-size: 12pt;"><span style="color: #000000;">PS.&nbsp;Would you like to send a holiday e-card to a friend or family member with a personal message of hope? <span style="font-family: georgia,palatino; font-size: 12pt;"><strong><a style="color: #ffffff;" href="target=&amp;pid=1516&amp;did=0&amp;tab=0"><span style="color: #000000;">Click here to send a complimentary e-card</span></a></strong>.</span></span><br /></span></p>

</td>







Obviously, any help/insight would be appreciated.

Definitely agree with Raluca on scrubbing the html from what was posted.  However, if you style the td tags, you do not also have to style the p tags.  That is duplicating work effort in your code.



Sometimes there is a default stylesheet at being called on in the message if one is using a web email client, which may cause the white merge fonts. It looks back at the BBNC site stylesheet and utilizes those styles.  You can overwrite them within the a tag style, like Raluca showed.



Lastly, merging in gift amounts is not typical functionality, so I'm assuming you are using a csv imported list.  Please review the format of that column of data to ensure it is simple number format, not dollar format (or other).  Then in your email message, add the $ symbol and the merge field. 



FYI - CancerCare has Pro version of BBNC.