Add Member Account Box Links/Notifications to NingBar (Collaborative Efforts: Jen and Elson)

[Jen]

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. 
4. The links will only be visible to signed-in Members.
5. Version #1 - No icons, no notifications, just links.
6. Version #2 - No Notifications, just icons and links.
7. Version #3 - Everything (Icons, Links, and Notifications)
8. 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="http://api.ning.com:80/files/UNKbObYJPtqfg2aS-dgvbW4oXlCd3U5WkjJEpeoMl6C5xN35tcqAFoslfCJEsXpcbF8P6-Xxn4I50nhLef7ns4MKoyX6OGm7/nb_mail.png">Inbox</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/message/listAlerts"><img alt="Alerts" src="http://api.ning.com:80/files/qQrSmPU5KN3zAoKLSl-79Laa3XysHZWEL7-Zj18kXMSfY6wNNkJ6Rk5Y6Tw*sksG582rvj3*cbHut*nFvPQqbA__/nb_bell.png">Alerts</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/friend/list?my=1"><img alt="Friends"src="http://api.ning.com:80/files/Ysd3GOwEDPYA7uPoibzkeZenfd4mM24U72C3pYGeFzwVL-ja2egQVMLHhxfODqgi9uh5CTlR-mmOov11u1fcmpBntSHGIxR5/nb_friends3.png" width="16">Friends</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/main/invitation/new"><img src="http://api.ning.com:80/files/6Jh2*58jpdlF21tISzcGBxmH6eHIHJ7Gdyl1BSTeWc*e5LLO6JwoA*lquR5NCgFAZTlUrdTVXJNr1S4cQAssmI2QzQmnQw9F/nb_invite.png" width="16">Invite</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/settings/editProfileInfo"><img src="http://api.ning.com:80/files/F9CXodZonLEtbcyTdP1TyY6xmsw37eTy4Bh5WHYpdOQS7GrETVqwzGFYcFHW*y3WWCMV3I3GzQr3YgirS*cbX8QHJEmdu1IX/nb_settings.png" 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="http://api.ning.com:80/files/UNKbObYJPtqfg2aS-dgvbW4oXlCd3U5WkjJEpeoMl6C5xN35tcqAFoslfCJEsXpcbF8P6-Xxn4I50nhLef7ns4MKoyX6OGm7/nb_mail.png">Inbox</a></li>' + '<span class="lsep">|</span>'
+ '<li id="nalert" class="ningbarlink"><a href="/profiles/message/listAlerts"><img alt="Alerts" src="http://api.ning.com:80/files/qQrSmPU5KN3zAoKLSl-79Laa3XysHZWEL7-Zj18kXMSfY6wNNkJ6Rk5Y6Tw*sksG582rvj3*cbHut*nFvPQqbA__/nb_bell.png">Alerts</a></li>' + '<span class="lsep">|</span>'
+ '<li id="nfriends" class="ningbarlink"><a href="/profiles/friend/list?my=1"><img alt="Friends"src="http://api.ning.com:80/files/Ysd3GOwEDPYA7uPoibzkeZenfd4mM24U72C3pYGeFzwVL-ja2egQVMLHhxfODqgi9uh5CTlR-mmOov11u1fcmpBntSHGIxR5/nb_friends3.png" width="16">Friends</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/main/invitation/new"><img src="http://api.ning.com:80/files/6Jh2*58jpdlF21tISzcGBxmH6eHIHJ7Gdyl1BSTeWc*e5LLO6JwoA*lquR5NCgFAZTlUrdTVXJNr1S4cQAssmI2QzQmnQw9F/nb_invite.png" width="16">Invite</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/settings/editProfileInfo"><img src="http://api.ning.com:80/files/F9CXodZonLEtbcyTdP1TyY6xmsw37eTy4Bh5WHYpdOQS7GrETVqwzGFYcFHW*y3WWCMV3I3GzQr3YgirS*cbX8QHJEmdu1IX/nb_settings.png" 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

[Kos]

