How to change the shape of the profile photo?

Hi! How can I change the shape of the profile photo just like here in the forum (circle one)?



And how can I remove those extra description and spaces that are marked X?

Is your forum's version #punBB ?

SLGray wrote:Is your forum's version #punBB ?

my forum's version is phbb3

CSS Stylesheet:

Code:

.postprofile dt img {
  border-radius: 100px;
}

SLGray wrote:CSS Stylesheet:

Code:

.postprofile dt img {
  border-radius: 100px;
}

Thanks! How about the spacing? to remove the extra spaces?
and still having this problem when I implemented your code above, some of the photos are ok, but some does not.

*bump* *bump* *bump*

Hello @Skia Drum,

for the circled avatars try this code:

Code:

.postprofile dt img {
  border-radius: 100%;
  width: 150px;
  height: 150px
}

As for the spaces, which ones are you referring to? The ones under the rank or you want to add some more space around the avatar?

Luffy wrote:Hello @Skia Drum,

for the circled avatars try this code:

Code:

.postprofile dt img {
  border-radius: 100%;
  width: 150px;
  height: 150px
}

As for the spaces, which ones are you referring to? The ones under the rank or you want to add some more space around the avatar?

I want to remove the excess space that is marked red.

@shakib al hasan You mean every avatar on your forum? phpbb3 right?

why is the other question is answered while on my thread -_-

@shakib al hasan The mods are gonna get on you cuz you didn't make a new topic but here's the CSS for it

Code:

#fa_popup_content > div.post .postprofile dt img, #main-content > div.post .postprofile dt img, #userAvatar img, .avatar img, .lastpost-avatar img, .mod-login-avatar dt > img, td.avatar-mini img { border-radius: 100px; }

@Skia Drum try adding this in your CSS:

Code:

.postprofile dd:nth-child(4) { margin-top: -25px }

This fixed my problem,

Luffy wrote:Hello @Skia Drum,

for the circled avatars try this code:

Code:

.postprofile dt img {
  border-radius: 100%;
  width: 150px;
  height: 150px
}

As for the spaces, which ones are you referring to? The ones under the rank or you want to add some more space around the avatar?

However, I'm still having issues with the profile button, it turned out like this also.

Hello @Skia Drum,

Try changing this:

Code: .postprofile dt img

into this :

Code: .postprofile dl dt img

I believe that should fix your problem.

Luffy wrote:Hello @Skia Drum,

Try changing this:

Code: .postprofile dt img

into this :

Code: .postprofile dl dt img

I believe that should fix your problem.

that fixed it but the profile image turned square again

Add the CSS to the top of the stylesheet.

SLGray wrote:Add the CSS to the top of the stylesheet.

what css code?

add this one to the top of your CSS files

Code:

.postprofile dt img {  border-radius: 100%;  width: 150px;  height: 150px}

APE wrote:add this one to the top of your CSS files

Code:

.postprofile dt img {  border-radius: 100%;  width: 150px;  height: 150px}

the profile button turned out circle again