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

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;}

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

Cool, thanks for the update. I didn't realize you had posted the VIP code either. ;-) Thanks!

=)

Best,

Jen

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;}

Thanks Fire-Tech!

=)

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?

Fire-Tech,

Somehow, I missed this completely. Is this still the case?

Best,

Jen

Yeah. Not too big of a deal. When I firebug it, I only see the tr & tr.alt ....might not be possible.

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.

=)

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

Good deal, thanks for the update! Good investigative coding! =)

Thanks :)

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips