Current status of the Ning Platform is always available on the Ning Status Blog.

tricks (6)

NC for Hire
Tips left for other Ning Creators get buried with time, so I developed a method to resurface those good ones for another round of help. A while back I showed you over 200 Ning tips that I had scraped out of my own profile discussions dating back to 2007. There was quite a bit of garbage in there so I have gone through those and picked out around 110 tips which are still relevant and have compiled them into a collection for you. You can simply learn something new every day from these tips alone. So, if you think you have done all you can do to make your network the best it can be, i am here to show you that you still have much to do.
Read more

Welcome to the fourth in a series of Ning Creators blog posts focusing on simple design tricks you can use on your network.

Trick #4: Adding a Two-Column Hero Box

The following code, used on the homepage of Ning Creators, will insert a "hero" module that spans two columns at the top of your network's Main page content area. This area could be used to insert an image, a custom Flash/JavaScript piece or just a simple text introduction.

Here's an example:

To get started, visit the "Appearance" area inside the "Manage" tab, then paste the following CSS snippet inside the "Advanced" section (underneath any other code that may already be there):

.space {height:270px;} /*Height of the Hero Area */
.module_text .xg_module_body {overflow:visible;}
#spotlight {margin-left:-245px;width:741px;}
#spotlight img, #spotlight embed, #spotlight object {padding:0; margin:0; max-width:741px;}

Next, visit the "Analytics" area inside the "Manage" tab, then paste in the following snippet (underneath any other code that may already be there):

<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("#xg_layout_column_2").attr({_maxembedwidth: "741"});
}
</script>

On the "Features" area inside the "Manage" tab, add one new Text Box at the top of the left column, then a second Text Box at the top of the center column. Save your changes.
Here's an example:

Back on the Main page, click the "Edit" button on the new Text Box in the left column, then insert the following snippet:
<div class="space"></div>
Now click the "Edit" button on the new Text Box in the center column, and insert this snippet:

<div id="spotlight" class="space">ADD HERO CONTENT HERE</div>
Replace the "ADD HERO CONTENT HERE" text with your custom content (whether it's an image, embed code, HTML, etc.), then save your changes.

Enjoy!
Read more

Welcome to the second in a series of Ning Creators blog posts focusing on simple design tricks you can use on your network.

Trick #2: Centering the Navigation

The following code, used on Carmen Electra's official community, will center your network's navigation area in all web browsers.

CarmenElectra.com

To do this, just visit the "Appearance" area inside the "Manage" tab, then paste the following CSS snippet inside the "Advanced" section (underneath any other code that may already be there):

#xg_navigation ul {text-align: center;margin: 0 auto;}#xg_navigation ul li {display: -moz-inline-box; /* inline-block for earlier versions of FF */-moz-box-orient: vertical; /* inline-block for earlier versions of FF */display: inline-block;vertical-align: middle;*display: inline; /* ie7+ hack */*vertical-align: auto; /* ie7+ hack */text-align: left;float: none;}#xg_navigation ul li a {display: inline;}

When you're done, click the "Save" button. Your navigation should now be centered. Enjoy!

Read more

Here's a handy way to load Ning Creators from your iPhone's home screen as a fullscreen standalone app (rather than a window within Safari):1. Visit https://creators.ning.com/fullscreen.html from Safari on your iPhone. You'll immediately be redirected to the iPhone version of Ning Creators.2. Click the back button in Safari and you'll go to a blank white page. Don't panic, this is normal.3. From this blank white page, press the "+" button at the bottom of the screen and choose the "Add to Home Screen" option. You'll see a preview of the Ning Creators icon and an option to edit the name. You can leave things as they are, then click the "Add" button in the upper-right corner.4. All done. You can now click the newly-added home screen icon to experience Ning Creators as a fullscreen standalone app.Enjoy!

Read more

Welcome to the first in a series of Ning Creators blog posts focusing on simple design tricks you can use on your network.Trick #1: Adding an Arrow Indicator to Navigation DropdownsThe pulldown menus created by our Tab Manager feature are extremely popular, however some Network Creators have expressed interest in displaying an arrow indicator next to tabs that have a dropdown menu (to make it clear to members that there's more content inside that tab). You can see this in action on Enrique Iglesias' official social network.To achieve this effect, visit the "Manage" tab, then the "Analytics" section. Paste in the following snippet underneath anything else that may already exist (don't delete anything):<script type="text/javascript">if (typeof(x$) != 'undefined') {//Adding "dropdown" class to nav tabs that have subtabsx$("li.xg_subtab[dojotype='SubTabHover']").addClass("dropdown");}</script>Save the changes. Now visit the "Manage" tab again, followed by the "Appearance" section. Click on the "Advanced" tab.If you have a light background color on your network, add the following code underneath anything else that may already exist (don't delete anything):.dropdown {padding-right:5px;background:url(https://static.ning.com/creators/design/black-arrow.png) no-repeat right center;}If you have a dark background color on your network, add the following code underneath anything else that may already exist (don't delete anything):.dropdown {padding-right:5px;background:url(https://static.ning.com/creators/design/white-arrow.png) no-repeat right center;}Save the changes. You're all set. You can adjust the "5px" number above to tweak the spacing that appears to the left of the arrow, and if you want to use a different arrow image or support legacy web browsers, you can create a new image with an image editing program, then swap out the existing black-arrow.png or white-arrow.png URL with your custom image's URL.Note that this technique works best on themes in which tabs don't have a separate background color when selected, though certainly feel free to experiment. Happy dropdowning!

Read more

Meanwhile, you can check our social media channels