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>

 

How to Add Horizontal/Vertical Spacing and Position Images - see pumpkin in attached example:
  • 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

 

Views: 1175

Replies to This Discussion

Let me be the first to say "Thank you JENius" for sharing this tip.

Happy Halloween!

God bless!

Thanks Ashary! I was really wondering if the tip was lame. LOL! Appreciate the feedback.

=)

Ditto

Thanks Jen!  Broadcast message drives me nuts.  I'll try some of these tips.  Ning's editor thinks it knows best and always changes my work, and not for the better.
Me too! I may create a couple of quality templates for the VIP Group. I was kinda waiting and thinking Garfield of http://creatorsu.ning.com/ is going to offer premium templates. I think he has plans to do this, if not already.

Great! Thanks for the feedback. You did the template proud for sure!!!!!

It should not be this much work. Folks don't have the time, I AdORE this but each time? Damn whats up with Ning. 

RSS

Members

© 2017   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips