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

Rosas † Negras replied to Bizz's discussion
Ning: Why does it not show who added music or a tab for My Music ? Essential For Moderation
"here is the reason I chose to upload only I"
10 hours ago
⚡JFarrow⌁ replied to Bizz's discussion
Tip: Resize your Social Channels Video
"awesome... thanks Bizz!"
11 hours ago
Bizz posted a discussion
Either I am totaly missing something but l can't seem to see anywhere that says who added a playlis…
12 hours ago
Bizz replied to Bizz's discussion
Tip: Profile Themes And Code
"Oh not sure if you seen the Game Of Thrones theme but I will be adding a small series of these and…"
14 hours ago
Bizz replied to Bizz's discussion
Tip: Profile Themes And Code
"Thanks, yes this is the first version of this and will be adding more to it so members can also cha…"
14 hours ago
J.Ayvar replied to Bizz's discussion
Tip: Profile Themes And Code
" Wow, I was pending this update and finally see it. Everything that can be done creatively in Ning…"
16 hours ago
Rosas † Negras replied to Bizz's discussion
Tip: Resize your Social Channels Video
"thank you very much my Master"
23 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
Paying for a replay on a video or photo? Ning 3.0?????
"I waited two days ... and today the answer I have to pay ... I told him that I would have a discuss…"
yesterday
Bizz posted a discussion
If you use the css section quite a bit like I do you may find the box a little limited in it's heig…
yesterday
Bizz posted a discussion
Ning have changed the layout for the social channels and so we have a small video in the middle of…
yesterday
Bizz replied to Bizz's discussion
Tip: How I added Music To A Page
"Thanks Charles, no unfortunatly not it just a way to get the music page onto a page
 "
yesterday
Bizz replied to Rosas † Negras's discussion
Paying for a replay on a video or photo? Ning 3.0?????
"The agent has got this wrong as that is what you pay for. Have you got it set that the option to re…"
yesterday
More…

Meanwhile, you can check our social media channels