Tip: Advanced Featured Member Area for your Home Page

[SweetPotato]

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

[Alex - Rosas † Negras]

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

[Alex - Rosas † Negras]

Grazie mille Eric

[Alex - Rosas † Negras]

Grazie mille Eric

[Alex - Rosas † Negras]

<script type="text/javascript">
x$(document).ready(function() {
x$('.featmembpic').load('/profile/RosasNegras .table_img.dy-avatar-full-width') ;
x$('.featmembbio').load('/profile/RosasNegras .module_about_user');
x$('.featmembpic').after('<div class="featmembview"><a target="_parent" href ="/profile/RosasNegras">Visualizza pagina profilo</a></div>');
});
</script>

[Alex - Rosas † Negras]

.table_img.dy-avatar-full-width

[Alex - Rosas † Negras]

this is how it works

[Alex - Rosas † Negras]

<script type="text/javascript">
x$(document).ready(function() {
x$('.featmembpic').load('/profile/RosasNegras .table_img.dy-avatar-full-width');
x$('.featmembbio').load('/profile/RosasNegras .module_about_user');
x$('.featmembpic').after('<div class="featmembview"><a target="_parent" href="/profile/RosasNegras">View Profile Page</a></div>');
});
</script>