JenSocial: Social Web Directory and Ning Tips

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

Theme CSS tweaks "Scroll through latest activity"

This code will allow you to have a scrollable "latest activity" module, so you can display more activities, and take up less space doing so.

xg_module, .xg_module_activity {
background: url();
background-repeat: no-repeat;
background-position: center 0px;
width: 185;
height: 300px;
overflow : auto;
position:relative;
margin : 3px;
text-align : center;
font-size : 14px;
font-family : arial;
border:1px solid #000000;
}

Just adjust height and width to suit your needs.

0 members favorited this

Replies to This Discussion

Permalink Reply by Magic Happens on June 28, 2009 at 1:37pm

l am not computer smart, so can you tell me where does this go, on our "My Page Advance settings, or on the "main Page" advance settings? Plus where in the setting do it go. Above all settings or middle or end. And by the way, Thank You.

Permalink Reply by Rainbow Construction on June 28, 2009 at 2:33pm

You can put it in the advanced code, either in main page or on a personal page. I personally prefer to put "tweaks" in the bottom section of the advanced code, after the codes for the scrollbars, just so it is easy to find again if I want to remove it. I have seen it placed in other places, so I guess it will work anywhere. So....pop it in the end, right before the end of the code.

/*----------------------------------------------------------------------
Footer (#xg_foot and descendants)
----------------------------------------------------------------------*/
/* Text Color of Page Bottom (Ning Bar) */
#xg_foot,
#xg_foot a {
color:#000000;
}
/* Bottom Ning Bar */
#xg_foot {
border-left:0px solid transparent;
border-right:0px solid transparent;
width:931px;
}

/* Scrollbar Colors...Will not show colors on Firefox */
html, body {
scrollbar-face-color:#666666;
scrollbar-highlight-color:# 000000;
scrollbar-3dlight-color:#999999;
scrollbar-shadow-color:#333333;
scrollbar-darkshadow-color:#000000;
scrollbar-arrow-color:#333333;
scrollbar-track-color:#999999;
}
xg_module, .xg_module_activity {
background: url();
background-repeat: no-repeat;
background-position: center 0px;
width: 185;
height: 300px;
overflow : auto;
position:relative;
margin : 3px;
text-align : center;
font-size : 14px;
font-family : arial;
border:1px solid #000000;
}
/*---------------------
End Code
----------------------*/

Permalink Reply by GirlRiders on June 30, 2009 at 11:56am

Rainbow - Thank you, that worked great! The text size is really large though, I can probably figure that out.
http://girlriders.ning.com/

Permalink Reply by JenSocial on June 30, 2009 at 2:55pm

Hi GirlRiders,
I just took a glance at the CSS. But, quickly looking, you should be able to change the style value for:
font-size : 14px;
and set the font to the size you want.
Best,
Jen

GirlRiders said:

Rainbow - Thank you, that worked great! The text size is really large though, I can probably figure that out.
http://girlriders.ning.com/

Permalink Reply by GirlRiders on June 30, 2009 at 4:13pm

Thanks Jen, Yep I did find the font size pretty easily. I have been playing with it now to see if I can get rid of the horizontal scroll. I tried changing "width" but no luck.
Any ideas?

Permalink Reply by GirlRiders on June 30, 2009 at 6:40pm

No need to change the width, I just reorganized the whole page anyway. Now....let me go find some more cool stuff to do ;).

Permalink Reply by esvareeDOTcom on July 1, 2009 at 1:19am

You are a Genious RAINBOW!! it worked out fine!! and its kinda cool!

chek it out: http://esvareema14.ning.com/

Permalink Reply by Rainbow Construction on July 2, 2009 at 2:49pm

No problem! GirlRiders, leave your url on my page, and I will have a look.

Permalink Reply by Rainbow Construction on July 3, 2009 at 10:32pm

I looked at the code, and the way the scroll bars looked around the activity module, and I didn't like the way it looked. So, I modified it a little...I made the header separate, so just the body scrolls. I think it looks much nicer and cleaner.

.xg_module_activity .xg_module_body {
background: url();
background-repeat: no-repeat;
background-position: center 0px;
height: 200px;
overflow : auto;
position:relative;
margin : 3px;
text-align : center;
font-size : 12px;
font-family : arial;
border:1px solid #000000;
}

Change height and borders and text size to suit your needs. :)

Permalink Reply by S.T.T. SEEKING THE TRUTH on July 7, 2009 at 12:24pm

Thank You works Great!

Permalink Reply by Quest For Harmony on October 3, 2009 at 1:04pm

Rainbow Connection,
Thank you so much for posting these tips and help. I am very new to all this code stuff and your help has been a God Send. My site is looking much better as I learn.
Thank you so very much.
Leslie
Quest for Harmony

Permalink Reply by www.blacksexyprofessional.com on November 11, 2009 at 2:43pm