Scroll Bar for Leaderboard Home Page / Scrollable Leaderboard / Scroll Through Leaderboard

This CSS tweak will add a vertical scroll bar to your Leaderboard module on the home page. If you only have 4 listings selected, the bar may not show up with 300 height. You can adjust the height to suit your preference.

Add this CSS to My Network/Settings/Appearance/Advanced CSS, at bottom.

Advanced CSS:

/** Scroll Bar for Leaderboard **/
.xg_widget_main .mini-leaderboard-module .xg_module_body {
height: 300px;overflow : auto;position:relative;
}

 

Alternative Advanced CSS:

This CSS selector seems to change if you move leaderboard to wide column. But, I'm not certain what constitutes the class change to .detailed-leaderboard-module, from .mini-leaderboard-module. Bottom line: Try the following if code above doesn't work.

.xg_widget_main .detailed-leaderboard-module .xg_module_body {
height: 300px;overflow : auto;position:relative;
}

Tags: leader board, leader board scroll, leaderboard scroll, scroll bar for leaderboard, scroll leader board, scroll leaderboard, scrollable leaderboard

Views: 271

Replies to This Discussion

ty, Jen... youre the best ever.

Jen,

the code not work when leaderboadr is in middle coloum.

Thank jen

Thanks for this information. I updated the tip.

Alternative Advanced CSS:

This CSS selector seems to change if you move leaderboard to wide column. But, I'm not certain what constitutes the class change to .detailed-leaderboard-module, from .mini-leaderboard-module. Bottom line: Try the following if code above doesn't work.

 

.xg_widget_main .detailed-leaderboard-module .xg_module_body {
height: 300px;overflow : auto;position:relative;
}

In your case, if this code doesn't work at bottom of CSS, move to top. This means you have an error at bottom. When I tested on your site, I had to add to top of your CSS.

Best,
Jen

Thank Jen,

Now this code that you gave work on my site

Great!

RSS

Blog Posts

A Picture May Be Worth 1000 Members

Posted by Laura Occhipinti on September 20, 2014 at 7:51pm 0 Comments

Take pictures at EVERY event that you host for your group.  Do not…

Continue

Members

© 2014   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips