Cleaner looking profile box with info inside

[Quinton Tillery]

     I'm not a great with CSS but I managed to get this much so far based off Frosted transparent profile box post

Hope it helps someone....

.profileCoverArea .profileCoverArea-box
{
height:220px;
background:none scroll 0 0 rgba(0, 0, 0, .7);
-moz-border-radius: 15px;
}


.profileCoverArea-box .row div.profileCoverArea-bio
{
-moz-border-radius: 15px;
border-radius: 15px;
font-family:palatino linotype, Times, serif;
color:white;
background: none ;
border-style:double;
border-color:#81dbd6;
border-width:3px;

}
  from: unveiledmoonlight.com

[Allison Leahy]

Nice! Thanks for sharing, Quinton. Could you show us an example of how the profile box looks with fresh code applied?

[Quinton Tillery]

I added a image. Hope it helps!  I really wanted a border around the outside black box as well, but it was doing wierd things like making the inner box large and expanding out of the main profile box.

[Perú Gay]

Hi Allison, you know how to enlarge profile picture with css, the one shown on Ning 3.0 is very small.

Although I think the profile picture should be a picture over the photos added to the social network, therefore the photo must be clickable to view full or actual size. So we can moderate the photo before it is exposed to others. A tip for Ning 3.0

[Gary W Norman]

Yes Quinton, a screen shot would be cool :)  ..and do you know if this works on 2.0?

[Patrick Chappelle]

We don't have a profile box on 2.0, Gary.

[Gary W Norman]

lol Thank you Patrick! I'm flying by the seat of my pants for the most part, so I wasn't sure! Certainly appreciate the response! :)

[Cherry]

Hi, 

Thanks for showing me how to do the border. I have combined that with some other code to come up with this. 

Here is the code that I'm using:

.profileCoverArea .profileCoverArea-box {background:none repeat scroll 0 0 rgba(0, 0, 0, 0.0);}

.profileCoverArea-box .row div.profileCoverArea-bio
{
-moz-border-radius: 15px;
border-radius: 15px;
font-family:palatino linotype, Times, serif;
color:black;
background: none ;
border-style:double;
border-color:#81dbd6;
border-width:3px;

}

[Matthew Aukai Wright]

Hey there. It is not working for me. :( 

[Kyryl_Ning_Support]

Hi Matthew!

Since 2013 the look of the profile page has been changed and the classes mentioned in this tip are no longer used in the code, that it's why it's not working. 

If you have any other questions, please don't hesitate to post them here.

Also, I'll move this discussion to archive since the code doesn't work any longer.

Best regards,

Ning team.