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: 0
Email me when people reply –

Replies

  • Saw this feature on DeferoLaw and wondered how you did it. I'll try to make it work in one of my side columns.

    Thanks for that tip.

    Regards

    TDB

    • NC for Hire

      Hi Troy,

      I don't thnk you saw it on my site as i don't use it. I don't think it will work in the side columns as the profile information box is probably not compatible.

      SP

      • Hmm...

        Remember seeing something of that nature somewhere though it was in a slide and not any columns. Thanks for clarifying.

    • Can you let me know if you get this working on the side column? Thanks.

  • NC for Hire

    sweet      potato!

  • A-mazing. 

  • NC for Hire

    Beautiful! Genius. Great tip.

  • This reply was deleted.
    • NC for Hire
      Hi Diane,
      I'm afraid I don't. The best I can advise is giving it a go on your test network. I see no reason why it shouldn't, other than maybe the middle column not being quite the same size as the middle on the newer themes. You could sort this by tweaking the CSS.
      SP
  • i tried it but it seems that other featured members also appeared. any ideas on what line of code to add to limit the number of featured members? because previously, i've featured a lot of members or tried to feature them without removing that.. :) 

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

Martin updated their profile
8 hours ago
⚡JFarrow⌁ posted a discussion
For years, I have been trying to figure out the best way to embed my Community into other…
19 hours ago
Rosas † Negras replied to Suzie Nielsen's discussion
Double billing/ Ning landing page builder and more!
"like an enthusiast holds an old car"
20 hours ago
Rosas † Negras replied to Suzie Nielsen's discussion
Double billing/ Ning landing page builder and more!
"how much money do you want for your 2.0?I would like to keep it as Ning's story"
20 hours ago
Suzie Nielsen replied to Rosas † Negras's discussion
Ning Builder-impossible to work on and it doesn't work aspect answer from ning thanks
"Ahhhh.... $250.00 ? why did I have to pay $500.00 -- I already had a tech to do all other set up- I…"
21 hours ago
Suzie Nielsen posted a discussion
Hello Ning, Why am I getting billed for both my 2.0 and the 3.0? I have had no activity on my 2.0…
21 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
Ning Builder-impossible to work on and it doesn't work aspect answer from ning thanks
"⚡JFarrow⌁ right click doesn't work to paste inside"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
Ning Builder-impossible to work on and it doesn't work aspect answer from ning thanks
"thank you my dear friend"
yesterday
⚡JFarrow⌁ replied to Garfield Archivist's discussion
Ning Billing needs major improvements
"What happened buddy?
 "
yesterday
⚡JFarrow⌁ replied to Rosas † Negras's discussion
Ning Builder-impossible to work on and it doesn't work aspect answer from ning thanks
"Do this... open Notepad ++ 
Copy the entire HTML from the page into your notepad txt file..  Make…"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
Ning Builder-impossible to work on and it doesn't work aspect answer from ning thanks
"so i have to stop helping for free :) ... happy for you that you make a lot of money ... good job"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
Ning Builder-impossible to work on and it doesn't work aspect answer from ning thanks
"my problem is not to create .. the problem that it is not even possible to add a link inside"
yesterday
More…

Meanwhile, you can check our social media channels