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

Views: 590

Replies to This Discussion

Nice hack. Thanks for sharing Jen. I Like it!
Sure! Glad you like it.
Best,
Jen
It looks very nice - thanks Jen!
Devon,
Glad you like it!
Best,
Jen
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;}


Thanks Jen. :-)
Good look , thanks Jen...!!!

Edith,
My pleasure. It looks very nice!
Best,
Jen
Like it! Is there a way to provide a different shadow color? Maybe a mild pink or turquoise since I have added a picture to my backgrounds?
Change all instance colors of this code:
-moz-box-shadow: 1px 1px 5px #999;
Change the #999 to your color.
Best,
Jen

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips