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: 1287

Attachments:

Replies to This Discussion

thank you for your invitation.

Hi Jen...This is so neat...

How did you create the image color or where did you find them, i'm using yours currently?

I actually grabbed the image URL for the alternating rows from my Leaderboard module on home page. This is built-in. I think it's just fine if you use that image. Or, you can use your own image, or just a color.

Best,

Jen

This code has been updated for Forums, and added Notes and Text Box hover effect.

The Hover effect for text box isn't working on my sites. I copied the code exactly.

 

How do you get the icons red as shown Below

Lex,

Far as I know, in old Editor the icon color is under Settings/Appearance/All Options/Icons

New Design Studio:

Settings/Appearance/Customize/Link & Buttons/Icons

 

On why the text box hover isn't working, don't know. If you have it installed, I'll take a look when I can.

 

Best,

Jen

Ok  Jen I got the icons fixed. Just take a look and see what I need to fix for the text box hover.

 

I just realized that I never did this for my Groups list. Have you had a chance to play with that module yet?

I can get the entire list to work but I'm having a rough go to hover only on individual groups. 

Not sure why I didn't offer in the tip. I think because the only way to hover highlight entire area is using xg_lightborder, and I wasn't thrilled with that.

Give this a try:

/* Groups Hover */
.xg_widget_main .module_groups .xg_lightborder:hover {
background:url('http://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg_alt.png') repeat scroll 0 0 transparent;
}

 

Best,

Jen

Works perfect. I didn't even think about lightborder. I usually try to figure it out myself so I don't have to bug ya....but always learning :)

Thanks so much.

I also use the Pushpin code for posts in the Latest Activity and it conflicts with the hover (just on member status posts). 

Just out of curiosity, do you think we could add the pushpin image with a content code "before"?

Something like this:

/* Pushpin Before Content */

#xg_themebody .feed-story-status:before

{background:url("http://api.ning.com/files/LejAFeVnJ1JrMPFmkhEofR*PqsdAwjoiwIU8Vmjjo7dmRd1VmU4J3*wgNPT1sEPIH0WIKW8VOS2HkKJ5QryiCczj*w5ndinS/Bullhorn5.png?width=40") no-repeat!important; margin-top:10px!important; padding-left:60px;}

I don't know about this one. What's the conflict? do you mean the pushpin disappears on hover? If yes, that's what I would expect it to do.

Best,

Jen

RSS

Members

© 2017   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips