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 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 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! =)



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.
