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

6150823860?profile=RESIZE_710x

 

Here is a tip to move the members about information that is shown at the top of the members profile page in the cover photo area. As we know this is quite small and very often unreadable depending on the cover photo the member uploads. You will see the members information is now under the cover photo and is displayed by clicking on the small hamburger menu or thier name ( the click area stretches across the top width so if you move your mouse at the top you will see it will also open it ). The members info will display, if there is no info added or members have chosen not to show it then only their name will display.

You can see and example of that here showing only the name: https://jr-images.ning.com/members/HarleyQuinn

Here you can see it working with Info: https://jr-images.ning.com/members/bizz

I made the code so that if you want to you can change certain parts colours to make it stand out or to design around your own site. By default the colours without adding any of this extra code will display as what ever you have on your site for the text and link colours.

The code is provided and also at the bottom some additional code so that you can edit the colours for each section if you so wish. The code shows the css selector needed to change each part that you want and also an image showing which part the code has changed.

First we need to add a little custom code to our custom code section by going to Social Site Builder > Custom Code > End Of Page Section and copy in the following code:

<script>
x$(document).ready(function(){
x$('<div class="profile Bio-wrapperOuter"><div class="profile Bio-wrapper"><div class="profile Bio-container"><div class="profile Bio-header"><h1 class="Bio-member"></h1></div><a class="Bio-more-switch" alt="More" title="Show / Hide Bio">&#9776</a><div class="Bio-info"></div></div></div></div>').prependTo('.profileCoverArea-frame .banner-footer');
x$('.profileCoverArea-bio h2').appendTo('.profile .Bio-member');
x$('.profileCoverArea-bio p').appendTo('.profile .Bio-info');
x$('.Bio-info p:has(span)').closest('.Bio-info p').addClass('p-Content');
x$('.Bio-info p:has(span)').closest('.Bio-container').addClass('hasSpan');
});
</script>

<script>
// Show Hide Bio Info
x$(document).ready(function(){
x$('.Bio-info').hide();
x$('a.Bio-more-switch').toggle(
function(){
x$('.Bio-info').slideDown(300);
x$(this).html("&#9660");
},
function(){
x$('.Bio-info').slideUp(300);
x$(this).html("&#9776");
});
});
</script>

 

Next we add our basic css which goes in your Design Studio > Custom CSS

a.Bio-more-switch {
display:none;
}
.Bio-header{
padding: 0px 0px 15px 0px;
}

/* Center Name On Mobiles */
@media only screen and (max-width:480px){
.Bio-header{text-align: center;}
.Bio-container.hasSpan .Bio-header{padding: 0px 0px 15px 0px!important;}
}

.Bio-container.hasSpan .Bio-header{
padding: 0px 0px 15px 35px;
}

/*Member Name*/
.Bio-member h2{
font-size: 1.6rem;
}

/* Show Bio Info Switch */
.Bio-container.hasSpan a.Bio-more-switch{
display:block;
padding: 4px 8px;
font-size: 1.2rem;
text-decoration: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.Bio-container.hasSpan a.Bio-more-switch:hover, .Bio-container.hasSpan a.Bio-more-switch:focus{
cursor: pointer;
text-decoration: none!important;
outline: none!important;
}

/*Main Bio Wrapper*/
.Bio-wrapperOuter{
padding-bottom: 1.5rem;
position: relative;
}
.Bio-container{
position:relative;
}
.Bio-info{
padding: 0px 10px 0px 10px;
}

.Bio-info p span{ display: grid; grid-gap:5px;}
.Bio-info p span::before{ display:none }

 

 

 

Here are some demo images showing this in desktop and mobile view

6150279276?profile=RESIZE_710x

6150285664?profile=RESIZE_710x6150291082?profile=RESIZE_584x6150295301?profile=RESIZE_584x

 

That's it all done. Now if you want to make some changes to the colours of the sections of it you can do so by adding all or parts of this css code. You just need to edit out the colours that you want then add the css to your custom css under what you added already.

Here is a key to show the colours that the css below has changed, so by reading through the css you should be able to see which affects what.

6150229477?profile=RESIZE_710xAnd here is the optional css codes

/** OPTIONAL COLOUR SETTINGS **/


.Bio-info{
background-color: green;
padding: 10px!important;
border-radius: 10px;
color: white;
}
.Bio-info p.p-Content{
background-color: white;
color: black;
padding:10px;
}

.Bio-info p.p-Content span{
background-color: red;
color: white;
padding:10px;
border: solid 1px grey;
}

.Bio-info p.p-Content:nth-child(1) > span:nth-child(1){
background-color: Black;
}

 /* Question Answer Section */
.Bio-info .profileCoverArea-questionAndAnswer.p-Content span{
background-color: salmon;
}

.Bio-info .profileCoverArea-questionAndAnswer.p-Content{
background-color: orange;
color: black;
padding:20px 5px;
}

.Bio-info .profileCoverArea-questionAndAnswer.p-Content .profileCoverArea-question{
background-color: blue;
color: white;
}

 

 

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

Join Ning Creators Social Network

Votes: 1
Email me when people reply –

Replies

  • 👍

  • thank you Bizz, that is great.

    Any way the social network buttons can also be hidden/showed on the same way of profile info?

    • Yes can be done the same way, I will put another post up for that in case others may want to use it as well. Will post it a bit later.

      6179389853?profile=RESIZE_930xAnd Mobile Views

      6179406097?profile=RESIZE_584x6179411459?profile=RESIZE_584x

    • Added this now in new post on creators

      • thank you, works great!

        perhaps, when visiting other profiles, the banner-actions profileCoverArea-actions buttons "follow" and "connect" could be hidden as well?

        • Thanks Antonio, I have actually done that on my site , I added a post about it here Hide all options

          I didn't add the code as not sure if anyone would want that but will add it into the post. I could add some extra code so if you are on your own profile it shows but hides if on someone else's.

          6286612674?profile=RESIZE_930x

          Moving All The Profile Options Into The Cover Drop Down
          Ok not added any code here but if interested in this version let me know and will add it. Basically as you have seen in the forum I added various tip…
This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels