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

[Michael Thompson]

Thanks Jen. One last thing, can I adjust the code somewhere to move everything over to the left just a little more so they are no quite so close to my name?

[Shannon Klipstein]

I love this tip!  Thank you! 

I had to have someone help me test it to make sure it notified me when i have a new message (Ex: Inbox (1) )  and it didn't show up right ... i had to refresh like twice.  i don't know if that is normal.  

Also this person who tested it for me... also said it was hard to find at first because she was used to the other spot. But suggested that if i made my ningbar the same color as the rest of the site or made the font for the links bigger.... that it would be easier to find and see.  

Can I do that?  or How do I do that?  

Thanks so much! 

[Jen]

Hi Shannon,

Try changing this style:

.ningbarlink a { text-decoration:underline!important; }

TO - - Adjust the font size below.

.ningbarlink a { text-decoration:underline!important; font-size:12px; }

Hope that helps,

Jen

[ismail shah]

Hi jEn

due to the above code my Search Bar is not visible to me.\Any Suggestion

[Jen]

Ismail,

I need to see your site, and I might can help.

Best Regards,

Jen

[ismail shah]

http://vudesk.com

[Shannon Klipstein]

worked wonderfully!  Any idea how to change the color of the ningbar? thank you!

[Emmanuel Ace]

#xn_bar {

background-color: #000000 !important;

}

[Jen]

Thanks, Ace.

[ismail shah]

ace i need quick assistance. My Searc Box is Hided. how i can align it infront on top bar

http://vudesk.com

[Jen]

Ismail,

This code is hiding your search bar:

#xn_bar {

    left: 0;

    position: fixed !important;

    top: 0;

    z-index: 9999;

Best Regards,

Jen

[ismail shah]

jen this code given to me by

http://creators.ning.com/xn/detail/4244211%3ATopic%3A1036042

RON

i want to float my bar including serach box what should be added?