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

Views: 1584

Attachments:

Replies to This Discussion

Iris,

Can you explain more, not sure what you mean.

Best,

Jen

Iris,

That is custom code and not code I would want to write or offer as a tip. Have you asked the owner of the site where you found it?

Best,

Jen

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 */}




If you find the margin a bit to annoying because it moves off the curser when hovered, change the entire line:  margin:40px!important; padding:0,40px;   

to this:

margin:10px 20px 10px 20px;


Hi Chloe!

I don't mind at all, it's a public tip. Very nice, thank you for sharing!

Since my version is quite old, if you want to add as a tip under Ning Tips & Tricks Forum, that'd be great too. =)

Have a nice rest of day,

Jen

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

Hi Holly,

Glad you liked the tip! Give this a try for the Event Listings on home page:

/* Event Listing Hover */
.xg_widget_main .module_events ul.clist li:hover {

   background:url('http://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg_alt.png') repeat scroll 0 0 transparent;

}

Best,

Jen

Works like a charm!

Thank you, Jen.

As always, appreciate the prompt, perfect assist,

Holly

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips