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!

I hope you all enjoy this tip!

Jen