Current status of the Ning Platform is always available on the Ning Status Blog.

Forum

This tip was inspired by Jacobs post on Creators about having the notifications bar added to members profile pages so here is a way to do that. Below is the code and also a couple of images to demo it. As it's a profile page I cannot add a link for you to see as they will not show up.

All the panels for the messages work exactly the same as if they where in the Ning bar and it all lays out nicely for mobiles to.

First we need a little custom code to move them, this code you add to your site&pages custom code end of page section.

<script>
//Add friend, email member user links to profile page
x$(document).ready(function(){
x$('.ningbar-userLinks.linkbar').appendTo('.profileCoverArea-frame');
});
</script>

Next we need a little CSS, I have added two options for this. One is just standard CSS without changing any of the links looks and the second is if you would like to make the icons and the red notification count a bit bigger.

Choose either one of the code block and add it to your design studio custom css section, just copy the code NOT the Option One Option Two text.

Option One

.profileCoverArea-frame .linkbar .ningbar-panel{ z-index:99999!important }

Option Two

.profileCoverArea-frame .linkbar .ningbar-panel{ z-index:99999!important }
.profileCoverArea-frame .ningbar-link .icon {
    font-size: 26px;
    height: 26px;
}
.profileCoverArea-frame .ningbar-countNotification {
font: normal bold 12px/12px sans-serif;
top: -7px;
right: -8px;
}

Demo Images

Placement Of Them

And here is the icons made bigger

UPDATED SECTION

This section of code is to replace the css above if you want all of your options in a line to the left of the page. In the demo images I just have the like button enabled but if you have all the social links enabled they will all line up still.

So here is all the css for this options ( don't forget to install the CUSTOM code above and then add this css )

@media only screen and (min-width:481px) and (max-width:645px){
.profileCoverArea-frame .ningbar-panel {
    left: 50%;
    margin-left: -21px;
}
.profileCoverArea-frame .ningbar-panel::before, .profileCoverArea-frame .ningbar-panel::after {
    left: 14px;
}}
@media only screen and (min-width:645px) and (max-width:775px){
.profileCoverArea-frame .ningbar-panel {
    right: 50%;
    margin-right: -21px;
}
.profileCoverArea-frame .ningbar-panel::before, .profileCoverArea-frame .ningbar-panel::after {
    right: 14px;
}}
@media only screen and (min-width:775px){
.profileCoverArea-frame .ningbar-panel {
    left: 50%;
    margin-left: -21px;
}
.profileCoverArea-frame .ningbar-panel::before, .profileCoverArea-frame .ningbar-panel::after {
    left: 14px;
}}

@media only screen and (min-width:481px){
.profileCoverArea-frame .linkbar .ningbar-panel{ z-index:99999!important }
.profileCoverArea-frame .ningbar-link .icon {
    font-size: 26px;
    height: 26px;
}
.profileCoverArea-frame .ningbar-countNotification {
font: normal bold 12px/12px sans-serif;
top: -7px;
right: -8px;
}
.profileCoverArea-frame .ningbar-userLinks.linkbar{ float:left; margin-left:10px; margin-top:20px }
.profileCoverArea-frame .banner-footer, .profileCoverArea-frame .banner-actionsGroup{ float:left }
.profileCoverArea-frame .banner-footer, .profileCoverArea-frame .banner-actions{ float:left }
.profileCoverArea-frame .banner-socialActions{ margin-right:10px;   float:left }
.profileCoverArea-frame .optionsDropdown-list {right:auto }

}

Demo Images

You need to be a member of Ning Creators Network to add comments!

Join Ning Creators Network

Email me when people reply –

Replies

  • You are the best Bizz!

  • Ning just hire him already.  lol

  • Wow! fantastic Tip ! Thanks  John 

    • Your welcome, glad you find it useful :-)

      • Hi  John! What about to Move to the Left the Profile options like this:

        • Yes it can be done but more code will need to be added so the panels that show up for email and friends list line up correctly when opened. The reason I left it on the right was just so everything would work the same as in the Ning bar without adjusting the panels.

          I will work out some code so they can be placed on the left and adjust the panels.

          John :-)

          • Thanks for Reply John !

            Sound Greats!  I like the idea because if all profiles are private by default  there is a message below the profile picture  (left side )  it says: this profile is share only by friends.  the option to add friend is at the other site ( right side) so, members must to move their eyes to discover this friend request botton. but if all the profile options are on the same side .i think it will be more visual and easy to  Interact with those options.

            • Just updated the tip so you can have these to the left now all inline.

              • WOWWW!!!!! YOU ARE THE BEST John . Thank you so Much!  

                • Your most welcome, glad to be of help :-)

