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

FORUM

NC for Hire

Add Member Account Box Links/Notifications to NingBar, and Hide Account Box - - Saving Space Above Fold (Collaborative Efforts: Jen and Elson)


There are now 3 versions of this code.

Notes: #1 taking the least amount of space in Custom Code Box, and #3 taking the most space (but offers the most features):

  1. Without icons, without Notifications - - just links: Inbox, Alerts, Friends, Invite, Settings.
  2. With icons, without Notifications - - just icons and links.
  3. With icons, with Notifications - -icons, links, and Notifications (everything! thanks to Elson).



What Will This Code Do For Your Network?

  1. This tip will show you how to add your Account Box Links for: Inbox, Alerts, Friends, Invite and Settings to your NingBar.
  2. Hide your Account Box, saving space above fold.
  3. The links will only be visible to signed-in Members.
  4. Version #1 - No icons, no notifications, just links.
  5. Version #2 - No Notifications, just icons and links.
  6. Version #3 - Everything (Icons, Links, and Notifications)
  7. Note: you may experience issues with formatting if you already have custom links in your NingBar.

 

 

Instructions:

Version #1, No Icons, No Notifications (Just Links):

  • If you do not want to hide the Account Box, remove the CSS:
    .account-links {display:none!important;}
  • Otherwise, add all code below to your Custom Code Box via: My Network/Tools/Custom Code
  • The safest method of copying code below - - copy/paste from this text file: AddMemberAccountLinks_NingBar.txt


