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


NC for Hire

Are you sitting down? Because this is likely the coolest Ning Tip I've shared yet! Do you see the member icons/links in upper right of the JenSocial header? Would you like to do the same on your Ning Network?! Well, I'm about to tell you how. ;-)

Before you read further: this will take a little tweaking on your part. You either need to know how to use Firebug, or have an available test site. Otherwise, this could be almost impossible to get the layout just the way you want it.

This tip provides the special CSS that will enable you to move the Member Module box to the header of your network. However, the module will function as it always has, and the members will only be displayed on your home page. SEE UPDATE BELOW - - HOW TO DISPLAY ON ALL PAGES.

The tweak is not for someone who has little or no experience with CSS. Sorry, but I will not be able to help individuals work with this code. I'm giving you the tip, and you are on your own from there, unless you want to hire me to do it for you. ;-) Follow all instructions below, and add the CSS to your Advanced CSS box.

  1. You're going to need to use a site banner that has a good deal of white space in the right hand portion of the banner.
  2. You may want to move your member module to a narrow column (in left portion of Features Layout  - - via My Network/Settings), and select 5 rows of members. I think this will help the tweaking a little, if you've selected the same that I have on JenSocial.
    • Because of the increased width we will place on this module, you're not likely to be able to display the maximum number of members, as in the module before tweaking it.
    • Just make it look good, and function well. That's what matters. ;-)
  3. WARNING, for future member display options - - if you remove the module header as I have below (here's that code: .xg_widget_main div.module_members .xg_module_head {display:none;} ), you will not be able to edit the # of rows or type of members you display, unless you edit via Firebug, or remove the code from CSS.
    • So, if you want to remove the module header, I suggest you make a decision on the member module display options that will make you happy for a while to come - - by selecting the type of members and # of rows to display. And be sure to do this before you edit and add the CSS.
    • If you don't remove the member module header, this isn't an issue.
  4. For the top placement of the module, adjust the number of pixels from the top of your site. I have used top:19px;
  5. For the horizontal (x axis) placement of the module, adjust the margin-left value to suit your layout. This number totally depends on which column you have placed your member module. There will be cases where you'll need a margin-left value that is a negative, to pull the module to the left.
  6. Adjust the Module Size - - height and width. These numbers will depend on:
    • Which column you placed your member module in, wide or narrow.
    • How many members you have selected to be displayed (as mentioned above, I have selected 5 rows in a narrow column.)
    • These numbers will likely be your biggest challenge. If you can edit via Firebug, this will be easy for you.
  7. Absolutely imperative! Test this on several browsers, and most definitely on 2 screen resolutions. Be sure to check 1024 by 768.

Example Code as Tested on the Ning Creator's Network (via my FireBug):

/* Adjust module placement and module size */
.xg_widget_main div.module_members {top:19px!important; margin-left:545px; height:100px!important; width:423px; position:absolute;}

/* Remove Module Header and/or Footer - - optional, but I do suggest removing the footer */
.xg_widget_main div.module_members .xg_module_head {display:none;}
.xg_widget_main div.module_members .xg_module_foot {display:none;}

/* Adjust the profile image size. This will allow you to display more members */
.xg_widget_main div.module_members {width:94%; height:94%;}

/* Next 2 lines remove a lot of unnecessary padding, and you may or may not need them */
.xg_widget_main .xg_3col .xg_1col .module_members .body_small .clist li {margin:0px!important; padding:0px!important; padding-left:0px!important;}
.xg_widget_main .xg_3col .xg_1col .module_members span.xg_avatar {margin:0px!important; padding:1px 0px 3px 1px !important;}

Code Installed on JenSocial:
/** Move Members up to Header **/
.xg_widget_main div.module_members {margin-left:-65px; top:19px!important; height:100px!important; width:493px; position:absolute;}
.xg_widget_main div.module_members .xg_module_head {display:none;}
.xg_widget_main div.module_members .xg_module_foot {display:none;}
.xg_widget_main div.module_members {width:94%; height:94%;}
.xg_widget_main .xg_3col .xg_1col .module_members .body_small .clist li {margin:0px!important; padding:0px!important; padding-left:0px!important;}
.xg_widget_main .xg_3col .xg_1col .module_members span.xg_avatar {margin:0px!important; padding:1px 0px 3px 1px !important;}
/** End Move Members to Header **/

Have fun!

P.S. Friends, please understand, it's not possible for me to help many people "for free" outside of the tip itself. I have already received several emails since posting this tip.

UPDATE: Display Members in Header on ALL PAGES Except Member Profile Pages (It came to my attention, if we move to header on Profile Pages, it messes up the module.)
First let me say, I have NOT tested this thoroughly. But, I just had a major blonde moment. This just
hit me! You should be able to display the members in the header on all pages by following these steps. You will need to tweak this code, especially the left margin amount.

1. If you use this updated code for all pages, remove your original code.
2. Go to My Network/Settings/Features Layout
3. Move your Member Module to far Right Column in top grid, where it shows on all pages. You MUST perform this step for this to work.
4. Tweak the code below, and add to your Custom Code Box. We have to add this code to our Custom Box, because we don't want the members in header on Profile Pages. It came to my attention, this will mess up the profile pages if we do. There may be easier code. This is what I've come up with for now. Don't forget to remove original CSS, if you used it. And, add this code to your Custom Code Box.  I have also attached in text file.

<script type="text/javascript">
/* Move Member Module to Header, all pages except Profile Pages */
if (x$(".xg_widget_profiles_profile_show").length == 0) {
if (typeof(x$) != 'undefined') {
x$('div.module_members .xg_module_head').css('display','none');
x$('div.module_members .xg_module_foot').css('display','none');
x$('.xg_3col .xg_1col .module_members .body_small .clist li').css('margin','0px');
x$('.xg_3col .xg_1col .module_members .body_small .clist li').css('padding','0px');
x$('.xg_3col .xg_1col .module_members span.xg_avatar').css('margin','0px');
x$('.xg_3col .xg_1col .module_members span.xg_avatar').css('padding','1px 0px 3px 1px');
} }

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network


  • what a fantastic trick this is, I'm playing around with it and it looks wonderful. I wanna contact you about some work i want to get done and i'm not sure if its possible, I will dm you!
    • NC for Hire
      Cool Spyro! I found your site, and that's going to look great!
      Just pop me a message.
  • Thanks for the tip Jen. I just copied your code and this is how it looks in my network.

    • That looks cool I would love to get the members pics to line the top of the page (1 row deep)
    • NC for Hire
      Course, already told you on JenSocial, LOL - - but wanted to make a public statement here too. You had some nice space available, so that was great. And, your site looks really nice!
    • I really like what you've done to this site!
  • Very cool tip; great job!
    • NC for Hire
      Thanks TJ! Interestingly enough, I just went to 3 well known sites and they are all using the tip - - the exact code no less. But, no comments here. ;-) Would be a great new feature if Ning added "# of views" on all pages. Then if I added a tip, I would know if it was interesting to NCs, or not. That sort of thing helps guide my decisions on the type of tips I offer.

      On JenSocial I can check my analytics.

      Have a great day,
  • Wow, Jen, this is AWESOME! I may try it later, but I don't know if I can do this one without help:(
    • NC for Hire
      If you have space in your header, you may do well with the code provided here. I'm finding that more NCs are able to use it without tweaking, than I had expected - - which is nice.
