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

NC for Hire

Hi all

Ever wanted an easy way to feature a top member in a bit more detail than the usual Ning member module allows?

This tip creates a neat profile box on your network homepage by taking the Profile Information (questions answered on Sign Up) and the member's avatar to create something like this:

Click to enlarge

Here's what to do:

1. Go to the Features Layout section of your dashboard and create a text box in your middle column on the homepage.

2. In the text box header insert whatever title you want - i've used 'Featured Member: Bob Smooth".

3. Switch to html mode of the text box and insert this:

<div class="featmembpic"></div>
<div class="featmembbio"></div>

Press save.

4. Now open your Custom Code section and insert this:

<script type="text/javascript">
x$(document).ready(function() {
x$('.featmembpic').load('/profile/sweetpotato .xg_widget_profiles_profile .xg_1col img.photo');
x$('.featmembbio').load('/profile/sweetpotato .module_about_user');
x$('.featmembpic').after('<div class="featmembview"><a target="_parent" href="/profile/sweetpotato">View Profile Page</a></div>');
});
</script>

You will notice that the bolded urls in the script above point to the member that you want to feature. These three need to be changed each time you want a new member featured.

5. Now let's style it with some css. Add this to your advanced CSS (or change to suit your network):

.featmembpic {
    background: #E0E0E0;
    float: right;
    padding: 5px;
    position: relative;
    right: 10px;
    text-align: center;
    top: 30px;
    width: 135px;
    z-index: 20;
}

.featmembpic img.photo{
width:120px;
}
.featmembbio .module_about_user {
    border: medium none;
    float: left;
    width: 325px;
}

.featmembbio .xg_module_body{
background:#f7f7f7;
padding-right:15px;
border:solid 1px #E0E0E0;
}

.featmembbio .module_about_user .xg_module_head, .featmembbio .module_about_user .xg_handle{
display:none;
}

.featmembview a, .featmembview a:hover {
    background: url("https://storage.ning.com/topology/rest/1.0/file/get/11387375?profile=original") repeat-x scroll 0 0 transparent;
    color: #394B0A;
    float: right;
    font-size: 14px;
    font-weight: bold;
    left: 136px;
    padding: 6px;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px #C4EA60;
    top: 185px;
    width: 134px;
    z-index: 30;
}

.featmembview a:hover {
color:#4E660E!important;
}

This tip was tested in the Design Studio using a three column layout. You will notice that the profile information questions and answers appear on the same line. I've not included this css in the tip but you will find it here.

Enjoy.

Sp

More tips here

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

  • This looks great. I'm going to give it a try

  • SweetPotato 

    I'm working on your css to make it all perfect I want to know if I can publish by referring to your javascript
  • Bravo! Well done. 👏👏

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 Steve C's discussion
Ning 2 new member welcome image: Can I remove or replace it?
"Steve C 
here's the discussion"
3 hours ago
Rosas † Negras replied to Steve C's discussion
Ning 2 new member welcome image: Can I remove or replace it?
3 hours ago
Steve C replied to Steve C's discussion
Ning 2 new member welcome image: Can I remove or replace it?
"Thank you!
 "
3 hours ago
Rosas † Negras replied to Steve C's discussion
Ning 2 new member welcome image: Can I remove or replace it?
"you are welcome"
4 hours ago
Rosas † Negras replied to Steve C's discussion
Ning 2 new member welcome image: Can I remove or replace it?
"the discussion is public, when I'm at the computer I look for it for you"
4 hours ago
Steve C replied to Steve C's discussion
Ning 2 new member welcome image: Can I remove or replace it?
"Thanks! Do you know what it's called? I searched around and couldn't find it. Some tips require…"
5 hours ago
Rosas † Negras replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"your problem is the hidden bar, i no longer have a 3.0 and i can't test the codes but if they don't…"
7 hours ago
Rosas † Negras replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"Anam 
put this code if it's a 3.0"
11 hours ago
Rosas † Negras replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
".SP_sign_up{text-align:center;background:#fff;border-radius:3px;-webkit-border-radius:3px;-moz-bord…"
11 hours ago
Anam replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
" This is the content of my Custom CSS box - can any expert see something there that would conflict…"
11 hours ago
Anam replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"Yes, we need light. I see Rosas has got them working but they do not work for me. Must be some CSS…"
11 hours ago
Rosas † Negras replied to Steve C's discussion
Ning 2 new member welcome image: Can I remove or replace it?
"your answer can be found herehttp://jensocial.com/"
13 hours ago
More…

Meanwhile, you can check our social media channels