Scroll Bar for Leaderboard Home Page

[Jen]

Just had this question asked on JenSocial, and created a tip. Although a really easy tip, thought someone on Creators may find it useful, too.

 

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.

 

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

[Steve Jaques]

Thank you kindly...........again.......

[Jen]

My pleasure!

;-)

[Josh Hall]

Would you give me the css to achieve your module header? Very cool.

Thanks

[Jen]

Or, you can see it in action on JenSocial. I liked it so much, I'm using it.

[Kat]

No wonder it never worked when I tried to modify other scrollbar codes! ".mini-leaderboard-module" was not on my list of guesses. :P Thanks for the tip, I've been dying for this one for ages!

[Jen]

If you ask a legitimate question that I can answer, and have time to answer - - I'm more than happy to share knowledge. But, I won’t do your research for you, if that’s what you mean.

I don't use scrollbar color styling, ever. And I do not know it by memory, like I do a lot of other CSS. If you want to style the scroll bar colors, you will need to research this. My guess is, it may be tough to style an overflow scrollbar. But, I honestly do not know.

Best,
Jen

[Jen]

Would love to hear the result if you figure out the styling.

Best,

Jen

[Agosthina]

Thank you Jen!

[Ramon Batista]

Hi

I put that code at the end and nothing happen :s

Maybe I am doing wrong ?

 

This the codes that was there before and including the new one :

#xg_masthead p#xg_sitename{
    font-size:34px;
    line-height:1.14em;
    font-weight:bold;
    padding:20px 0 0 15px;
}

#xg_masthead p#xg_sitedesc {
    font-size:16px;
    padding:0 0 0 15px;
    height:1.5em;
}

#xg_navigation ul li {
    font-weight:normal;
}   

#xg_navigation ul li span {
    padding:0;
    display: inline;
}

.xg_module_head h2 {
    font-weight:normal;
    font-size:14px;
}

.xg_module_foot {
    border-bottom: 2px solid #C4D2DB;
    border-top: 1px solid #C4D2DB;
}

#xg_navigation ul li a {
    color:#2C6088;
    font-size:1.1em;
    padding:0 0.7em;
}

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

 

[Jen]

One of two things is likely the issue:

1. You have a CSS error above this code.

2. And my guess - - you need to make the height less, so a scrollbar shows up.

 

Best,

Jen

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

[Vera Marques da Cunha Monteiro]

Hi Jen,

my leader board is showing like this....

where and how can I change the code to make disappear the little red icons or to reduce them?

Thks