JenSocial: Social Web Directory and Ning Tips

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

Scroll Bar for Latest Activity on Home Page / Profile Pages

Scrollable Latest Activity / Scroll Through Latest Activity On Home Page / Profile Pages

I'm not too much into the scrolling comments walls, and such. But this particular little tweak, I like a lot. It will add a vertical scroll bar to your Latest Activity module on the home page. If you only have 4 postings selected, the bar may not show up with 500 height. You can adjust the height to suit your preference.

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

/* Scroll Bar for Latest Activity */
.xg_widget_main .xg_module_activity .xg_module_body {height: 500px;overflow : auto;position:relative;}

To scroll your Latest Activity on Member Profiles too, just remove the main page class, like this:
.xg_module_activity .xg_module_body {height: 500px;overflow : auto;position:relative;}

0 members favorited this

Replies to This Discussion

Permalink Reply by Magic Happens on March 3, 2010 at 12:12pm

Thank you. l think l may try this out.

Permalink Reply by JenSocial on March 3, 2010 at 12:16pm

This tip is here somewhere, but under a different title and hard to find. I decided to add again, and simplify the title.
Hope you enjoy,
Jen

Permalink Reply by Help Moms Stop The Murders on March 3, 2010 at 12:38pm

Thank you Jen

Permalink Reply by JenSocial on March 3, 2010 at 1:54pm

My pleasure.
;-)

Permalink Reply by Scribblerati on March 3, 2010 at 4:58pm

Love this idea but it didn't work for me. Followed instructions perfectly. Copied and pasted the code into the CSS stylesheet on advanced appearances page. No change when I refreshed page... :(

Permalink Reply by JenSocial on March 3, 2010 at 6:52pm

Just got back to desk, and a meeting for the next hour. Give me your link, and I'll see what's going on.

Permalink Reply by Scribblerati on March 3, 2010 at 7:03pm

Oh, thanks, Jen!!!

http://liakeyes.ning.com/

Permalink Reply by JenSocial on March 3, 2010 at 7:38pm

Yes I see that it's not working on your site. Let me ask this question. Are you displaying the maximum # of listings? If you are, and I think that's the case, if you drop back to 10, this may work. The idea is to save space.

Let me know.
Best,
Jen

Permalink Reply by Scribblerati on March 3, 2010 at 7:57pm

Alas, that didn't solve the problem. But thanks for trying!

Lia

Permalink Reply by JenSocial on March 3, 2010 at 8:01pm

Now, I'm really puzzled. If you could leave the CSS, and the limit on how many are being displayed - - I want to play around with this code a little more.

Permalink Reply by Scribblerati on March 3, 2010 at 8:06pm

I tried applying the code to change text/background color and that didn't work either, so I don't think it's your code that's at fault. I suspect there's some kind of block on my making changes to the CSS... is that possible?

I'm displaying eight activity updates, and reduced the number of 'features' on the main page by one, too. Here's the entire CSS:

#xg_masthead { height: 230px; min-height: 114px; background-color: transparent; }

#xg_sitename {display: none; }

#xg, .xg_headerbg {
background-color: transparent;
background-image: url(http://i773.photobucket.com/albums/yy17/liakeyes/scribgearsbanner-3...);
background-position: top center;
background-repeat: no repeat;

/* Scroll Bar for Latest Activity */
.xg_module_activity .xg_module_body {height: 500px;overflow : auto;position:relative;}

.xg_widget_main .xg_module_activity .xg_module_body {
background-color:#D1EEFC;
background-image:none;
border-left:1px solid #E3F3FE;
border-right:1px solid #E3F3FE;
border-top:1px solid #E3F3FE;
color:#0099FF; }

I'm using the "Pure Light" template.

Permalink Reply by JenSocial on March 3, 2010 at 8:21pm

Okay, found the culprit - - I think. You have an error in a block of code that effects everything below it.

Locate this code in your Advanced CSS:
#xg, .xg_headerbg {
background-color: transparent;
background-image: url(http://i773.photobucket.com/albums/yy17/liakeyes/scribgearsbanner-3...);
background-position: top center;
background-repeat: no repeat; }

Add the ending right bracket, like the one in bold, above.

Let me know,
Jen
:-)