What is the generator? The Generator will take your simple HTML tags and text, like paragraphs, links and images - - and creates the script for your Custom Code Box - - to inject your content into a special place on your Ning Network. For example: you may want to add a simple text message before/after your NingBar. See great mini-tutorial for: Announcement at Top of New Chat Box, at bottom of page.

Add Your HTML Code Below (Text and HTML Tags - No JavaScript)

JenSocial Injection Code Generator | Developed by Elson Tan

Generator Details:

This is how it works. The generator will take your simple HTML tags and text, like paragraphs, links and images - - and create the script for injection into special locations in your Ning Network. For example, you might want to insert a special message above or below the Navigation or NingBar. The generator creates the script for you. There are pre-coded location insertions points you can select to insert your HTML after or before those locations.

Warning: We've tested the Generator, but it's still in beta. Please report any issues you experience. As in any code hack or tip, please install at your own risk.

Instructions:

• Add your HTML code in the box above, just like you would in a text box from the HTML mode (clicking on the HTML button).
• ~ Be sure to only enter simple HTML tags and text. Tag examples: links, images, paragraphs and divs.
• ~ Do not enter scripts.
• ~ If you use a single quote in your text like in the word I'll, be sure to add backslash like this: I\'ll - - or your generated script will not work.
  
• Next to Inject code, select After or Before.
• From the drop-down box, select the location (CSS element) where you want to insert your HTML.
• After you select the CSS element, the id/class will be auto-filled in box labeled: element name/class/id. This is also a great learning tool, to learn some of Ning's element id/class names.
• Click on the Generate Code button.
• Grab your generated script, and paste into the Custom Code Box via: My Network/Tools/Custom Code
• Save

For Advanced Users:

If you know a CSS element id/class name, you can enter the name in the element name/class/id field and follow the same steps above - - minus selecting the class/id. Be sure to include the class prefix - a period, or the id prefix - a pound sign, #. For example: #xg_navigation or .account-links

We will be adding new elements in the future. PLEASE feel free to share your element ideas.

HTML Code Examples - CORRECT WAY AND WRONG WAY ;-)

HTML Code Examples/Template Code

Announcement at Top of New Chat Box & Install Instructions:

• Edit code below, and add your short announcement.
• Paste entire DIV/HTML code into top Generator Box.
• Select "After" for Injection code location.
• Select "New Chat Box (Top)" from drop-down selections. It is under "Common Insertions Points"
  
• Click on "Generate Code" button.
• Copy/paste generated script to your Custom Code Box via: My Network/Tools/Custom Code Box.
• Done.
  

<div style="padding:10px;border-bottom:8px solid #e6e6e6;">Welcome to Live Chat! We hope you enjoy meeting and chatting with fellow members. Please be respectful towards others.</div>

The generator was developed exclusively for JenSocial - Copyright © 2011 JenSocial, all rights reserved.
Support for the Generator is only offered in VIP Group.

Developed by Elson Tan, a very talented young Developer.