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

⚡JFarrow⌁ replied to Ana Massien's discussion
Emoji work in module headers and newsfeed
"anywhere except for inside the HTML itself."
53 minutes ago
⚡JFarrow⌁ replied to Ana Massien's discussion
Front end edits
"Most likely not"
55 minutes ago
⚡JFarrow⌁ updated their profile photo
57 minutes ago
Rosas † Negras replied to Ana Massien's discussion
Possibly Ning 2 or Ning 1.5
"Alessandro is me .. thank you very much for the compliment I am the best"
1 hour ago
Ana Massien replied to Ana Massien's discussion
Possibly Ning 2 or Ning 1.5
"Dood we have not even spoke in this thread since June 2020. I don't see why you came to bump it…"
2 hours ago
Ana Massien replied to Ana Massien's discussion
Possibly Ning 2 or Ning 1.5
"My name is Ana, not Ann. Ning's earlier days, before the 2.0. Some the elgg layouts correspond to…"
2 hours ago
Rosas † Negras replied to Ana Massien's discussion
Possibly Ning 2 or Ning 1.5
"De nada"
23 hours ago
Ana Massien posted a discussion
  You can add emoji from a browser extension or emojipedia.com (and copy and paste it) into module…
yesterday
Ana Massien posted a discussion
For mods and admins, will 3.0 ever be able to have the front end edit buttons like ning 2.0…
Monday
Ana Massien updated their profile
Monday
Lea Bouillet updated their profile
Sunday
Rosas † Negras replied to Rosas † Negras's discussion
Style your View all buttons by touch by changing two colors
"Bizz 
these are the points impossible to reach without these codes"
Saturday
More…

Meanwhile, you can check our social media channels