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

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="http://storage.ning.com/topology/rest/1.0/file/get/138172248?profile=original">Inbox</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/message/listAlerts"><img alt="Alerts" src="http://storage.ning.com/topology/rest/1.0/file/get/138172359?profile=original">Alerts</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/friend/list?my=1"><img alt="Friends"src="http://storage.ning.com/topology/rest/1.0/file/get/138172317?profile=original" width="16">Friends</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/main/invitation/new"><img src="http://storage.ning.com/topology/rest/1.0/file/get/138172294?profile=original" width="16">Invite</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/settings/editProfileInfo"><img src="http://storage.ning.com/topology/rest/1.0/file/get/138172376?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="http://storage.ning.com/topology/rest/1.0/file/get/138172248?profile=original">Inbox</a></li>' + '<span class="lsep">|</span>'
+ '<li id="nalert" class="ningbarlink"><a href="/profiles/message/listAlerts"><img alt="Alerts" src="http://storage.ning.com/topology/rest/1.0/file/get/138172359?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="http://storage.ning.com/topology/rest/1.0/file/get/138172317?profile=original" width="16">Friends</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/main/invitation/new"><img src="http://storage.ning.com/topology/rest/1.0/file/get/138172294?profile=original" width="16">Invite</a></li>' + '<span class="lsep">|</span>'
+ '<li class="ningbarlink"><a href="/profiles/settings/editProfileInfo"><img src="http://storage.ning.com/topology/rest/1.0/file/get/138172376?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.

 

For more exciting tips like this one, and much more - - join Jen's VIP Club Today! We'd love to have you in our special private club.

VIP Ning Club:
Jen’s always cooking up new & exciting Ning Tips!

Discover the best Ning Support you’ll find anywhere! Just ask our VIP Members! ;-)

Testimonials

A special thanks to Elson for adding the code for notifications!


I hope you all enjoy this tip!

Jen

Views: 2531

Replies to This Discussion

You're welcome Aurelien. 

I really like this tip but its just to much custom code for me. I hate that little bounce the site makes when it loads. Maybe Ning we'll see it and implement something like it one year LOL

I could just be tired, but I'm having a rough time getting the right code to hide the member account info on the main page only.

This will remove it from all pages (not a good idea if you already removed the sign out from the Ning Bar btw :)

/* Hide member profile module on main page */
div#xg_module_account.xg_module {
display: none !important;
}

Thanks Jen :)

True. =) Give this a try:

.xg_widget_main div#xg_module_account.xg_module {
display: none !important;
}

Fire-Tech, anytime you want home page only, add the class: .xg_widget_main

Best Regards,

Jen

Oh man....would you believe that I had it, but forgot the last .xg_module. "Missed it by that much".

Sleep deprivation = stupid mistakes.

Thanks my dear :)

That's easy to miss. ;-)

thank you  for the great tip. 

will you please help me, i put the code into  advance css but i only see it  when im using design studio 

Hi Isangi,

Although the tip code contains some CSS, it's wrapped in a style tag. Add all code to your Custom Code Box via: My Network/Tools/Custom Code.

Best Regards,

Jen

How can this work on 3.0 tried and did not LOL I miss this

Hi Shadow,

Sorry, this code was written for 2.0. It would take a good deal of work to get it ready for 3.0.

Best,

Jen

Thanks 

Blessings to you

Had to use this again for a 2.0 site.  So glad it's still here.  Thank you once again!

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips