Make Your Image Avatars Stand Out On Home Page

[Jen]

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.

See it in action on JenSocial home page.

/*** 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;
}


Enjoy!
Jen

[solo]

thanks for this tip..jen

[Jen]

Sure, glad you like it.
:-)

[irgeorgepecore]

PROFILE PHOTO Extra tweaks: (Adv.CSS) Change the desired color according to yours...

.photo{
border:2px solid #F3F781;
}

[Jen]

@Eric S. Cool. ;-)

[Jen]

@Eric S. Cool. ;-)

[Eric Velouria]

Thanks Jen!

[Jen]

@Eric V, My pleasure. Hope it works well for you.

[Jen]

Hi Diane,

For anyone reading this: Add to Custom CSS via My Network/Settings/Appearance/Advanced, and probably best to add to bottom of your CSS.

I didn't provide the code specifically for the members module. If you only want to apply to members module, use the Forum Code Block above, and change all instances of .module_forum TO .module_members

Note: Members is the most likely module where this will not work well. Sorry.

Best,
Jen

[Jen]

Hi Diane,

For anyone reading this: Add to Custom CSS via My Network/Settings/Appearance/Advanced, and probably best to add to bottom of your CSS.

I didn't provide the code specifically for the members module. If you only want to apply to members module, use the Forum Code Block above, and change all instances of .module_forum TO .module_members

Note: Members is the most likely module where this will not work well. Sorry.

Best,
Jen

[Jen]

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

Best Regards,
Jen

[Jen]

LOL!

[Jen]

LOL!

[Spyro]

RESPECT ... you're awesome!