Social Network Directory & Network Creator Help - Ning, Spruz, SocialGO, etc...
~ Best NING TIPS, available online, special support for Ning Network Creators. TESTIMONIALS...
~ Insert Content or Google Ads within blogs/forums, or most anywhere. Ning-ready sliders/accordions, tabbed content, special shadow techniques, CSS tricks, and much more!
~ Only $34.95 for 6 months of support and all VIP Tips - - a great deal!
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…
Permalink Reply by JenSocial on 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 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 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 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;}
|
VIP Ning Club: Discover the best Ning Support you’ll find anywhere! Just ask our VIP Members! ;-) |
 |
© 2012 Created by JenSocial.
Powered by
Home
Subscribe to RSS
Find Us On Facebook
Follow Us On Twitter
Become a Fan.
Follow Us On Twitter.
Subscribe To RSS.
Contact Us.
