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.

Featured Discussions

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

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
"Hello,
We offer the migration procedure on our platforms. It can be done by our Technical Team.
Ple…"
yesterday
Anna_Ning_Support replied to Annabel Gregory's discussion
Another issue with SSL certificate renewal - please, please sort it!
"Hello,
We do apologize for the delay. The SSL certificates from Let's Encrypt are automatically ren…"
yesterday
Captain Major RockettBobebuzz updated their profile photo
yesterday
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."
Sunday
Annabel Gregory posted a discussion
Hi,Just received an email with the subject line:Let's Encrypt certificate expiration notice for dom…
Sunday
Polly Galita posted a discussion
Hello,We recently created our social network using Ning www.tiomangrow.com and we have 100 members…
Saturday
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."
Saturday
Mayo Best liked Anastasiia_NING support's discussion How to monetize your website: use sponsored content. in NING BUSINESS CLUB
Saturday
Mayo Best and Dan Lee are now friends
Saturday
More…

Meanwhile, you can check our social media channels