Ning Network Tips - Archived Tips
This Group contains archived Ning Tips. To add a new tip, please go here: Add Ning Tips & Tricks
To view new Ning Tips go here: Ning Tips & Tricks Forum.
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
This comment was deleted
Chloe Alison Prince
Jen, I hope you don't mind, but I took your code and jazzed it up with a bit of code to make the blogs and forum posts animate and stand out as a user scrolls over them. There is a delay of .5s so its not annoying as you scroll through them, but once hovered over, the post is animated to the center, and a border is put around the post to make it look singled out from the rest - take a look at the screen capture. Its a sweet little effect!!
You can see it and try it out on the front of my network - www.PINKessence.com
As you can see, my Blog I am hovering over is now highlighted and stands out - if the user removes the curser, it returns to position.
Here is the code I use to do it:
/* Blog Hover */
.xg_widget_main .module_blog .blogpost:hover
{background:url(http://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg...) repeat scroll 0 0 transparent!important;
margin:40px!important; padding:0,40px;
border-radius:10px;
border-color: #663366;
border-style:solid;
border-width:3px;
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
transition-delay: .5s;
-moz-transition-delay: .5s; /* Firefox 4 */
-webkit-transition-delay: .5s; /* Safari and Chrome */
-o-transition-delay: .5s; /* Opera */}
/* Forum Hover */
.xg_widget_main .module_forum div.vcard:hover {background:url(http://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg...) repeat scroll 0 0 transparent;
margin:40px!important; padding:0,40px;
border-radius:10px;
border-color: #663366;
border-style:solid;
border-width:3px;
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
transition-delay: .5s;
-moz-transition-delay: .5s; /* Firefox 4 */
-webkit-transition-delay: .5s; /* Safari and Chrome */
-o-transition-delay: .5s; /* Opera */}
Sep 9, 2012
English WorldWide
Hello Jen,
This is another of your tips we've used and liked.
But, as usual, I have a question.
Is it possible to have/add this same effect to the event calendar listings on our home page, too?
http://lewwwp.com
Thanks for any help you might be able to give us,
Holly
Apr 17