JenSocial: Social Web Directory and Ning Tips

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

Ning 3.0 does Facebook Timeline Profile

The CSS is below. This works for the profile I have I am not sure it will work if you have a different them. I am not so much a design person so any suggestions on improvement are welcome.

I love to collaborate so I am making this tip an exclusive JenSocial tip. It is posted on Ning Creators but members there will have to come here for the code.

.profileCoverArea .profileCoverArea-box {
background-color: #eee;
background: none;
margin-top: 100px;
height: 200px;
}

.profileCoverArea .profileCoverArea-box .profileCoverArea-bio {
background-color: #eee;
color: #555;
overflow-y: auto;
margin-top: 20px;
background: none;
float: right;
}

.profileCoverArea-bio.span5 {
padding-top: 110px;
height; 50px ;
}

.row .row-narrower1 {
margin-left: 10px;
}

.profileCoverArea-socialButtons.row.row-narrower1{
width:300px;
float: right;
margin-top: -50px;
}

.profileCoverArea .profileCoverArea-avatarFrame {
margin-top: 70px;
position: relative;
padding: 5px;
width: 92px;
-webkit-box-shadow: 0px 3px 3px #c6c6c6;
-moz-box-shadow: 0px 3px 3px #c6c6c6;
box-shadow: 0px 3px 3px #c6c6c6;
-webkit-box-shadow: 0px 3px 3px #c6c6c6;
-moz-box-shadow: 0px 3px 3px #c6c6c6;
box-shadow: 0px 3px 3px #c6c6c6;
-webkit-box-shadow: 0px 3px 3px #c6c6c6;
-moz-box-shadow: 0px 3px 3px #c6c6c6;
box-shadow: 0px 3px 3px #c6c6c6;
-webkit-box-shadow: 0px 3px 3px #c6c6c6;
-moz-box-shadow: 0px 3px 3px #c6c6c6;
box-shadow: 0px 3px 3px #c6c6c6;
border: 1px solid #c6c6c6;
background-color: #FFF;
}

6 members favorited this

▶ Reply to This

Replies to This Discussion

Permalink Reply by Jonathan Wheeler on July 9, 2013 at 9:32pm

for screen shots, it's better to hold down ctrl, fn, and prt sc at the same time. then paste it over to a paint doc, then save it and upload it as picture, that way you do not have to download your screen shot and it's seen as other do, the reason why your scroll bar is there is because of the person info goes vertically, you can either change the px height or change profile info, hope this helps. ..jonathan

▶ Reply

Permalink Reply by Charles Brickhouse on July 9, 2013 at 9:35pm

ty will try that

▶ Reply

Permalink Reply by Jonathan Wheeler on July 9, 2013 at 9:44pm

you're welcome, i am going to try to become more proactive a bit here but mostly on the creators.ning.com network, great place as well to get advice but jen's tips here are great, have been watching here work for years. she rocks!

▶ Reply

Permalink Reply by Charles Brickhouse on July 10, 2013 at 9:38am

Thank you was wondering how that worked.

▶ Reply

Permalink Reply by Ian Flex Justo on June 3, 2013 at 2:33pm

Can any one help me it doesn't look right on my page

▶ Reply

Permalink Reply by Charles Brickhouse on July 10, 2013 at 9:39am

Here is a screen shot of what I have that bar that is in the middle of the banner seems to be from the original code of the mypage tab in ning 3.0? on your screen shot I see that there is no bar on it but where would you find the profile questions if it isn't seen up top is it just done away?

▶ Reply

Permalink Reply by Charles Brickhouse on July 10, 2013 at 10:58am

this is what I did to kind of bring the scroll bar down some the first set of codes messes with the scroll bar to bring it down or up use the margin-top to move it down the codes are what I used in place of his codes and the second set of codes I messed with the padding on it so that the space it leaves when you move the scroll bar down is replaced with more info from there profile questions.

.profileCoverArea .profileCoverArea-box .profileCoverArea-bio {
background-color: #eee;
color: #555;
overflow-y: auto;
margin-top: 125px;
background: none;
float: right;
}

.profileCoverArea-bio.span5 {
padding-top: 5px;
height; 50px ;
}

play with those codes in design studio and press preview to see the difference it will show you before saving it may have to load a few secs this is the screen shot of how It will look