Ha!  I thought I was going insane!  *LOL*  Suddenly "Invite" reappeared on my site after I had removed it a few years ago..........and for the life of me I can't remember how I removed it.  Now i know it's not just gremlins in the code........others are experiencing things suddenly re-appearing.  

Anyone remember how to remove this bugger?   I only want Inbox and Settings. 

I removed the others by using  this and altering the "alerts" to "friend" or whatever but it doesn't work on the invite.

div#xg_module_account ul li a.xg_sprite-friend{display:none;}
#xg_friend_tab {display:none;}

[Jen]

<!-- 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; }
#xn_bar li img { margin:4px 5px 0 5px!important;}
</style>

<script type="text/javascript">
if (ning.CurrentProfile != null ) {
var NingBarLinks = '<li class="ningbarlink"><a href="/profiles/message/listInbox"><img alt="Inbox" src="http://api.ning.com:80/files/UNKbObYJPtqfg2aS-dgvbW4oXlCd3U5WkjJEpeoMl6C5xN35tcqAFoslfCJEsXpcbF8P6-Xxn4I50nhLef7ns4MKoyX6OGm7/nb_mail.png"></a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/message/listAlerts"><img alt="Alerts" src="http://api.ning.com:80/files/qQrSmPU5KN3zAoKLSl-79Laa3XysHZWEL7-Zj18kXMSfY6wNNkJ6Rk5Y6Tw*sksG582rvj3*cbHut*nFvPQqbA__/nb_bell.png"></a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/friend/list?my=1"><img alt="Friends"src="http://api.ning.com:80/files/Ysd3GOwEDPYA7uPoibzkeZenfd4mM24U72C3pYGeFzwVL-ja2egQVMLHhxfODqgi9uh5CTlR-mmOov11u1fcmpBntSHGIxR5/nb_friends3.png" width="16"></a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/main/invitation/new"><img src="http://api.ning.com:80/files/6Jh2*58jpdlF21tISzcGBxmH6eHIHJ7Gdyl1BSTeWc*e5LLO6JwoA*lquR5NCgFAZTlUrdTVXJNr1S4cQAssmI2QzQmnQw9F/nb_invite.png" width="16"></a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/settings/editProfileInfo"><img src="http://api.ning.com:80/files/F9CXodZonLEtbcyTdP1TyY6xmsw37eTy4Bh5WHYpdOQS7GrETVqwzGFYcFHW*y3WWCMV3I3GzQr3YgirS*cbX8QHJEmdu1IX/nb_settings.png" width="16"></a></li>';
x$('#xn_bar #xn_bar_menu #xn_bar_menu_tabs').prepend(NingBarLinks);
};
</script>

<!-- End NingBar Navigation Links -->

[Joe Paisley]

Hello!  Recently I've been experimenting with adding links to my ningbar.  As it stands, the links I added to pages are showing up all wild when a user is not signed in.  Is there a way to hide these links to non-members? And also in the navigation tabs?  Is there a way to center the tabs?

I've tested the website on several screen resolutions, and it's okay sometimes, but not other times.  Is there a better way to code it so that it can be more suiting to all resolutions?

Another related question, am I totally out of space if i wanted to add follow buttons to the ningbar as well?

Thanks so much!

www.thepedalcollective.com

[Illya]

Happy holidays Jen, just a question... How do I remove just the inbox icon from the Ning bar so that the Facebook message preview in the Ning bar that Elson created shows there instead of the regular inbox, I still want the alerts, friends, settings, invite Esc to show.

[irfan khan]

thanks jen...I tried this code on www.virtualians.pk    its working

[Mary Jane Peterson]

Hi Jen

Thank you so much, hope you don't mind but I have use the 3rd code, if you would like you can come and have a look www.b-yond.co it looks great thank you

[Kos]

Finally got around to adding this with only Inbox and Settings [we don't need/use alerts, invite or friends].   Actually shocked myself I could remove those codes and I didn't screw it up.  *LOL*  Thank you ALLLLL for this collaboration.   Happy New Year

[Imran Baloch]

Great work and very useful for 

http://www.vulearners.com/