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

Hey this worked ...I think   http://OregonShout.ning.com  Trying to get Hitech like you folks....

Hi Everyone,

I have updated this tip to include Version #3. Elson added his awesome code to provide the notifications to the Inbox Links.

Thanks Elson!

Jen

hi .. I have tried pasting the version two, but not grab me, not if I'm doing something wrong.
sorry if something is misspelled, is that I wrote in Spanish and translated into English.

Two Questions:

1. Did you add ALL code to Custom Code Box? My Network/Tools/Custom Code

2. Did you use the Text file, instead of copy/paste from the tip?

Best,

Jen

yes, I've tried several times and nothing. I follow all the steps.

Part of the problem, you have the NingBar hidden. Go to your Advanced CSS and find this code:

#xn_bar{display: none !important;}

remove this code.

Hope that helps,

Jen

Thanks, now if I work, thanks, thanks!

Fantastic, and you are welcome!

  

Once again, JenSocial rocks!

Easy and worked like a charm.

However, I need to change the background color of the top bar, and can't find it in the Custom Code OR in the Appearance or Appearance/Advanced code = 

Where / How do I change the background color of my bar?

[http://englishworldwide.ning.com

Thanks all,

Holly

Glad to hear it!

Try the following code in Advanced CSS, changing the hex color value to your colors:

/* NingBar Background Color */

#xn_bar {

   background-color:#FFFFFF!important;

}

/* NingBar Links Color */
#xn_bar a  {

   color:#CC0000;

}

Jen to the rescue again.  Thanks.  Playing with brighter colors now.

Smiles,

Holly

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips