Ning Broadcast Message HTML Tips!

Wow, every time I create a broadcast message on Ning, it's total frustration for me. The received message rarely looks the way it does in the Ning Editor. I have a few tips I've learned through trial and error I want to share with you.

• The best way to add special styling to your broadcast message content is to wrap an outer DIV around all content - - or a table for more advanced HTML Users. Add the tag like this: <DIV>All of your broadcast message content...</DIV>
• I will show you a few styling attributes I like to add to my broadcast messages. Let's start with the preferred font family and font-size. Building upon your special DIV tag above - - to add the style for font, use similar code: <div style="font-size: 14px!important; font-family: verdana,tahoma,arial;">
• Now, to add a little more professional look: Set a width, add padding, and add a border around your content. See example code below. Change the values to your preferred settings. The padding adds white space between your content and the outer border.
• <div style="width: 750px; padding: 35px; border: 5px solid #e6e6e6; font-size: 14px!important; font-family: verdana,tahoma,arial;">
• Be sure to end all content with the ending DIV tag like this: </DIV>

• When you insert an image via the Ning Editor, follow these tips:
• From the Insert Window, Select all of the text next to "Link", and delete, unless you want to show full image on click.
• Click on Left or Right, to wrap text around image.
• To add padding around the image, click on HTML button and locate your image source - - img src=
• Add these attributes: hspace="15" vspace="15". I will show you the pumpkin img src for example:
• <img src="pumpkin_sm.png" align="left" hspace="15" vspace="15" width="128" />

Now for my biggest frustration and critical tip - - How to Add Line Height/Spacing:

• When you want to add line-height (more line spacing) - - in the past if I added to the DIV wrapped around entire message, it worked. Now it does not, not for me at least. Why? I have no clue. =) Now I find, you must add the line-height style to each paragraph or table cell.
• After you complete your message, or as you go if it's easier for you, click on the HTML button. For each <p> paragraph tag, replace it with something like this:
• <p style="line-height: 200%;">Your paragraph content</p>
• Do this for EVERY paragraph tag.

Special Double Borders:

• You can add an extra outer DIV tag to create a double border around your content. You'll want to add this one to the absolute outer wrap.
• Add a width that is approximately 100 pixels wider than your main DIV we used in examples above.
• For example, below is a screenshot of a recent broadcast message I sent out. It creates an outer border that looks like this - - hopefully:
• 
• I will share the HTML file with you below.
• Below are the 2 outer DIVs for the Double Border. Be sure to send a preview to yourself, to make sure the borders are styled properly.
• Notice I made my outermost DIV less in padding, and a different color for the border.
• OUTERMOST DIV
• <div style="width: 850px; padding: 2px; border: 3px solid #0B760E;">
• NEXT DIV - OUR MAIN STYLING DIV
  <div style="width: 750px; padding: 35px; border: 15px solid #E46401; font-size: 14px!important; font-family: verdana,tahoma,arial;">
• Be sure you end both DIV tags with </div>.
• BroadCast Message Template - HTML file below:

HalloweenNingBroadcastMessageHTML.txt

Enjoy!

Jen