JenSocial: Social Web Directory and Ning Tips

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

Add Hover Image Effect to Latest Activity, Blogs, Forums, Notes and Text Boxes

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

1 member favorited this

Attachments:

HoverModules_HomePage.txt, 1 KB

Replies to This Discussion

Permalink Reply by MEDARD DU ROCHER - BOPE on October 12, 2010 at 2:55am

thank you for your invitation.

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

This code has been updated for Forums, and added Notes and Text Box hover effect.

Permalink Reply by Lex Smith on June 2, 2011 at 6:01pm

The Hover effect for text box isn't working on my sites. I copied the code exactly.

How do you get the icons red as shown Below

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

Permalink Reply by JenSocial on January 22, 2012 at 12:32pm

I don't know about this one. What's the conflict? do you mean the pushpin disappears on hover? If yes, that's what I would expect it to do.

Best,

Jen