Replies to This Discussion

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

Iris,

Can you explain more, not sure what you mean.

Best,

Jen

Permalink Reply by JenSocial on August 12, 2012 at 6:27pm

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

Permalink Reply by Chloe Alison Prince on September 9, 2012 at 4:14am

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

Permalink Reply by Chloe Alison Prince on September 9, 2012 at 4:48am

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;

Permalink Reply by JenSocial on September 9, 2012 at 11:33am

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

Permalink Reply by 7H on April 17, 2013 at 6:08pm

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

Permalink Reply by JenSocial on April 18, 2013 at 1:17am

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

Permalink Reply by 7H on April 18, 2013 at 8:38pm

Works like a charm!

Thank you, Jen.

As always, appreciate the prompt, perfect assist,

Holly

• ‹ Previous
• 1
• 2
• 3
• Next ›
• Page