This reply was deleted.

Featured Discussions



Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Sheshdhar Tiwari posted a discussion
At the sign up we collect date of birth of users. Is it possible to send automated birthday greetin…
13 hours ago
Derek Jackson, Beatriz Eyeres, Elsa Dominguez and 21 more joined Ning Creators Social Network
21 hours ago
Anna_Ning_Support replied to Rich Page's discussion
Help migrating a custom ning 2.0 to 3.0
We offer the migration procedure on our platforms. It can be done by our Technical Team.
Anna_Ning_Support replied to Annabel Gregory's discussion
Another issue with SSL certificate renewal - please, please sort it!
We do apologize for the delay. The SSL certificates from Let's Encrypt are automatically ren…"
Captain Major RockettBobebuzz updated their profile photo
Annabel Gregory replied to Annabel Gregory's discussion
Another issue with SSL certificate renewal - please, please sort it!
"Correction - Ning didn't reply for 2 days."
Annabel Gregory posted a discussion
Hi,Just received an email with the subject line:Let's Encrypt certificate expiration notice for dom…
Polly Galita posted a discussion
Hello,We recently created our social network using Ning and we have 100 members…
Mayo Best replied to Anastasiia_NING support's discussion How to monetize your website: use sponsored content. in NING BUSINESS CLUB
"That's great advice thanks."
Mayo Best liked Anastasiia_NING support's discussion How to monetize your website: use sponsored content. in NING BUSINESS CLUB
Mayo Best and Dan Lee are now friends

Meanwhile, you can check our social media channels