Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support
This is a simple block of CSS that adds an extra flare of elegance to your Home Page Listings for Latest Activity, Blogs, Forums, Notes and Text Boxes when hovered.
The CSS will add an image background when someone hovers a listing or entry. You can replace the image below with your chosen image. You can also change the code from background:url to background-color:#e6e6e6, and change to color of your choice.
Edit attached code to suit your preferences, and add to Advanced CSS via:
My Network/Settings/Appearance
/** Add Hover Background Effect for Latest Activity, Blogs, Forums, Notes and Text Boxes - HOME PAGE **/
/* Forum Hover */
.xg_widget_main .module_forum div.vcard:hover {background:url('http://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg_alt.png') repeat scroll 0 0 transparent;}
/* Latest Activity Hover */
.xg_widget_main .feed-story:hover {background:url('http://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg_alt.png') repeat scroll 0 0!important;}
/* Blog Hover */
.xg_widget_main .module_blog .blogpost:hover {background:url('http://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg_alt.png') repeat scroll 0 0 transparent!important;}
/* Notes Hover */
.xg_widget_main .module_notes .note:hover {background:url('http://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg_alt.png') repeat scroll 0 0 transparent;}
/* Text Boxes Hover */
.xg_widget_main .module_text:hover {background:url('http://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg_alt.png') repeat scroll 0 0 transparent;}
/** End Hover Effect **/
It appears that the Discussion boxes are messing up the image url. Use the attached file for code.
Enjoy!
Jen
Tags: blog, blog hover, forum, forum hover, hover, hover blog, hover effect for forum, hover effect for latest activity, hover forum, hover latest activity, More…hover notes, image background, latest activity, notes hover, special effect
Permalink Reply by MEDARD DU ROCHER - BOPE on October 12, 2010 at 2:55am 
Permalink Reply by Anthony on October 21, 2010 at 3:28pm Hi Jen...This is so neat...
How did you create the image color or where did you find them, i'm using yours currently?
Permalink Reply by JenSocial on October 21, 2010 at 3:35pm I actually grabbed the image URL for the alternating rows from my Leaderboard module on home page. This is built-in. I think it's just fine if you use that image. Or, you can use your own image, or just a color.
Best,
Jen
Permalink Reply by JenSocial on May 31, 2011 at 11:22pm
Permalink Reply by JenSocial on June 2, 2011 at 6:11pm Lex,
Far as I know, in old Editor the icon color is under Settings/Appearance/All Options/Icons
New Design Studio:
Settings/Appearance/Customize/Link & Buttons/Icons
On why the text box hover isn't working, don't know. If you have it installed, I'll take a look when I can.
Best,
Jen

Permalink Reply by Lex Smith on June 3, 2011 at 4:01pm Ok Jen I got the icons fixed. Just take a look and see what I need to fix for the text box hover.

Permalink Reply by Fire-Tech on January 21, 2012 at 3:49pm I just realized that I never did this for my Groups list. Have you had a chance to play with that module yet?
I can get the entire list to work but I'm having a rough go to hover only on individual groups.
Permalink Reply by JenSocial on January 22, 2012 at 12:26pm Not sure why I didn't offer in the tip. I think because the only way to hover highlight entire area is using xg_lightborder, and I wasn't thrilled with that.
Give this a try:
/* Groups Hover */
.xg_widget_main .module_groups .xg_lightborder:hover {
background:url('http://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg_alt.png') repeat scroll 0 0 transparent;
}
Best,
Jen

Permalink Reply by Fire-Tech on January 22, 2012 at 3:06pm Works perfect. I didn't even think about lightborder. I usually try to figure it out myself so I don't have to bug ya....but always learning :)
Thanks so much.

Permalink Reply by Fire-Tech on January 21, 2012 at 5:00pm I also use the Pushpin code for posts in the Latest Activity and it conflicts with the hover (just on member status posts).
Just out of curiosity, do you think we could add the pushpin image with a content code "before"?
Something like this:
/* Pushpin Before Content */
#xg_themebody .feed-story-status:before
{background:url("http://api.ning.com/files/LejAFeVnJ1JrMPFmkhEofR*PqsdAwjoiwIU8Vmjjo7dmRd1VmU4J3*wgNPT1sEPIH0WIKW8VOS2HkKJ5QryiCczj*w5ndinS/Bullhorn5.png?width=40") no-repeat!important; margin-top:10px!important; padding-left:60px;}




Started by JenSocial. Last reply by English WorldWide Apr 18. 35 Replies 0 Favorites
Started by JenSocial. Last reply by Mandy P. Mar 6. 13 Replies 0 Favorites
Started by Fire-Tech. Last reply by Fire-Tech Feb 18. 14 Replies 3 Favorites
© 2013 Created by JenSocial.
Powered by
© Copyright JenSocial.
