JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Make Your Image Avatars Stand Out On Home Page

Make the Avatars on your home page stand out. Add a thin frame border around your home page member avatars, and a nice shadow in FF.

This CSS will add a thin border and a little padding around your home page avatar images. It will include the member avatars in blogs, forums, latest activities, members, and for any avatar. It also adds a very subtle color when the avatars are hovered.

/*** Shadow and Hover Effect for Avatars on Home Page ***/
.xg_widget_main .xg_avatar img {    padding: 1px;
    border: solid 1px #ffffff;

}

.xg_widget_main .xg_avatar img {

    border: solid 1px #CCC;

    -moz-box-shadow: 1px 1px 5px #999;

    -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}

.xg_widget_main .xg_avatar img:hover {

    border: solid 1px #e6e6e6; /* Change this color for more distinctive hovered border */

    -moz-box-shadow: 1px 1px 5px #999;

    -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}



.xg_widget_main img.feed-avatar {

    padding: 1px;

    border: solid 1px #ffffff;

}

.xg_widget_main img.feed-avatar {

    border: solid 1px #CCC;

    -moz-box-shadow: 1px 1px 5px #999;

    -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}





.xg_widget_main img.feed-avatar:hover {

    border: solid 1px #e6e6e6; /* Change this color for more distinctive hovered border */

    -moz-box-shadow: 1px 1px 5px #999;

    -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}

/*** End Home Page Avatar Shadow and Hover Effect ***/

IMPORTANT NOTE:
If your member module avatars get cut off, add this code to bottom of the code for this tip - -
.xg_widget_main .module_members .xg_avatar img {width:90%!important;}

ADD TO FORUM MODULE ONLY:
Here's the trick. If adding the effect to all avatars like above messes things up, due to padding, where's there is not enough room; you could add the effects to individual modules. For example, to add to forum module only, you would
use this code:

.xg_widget_main .module_forum .xg_avatar img {    padding: 1px;    border: solid 1px #ffffff;

}

.xg_widget_main .module_forum .xg_avatar img {

    border: solid 1px #CCC;

    -moz-box-shadow: 1px 1px 5px #999;

    -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}

.xg_widget_main .module_forum .xg_avatar img:hover {

    border: solid 1px #e6e6e6; /* Change this color for more distinctive hovered border */

    -moz-box-shadow: 1px 1px 5px #999;

    -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}

ADD THESE EFFECTS TO THE GROUP MODULE: The avatar code for all (top of discussion) will not be applied to the Group Module. Here's the code to accomplish that:

/* Groups Module Avatars*/.xg_widget_main .module_groups img {
    padding: 1px;

    border: solid 1px #ffffff;

}

.xg_widget_main .module_groups img {

    border: solid 1px #CCC;

    -moz-box-shadow: 1px 1px 5px #999;

    -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}

.xg_widget_main .module_groups img:hover {

    border: solid 1px #e6e6e6; /* Change this color for more distinctive hovered border */

    -moz-box-shadow: 1px 1px 5px #999;

    -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}

Not sure why, but the #s on the Home Page Leaderboard bugged me. If it does the same for you, LOL - - here's the code to hide those numbers:

.mini-leaderboard-module td.lb-rank {display:none;}

Enjoy!
Jen

0 members favorited this

Replies to This Discussion

Permalink Reply by Ashary on October 5, 2010 at 12:12am

Nice hack. Thanks for sharing Jen. I Like it!

Permalink Reply by JenSocial on October 5, 2010 at 12:19am

Sure! Glad you like it.
Best,
Jen

Permalink Reply by Devon Zone on October 5, 2010 at 1:06am

It looks very nice - thanks Jen!

Permalink Reply by JenSocial on October 5, 2010 at 9:27am

Devon,
Glad you like it!
Best,
Jen

Permalink Reply by JenSocial on October 5, 2010 at 9:42am

It looks great Devon. I did notice the member module avatar frames were getting cut off, which IMHO is fine because that is a look in and of itself. If you don't like that, I added this to the original tip.
IMPORTANT NOTE:
If your member module avatars get cut off, add this code to bottom of the code for this tip - -
.xg_widget_main .module_members .xg_avatar img {width:90%!important;}

Permalink Reply by Devon Zone on October 5, 2010 at 9:55pm

Thanks Jen. :-)

Permalink Reply by Edith on October 5, 2010 at 1:39am