This reply was deleted.

Search the Creators Network

Latest Activity

Kos replied to Michele Mickey Crawford-Carnegie's discussion Migrate blogs, members, pictures from Ning to WordPress
"Michele You need to upload Buddypress to your WP site - and there you will find the 'upload' option…"
14 minutes ago
Matt replied to Michele Mickey Crawford-Carnegie's discussion Migrate blogs, members, pictures from Ning to WordPress
"This might be a option if you have the funds.
https://www.buddyboss.com/ning-to-buddypress/"
44 minutes ago
Erika Hoff Holmgren replied to Erika Hoff Holmgren's discussion How do I edit my opening posts on the forum? Sticky options?
"OH, I finally realized what my problem was. I had managed to hide the buttons under my menu =u=; It…"
1 hour ago
Bizz ( John ) replied to Bizz ( John )'s discussion Video Issues Again For Embed Videos Showing Blank Box
"Well I do believe this has been fixed now. Just added a video via an embed from youtube and the ima…"
15 hours ago
Bizz ( John ) replied to Bizz ( John )'s discussion Videos Playing In Activity Feed, check it out on my site ( Updated: 25-04-17 )
"Thanks, will share it once I get a few little options finished like adding it's own comment contain…"
16 hours ago
⚡JFarrow⌁ replied to Bizz ( John )'s discussion Videos Playing In Activity Feed, check it out on my site ( Updated: 25-04-17 )
"Wow that is killer Jon!  How did you do that?"
17 hours ago
Bizz ( John ) replied to Erika Hoff Holmgren's discussion How do I edit my opening posts on the forum? Sticky options?
"To edit a post you first open it then in the top right before the +icon you will see a pencil icon,…"
19 hours ago
Ning via Facebook

#NINGread Blogging is an extremely inspiring activity, especially when you can make a buck with…

Kos replied to Thisisbully's discussion Chat is available on 3.0
"Well thank goodness for updating the servers b/c it worked perfectly all day.  I'm sooo happy!  Tha…"
yesterday
Kyryl_Ning_Support replied to Thisisbully's discussion Chat is available on 3.0
"Hi there,
Only the server part has been updated by the admins so the performance could have increas…"
yesterday
Solveig Parekh Bock is now a member of Ning Creators Network
yesterday
Steve C replied to Anastasiia_NING support's discussion Ning 2Q 2017 plan!
"Thank you! That's how it was from 2009 to recently, but the system must have reset it and I forgot…"
yesterday
Bizz ( John ) replied to Bizz ( John )'s discussion Video Issues Again For Embed Videos Showing Blank Box
"When is this going to be fixed? Been a while now as it's not just the image not displaying ( by the…"
yesterday
Kos replied to Thisisbully's discussion Chat is available on 3.0
"Kryrl I could be speaking too soon (hope not!) but it appears someone did something b/c Chat is now…"
yesterday
Kyryl_Ning_Support replied to Anastasiia_NING support's discussion Ning 2Q 2017 plan!
"Hi Steve,
We are sorry to hear that you are experiencing such an issue but you can control the orde…"
Monday
Kyryl_Ning_Support replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"Hi there,
We are sorry for the inconveniences, and yes you are right this issue isn't connected wit…"
Monday
Oleksii is now a member of Ning Creators Network
Monday
Steve C replied to Anastasiia_NING support's discussion Ning 2Q 2017 plan!
"I'm having a HUGE problem with blog comments on my Ning 2 site. It used to be that blog comments po…"
Monday
Ning via Facebook

#inspirewithNING #success Explore new horizons with NING and NING Creators Network! Find your…

Bizz ( John ) replied to Bizz ( John )'s discussion Videos Playing In Activity Feed, check it out on my site ( Updated: 25-04-17 )
"Would be interested to hear if anyone has tried this and encountered any problems. Works fine for m…"
Friday
More…