Tip: Moving Member Info Out Of Cover Area Section To Below It

[Bizz]

 

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

 

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.

And 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;
}

 

 

[This Is bully]

👍

[Anto]

thank you Bizz, that is great.

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

[Bizz]

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.

And Mobile Views

[Bizz]

Added this now in new post on creators

[Anto]

thank you, works great!

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

[Bizz]

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.