Profile Page Design

Hi. How can i make the profile page of my forum look like that?

[You must be registered and logged in to see this image.]


i saw it from here: [You must be registered and logged in to see this link.]

Press the " Welcome ( your username ) " button, press edit profile, press the Avatar bar, then put in your picture! I realized that today!  

Kazami900 wrote:Press the " Welcome ( your username ) " button, press edit profile, press the Avatar bar, then put in your picture! I realized that today!  

He meant the style of the forum

Do you wish to just have the design? The profile would be set to something like:

Code:

float: left;

Though I can't give you a fast feedback atm as I am currently hospitalized -_-.

you would have to be admin to change that setting.
i believe that's an alternative design to the website user profile layout.

Not really, it's just simple CSS. For the Ajax loading, that would require Javascript, but I doubt he needs it.

pizzaboi, float left to which class? ( .class{ )

Thanks for correcting me, admins. I'm not a good teacher!   

Bump

Anyone? :/

Try this in your CSS:

Code:

#profile-advanced-layout {
float: right;
margin-left: -350px;
margin-right: 0;
}
#profile-advanced-right {
margin-top: 42px;
}
#profile-advanced-right {
float: left;
width: 302px;
}
#profile-advanced-avatar .module, #profile-advanced-points .module, #profile-advanced-reputation .module, #profile-advanced-right .module {
margin-top: -2px!important;
}
.main .main-head, #profile-advanced-details .main-head {
background: linear-gradient(to top, #2C5687 0%, #4271A6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
color: #204066 !important
padding: 5px 10px !important
font-weight: 300;
border-radius: 0 !important
border-radius: 4px 4px 0 0;
box-shadow: none !important;
border-width: 1px 1px 0 1px;
border-color: #316897;
border-style: solid;
margin-top: 15px;
}
#tabs ul li a {
background: url(http://i58.servimg.com/u/f58/17/06/15/51/qt4g6110.png) repeat-x scroll 0 0 rgba(0,0,0,0);
border: 1px solid #DDD;
border-radius: 3px;
box-shadow: 0 1px 0 #FFF inset, 0 1px 0 rgba(0,0,0,0.3);
color: #555;
float: left;
font-size: 11px;
font-weight: 700;
height: 20px;
line-height: 21px;
margin-top: 5px;
padding: 2px 6px;
text-decoration: none;
text-shadow: 0 1px #FFF;
}

Good one, but i need some more things.
1. How can i change the "add friend" , "remove friend" from profile with images?
i tried these codes but didnt work...

Code:

#profile-advanced-add a[href*="friend="]{background-image:url(//i56.servimg.com/u/f56/18/59/49/93/16-add10.png)}
#profile-advanced-add a[href*="foe="]{background-image:url(//i56.servimg.com/u/f56/18/59/49/93/16-rem10.png);right:30px}

2. I want the profile informations to be in 2 columns. (like the link of my first post)

Can you print screen the one you have right now? (Using hospital laptop at the moment so please include your forum link too)

2 columns made. now i only need one thing. (see my previous post)

Sorry give me a few days, hospital isn't being so kind on the time I have at the moment .