<!-- NingBar Navigation Links for Member Account Box -->
<style>
.lsep { margin:10px 2px 0;float:left;color:#ccc;font-size:110%; }
.account-links { display:none!important; }
.ningbarlink a { text-decoration:underline!important; }
</style>

<script type="text/javascript">
if (ning.CurrentProfile != null ) {
var NingBarLinks = '<li class="ningbarlink"><a href="/profiles/message/listInbox">Inbox</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/message/listAlerts">Alerts</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/friend/list?my=1">Friends</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/main/invitation/new">Invite</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/settings/editProfileInfo">Settings</a></li>';
x$('#xn_bar #xn_bar_menu #xn_bar_menu_tabs').prepend(NingBarLinks);
};
</script>
<!-- End NingBar Navigation Links -->

 

 


Version #2 No Notifications (Icons and Links):

The safest method of copying code below - - copy/paste from this text file: AddMemberAccountLinks_NingBarIcons.txt

 

<!-- NingBar Navigation Links for Member Account Box -->
<style>
.lsep { margin:10px 2px 0;float:left;color:#ccc;font-size:110%; }
.account-links { display:none!important; }
.ningbarlink a { text-decoration:underline!important; }
.ningbarlink img { padding-top:3px; }
</style>

<script type="text/javascript">
if (ning.CurrentProfile != null ) {
var NingBarLinks = '<li class="ningbarlink"><a href="/profiles/message/listInbox"><img alt="Inbox" src="https://storage.ning.com/topology/rest/1.0/file/get/11386184?profile=original">Inbox</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/message/listAlerts"><img alt="Alerts" src="https://storage.ning.com/topology/rest/1.0/file/get/11386196?profile=original">Alerts</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/friend/list?my=1"><img alt="Friends"src="https://storage.ning.com/topology/rest/1.0/file/get/11386179?profile=original" width="16">Friends</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/main/invitation/new"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11386189?profile=original" width="16">Invite</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/settings/editProfileInfo"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11386217?profile=original" width="16">Settings</a></li>';
x$('#xn_bar #xn_bar_menu #xn_bar_menu_tabs').prepend(NingBarLinks);
};
</script>

<!-- End NingBar Navigation Links -->

 

Version #3, Everything (Courtesy of Elson) Icons, Links, and Notifications:

The safest method of copying code below - - copy/paste from this text file: AddMemberAccountLinks_NingBarIcons_ElsonsNotifications.txt

 

<!-- NingBar Navigation Links for Member Account Box -->
<style>
.lsep { margin:10px 2px 0;float:left;color:#ccc;font-size:110%; }
.account-links { display:none!important; }
.ningbarlink a { text-decoration:underline!important; }
.ningbarlink img { margin-top:7px!important; }
</style>

<script type="text/javascript">
var getinbox;
var getalert;
var getrequest;

if (ning.CurrentProfile != null ) {
getinbox = x$('.xj_messages_present .xj_count_unreadMessages').html();
getalert = x$('.xj_alerts_present .xj_count_unreadAlerts').html();
getrequest = x$('.xj_count_friendRequestsReceived .xj_multiple_friend_requests a').html();


var NingBarLinks = '<li id="ninbox" class="ningbarlink"><a href="/profiles/message/listInbox"><img alt="Inbox" src="https://storage.ning.com/topology/rest/1.0/file/get/11386184?profile=original">Inbox</a></li>' + '<span class="lsep">|</span>'
+ '<li id="nalert" class="ningbarlink"><a href="/profiles/message/listAlerts"><img alt="Alerts" src="https://storage.ning.com/topology/rest/1.0/file/get/11386196?profile=original">Alerts</a></li>' + '<span class="lsep">|</span>'
+ '<li id="nfriends" class="ningbarlink"><a href="/profiles/friend/list?my=1"><img alt="Friends"src="https://storage.ning.com/topology/rest/1.0/file/get/11386179?profile=original" width="16">Friends</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/main/invitation/new"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11386189?profile=original" width="16">Invite</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/settings/editProfileInfo"><img src="https://storage.ning.com/topology/rest/1.0/file/get/11386217?profile=original" width="16">Settings</a></li>';
x$('#xn_bar #xn_bar_menu #xn_bar_menu_tabs').prepend(NingBarLinks);
};

var ninboxa = x$('#ninbox a').html();
var nalerta = x$('#nalert a').html();
var nfriendsa = x$('#nfriends a').html();

if(getinbox > '0') x$('#ninbox a').html(ninboxa + ' ( ' + getinbox + ' ) ');
if(getalert > '0') x$('#nalert a').html(nalerta + ' ( ' + getalert + ' ) ');
if(getrequest.indexOf( 'xj_count') <= 0) x$('#nfriends a').html(nfriendsa + ' ' + getrequest);
</script>
<!-- End NingBar Navigation Links -->

 

NOTE:The Inbox Notification doesn't show up until a refresh or going to new page.

 

It took some careful thought to create this tip, like would it affect any other code, etc...Please let me know if this causes any issues.

A special thanks to Elson for adding the code for notifications, and thank you Elliott for helping out with the icons.

I hope you all enjoy this tip! See it live on JenSocial.com.

Jen

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

Join Ning Creators Social Network

Email me when people reply –

Replies

  • thanks Jen..very cool

      • Jen I'm sooo happy that you provided this code. Thank you! A million thanks!!!!

        A quick question... Would you know how to get a status post field in that Ning bar along with the member account box links that's there currently? Thank you Jen, if you could. bless you.
  • Wow!  Thanks Jen!

    This looks great!

    I did leave the Account Box so people could see that they had new mail.

    • NC for Hire

      Oh yeah, good point Tyler. I'll work on that.

      Glad you like it,

      Jen

      • This reply was deleted.
        • NC for Hire

          WHOA, not good! Send me a private message. I'll probably have to signin to your site as Admin, hide whatever the problems are with CSS, and then hopefully be able to remove the code. Really sorry that happened. I have no idea how well this code would work these days, haven't looked at it in a very long time. It's probably conflicting with some other code in your Custom Code box, but not sure.

          • Yeah I thought a/b that too (CSS) but the 'save' button won't work there either.  Well I'll reach out to Ning and ask them to wipe it out.  With nothing 'saving', I don't see any other alternative.  I think you're right; there's clearly another code already in the site causing conflicts.  Guess I'll have to start from scratch once it's repaired.  Just my luck.  *lol*  

  • Awesome.. nice TIP Jen

    Something I think you forget to hide the Account Module header

    .xj_user_info{ display: none ! important;}

    • NC for Hire

      Emmanuel,

      I didn't want to hide the member name and comment approvals. But some will want to hide that too, thanks!

      Best,

      Jen

This reply was deleted.

Announcements

 

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

Michelle Gilbert, CA, APAIA liked ⚡JFarrow⌁'s video in Ning Powered Events
yesterday
J.Ayvar replied to Paul Corona's discussion
Mobile Version- Open to Desktop View
"Hello @ Paul. Ning 2  should be responsible .i am wating for these feature too."
yesterday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Thank you Ning! SEO Improvement Features!
"Thank you Anastasia.. have a great weekend"
yesterday
Anastasia_Ning_Support posted a discussion
 
Hello everyone!
Are you ready to level up your marketing skills? Join our new webinar on August 2…
yesterday
Paul Corona posted a discussion
Ok- I'm a diehard desktop user but once in awhile I'll check our site on my phone.....Since most pe…
yesterday
Alessandro replied to SweetPotato's discussion
Ning 3.0 Tip: Infinite Scroll for Photos (Loading More Images ... )
"I found out for groups! Groups are loading automaticatlly on scroll!
In itemSelector you need to ch…"
yesterday
Anastasia_Ning_Support replied to ⚡JFarrow⌁'s discussion
Thank you Ning! SEO Improvement Features!
"Hi! 
Thank you for your feedback! We are preparing an announcement with several minor updates that…"
yesterday
Oluwadamilola Taiwo Oyebanji, Donnie Belcher, Moses David and 3 more joined Ning Creators Social Network
yesterday
Groudswell replied to Groudswell's discussion
Editing Sign-up Page - Adding a link and Paypal Button
"We have looked into this, but don't think it will work for us.  Will it support autorenew on either…"
Friday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Thank you Ning! SEO Improvement Features!
"It would be cool if there could be an option to specify a custom image for social media shares..."
Thursday
Rex updated their profile
Thursday
samuel francisco updated their profile
Thursday
More…

Meanwhile, you can check our social media channels