JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Scroll Bar for Groups/ Scrollable Groups / Scroll Through Groups On Home Page / Profile Pages

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

Add this CSS to
Manage/Appearance/Advanced CSS, at bottom.

/* Scroll Bar for Groups */
.xg_widget_main .module_groups .xg_module_body {height: 300px;overflow :
auto;position:relative;}

To scroll through Groups on Member Profiles too, just remove the main page class, like
this:
.module_groups .xg_module_body {height: 300px;overflow :
auto;position:relative;}

0 members favorited this

Replies to This Discussion

Permalink Reply by Magic Happens on April 2, 2010 at 7:13pm

Thank you. And as always a helpful thing. l should call you smarty pants. lol

Permalink Reply by JenSocial on April 3, 2010 at 2:49pm

Fantasyland and Robert,
Two of my favorite people! Always so thoughtful, both of you.
Happy Easter,
Jen

Permalink Reply by Peace in Practice on June 7, 2010 at 9:13am

Hi Jen, I think this is a great idea. I tried the code in my Advanced CSS box but I get wonky results which is maybe due to the large size of the graphics I use to represent my groups??

I would like to ask "can I set the width as well as the height to accommodate 5 groups in a row?"

I see the choices of numbers of Groups to display on the home page, are 1, 2, 3, 5, 10, 15, and 20. When I choose 5 and have your code for the scroll bar inserted, I see 4 groups are in a line / row but the 5th is out of place on the next line / row by itself, then the pattern continues. I hope you know what I mean.

My site is at the link below. I plan to have lots of groups, so the scrolling bar for people to look through the Groups on the Home page would be super!

Peace in Practice

Thanks for all of your terrific tips. I have been greatly using them, and have enjoyed doing so, to make my site the best it can be for its purpose - hopefully.

Namaste

Star Wise

Permalink Reply by JenSocial on June 7, 2010 at 2:05pm

I had to add one special line for yours, due to the padding and overall layout.

.xg_widget_main .module_groups .xg_module_body {height: 300px;overflow :auto;position:relative;}
.xg_2col .module_groups .clist li {border:0 none;margin:0 2px 8px!important;}

Happy to hear you like the site and the tips.
Hope this helps,
Jen

Permalink Reply by Peace in Practice on June 7, 2010 at 6:13pm

Wow that worked a treat. thanx Jen. You're the best, and I am pleased to feel .. special!

Have a great day,

Star

Permalink Reply by Peace in Practice on June 8, 2010 at 6:30am

Me again, I have to say that someone let me know that on their monitor .. the Groups were not aligned in a row, so my sister suggested I add a width dimension. I changed the code slightly to the following, and the groups are now in a row on that monitor in question, being a 15 inch monitor with resolution of 1280 x 1024.

.xg_widget_main .module_groups .xg_module_body {width: 500px;height: 315px;overflow :auto;position:relative;}

.xg_2col .module_groups .clist li {border:0 none;margin:0 2px 8px!important;}

Permalink Reply by GapArt on January 2, 2011 at 8:55pm