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 JenSocial on January 23, 2012 at 8:42pm

Not sure what all code you're using. This might work. Change the color of course:

#xg_themebody .feed-story-status:hover {background-color:#e6e6e6!important;}

Permalink Reply by Fire-Tech on January 23, 2012 at 10:03pm

I'm using the same code here:
/* 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;}

..and then the exact code for New Design Studio - Blue Push Pin:
(didn't realize it was a VIP code on previous post here, so I deleted it)

The additional code works great! Thanks a bunch! :)

Permalink Reply by JenSocial on January 23, 2012 at 10:16pm

Cool, thanks for the update. I didn't realize you had posted the VIP code either. ;-) Thanks!

Best,

Jen

Permalink Reply by Fire-Tech on April 10, 2012 at 10:14am

Here's one I use for the Mini-Leaderboard module if anyone needs it.

/* Hovered Background for Main Page Leaderboard */
.xg_widget_main .mini-leaderboard-module tr: hover {background:url('YOUR IMAGE PATH HERE') repeat scroll 0 0 transparent!important;}

Permalink Reply by JenSocial on April 11, 2012 at 9:24pm

Thanks Fire-Tech!

Permalink Reply by Fire-Tech on June 26, 2012 at 9:21pm

I have moved my leaderboard to the center column and have changed the code to

.xg_widget_main .leaderboard tr :hover

It works, but doesn't cover the entire line. If you hover over the content, it will show the background under the content. If you hover over the ranking number, it will show the background under the ranking number, but not both.

Any ideas?

Permalink Reply by JenSocial on August 12, 2012 at 5:40pm

Fire-Tech,

Somehow, I missed this completely. Is this still the case?

Best,

Jen

Permalink Reply by Fire-Tech on August 13, 2012 at 8:56pm

Yeah. Not too big of a deal. When I firebug it, I only see the tr & tr.alt ....might not be possible.

Permalink Reply by JenSocial on August 14, 2012 at 12:10am

It's tough for me to find a network with leaderboard on home page in this location. Can you send signin via pm, and I'll take a look.

Permalink Reply by Fire-Tech on August 17, 2012 at 11:32pm

I finally figured it out! Basically, if you use the tr or tr.alt, it still separates the td.lb-rank and the td.lb-content (in chrome) and they hover separately from each other.

However, if you add a border to it (tr or tr.alt), it will cover them both (rank & content). I happened to want a border, so it worked out for me. If anyone needs the same thing, but without the border, just set the border to 0.

I was determined to figure this one out so I wouldn't have to bug ya, but thanks! :)

Permalink Reply by JenSocial on August 20, 2012 at 5:05pm

Good deal, thanks for the update! Good investigative coding! =)

Permalink Reply by Fire-Tech on August 20, 2012 at 8:40pm

Thanks :)