Change Avatar Size in Posts

[Ryan Roos]

This requires editing your Style Sheet, not a Template. Themes > Advanced Styles & CSS > Style Sheet Tab

First you will need to edit this line.
On or around line 1150
.mini-profile .avatar { max-width: 150px; max-height: 150px; overflow-x: hidden; overflow-y: hidden; margin: auto; border-width: 0px; vertical-align: middle; }


Edit the 150px to your new max size. 7 lines below that you will find this.

.avatar_size_default img, .avatar_size_default default { max-height: 150px; max-width: 150px; }


Again edit the 150px to your new max size.

IF you are making the avatar's bigger then continue, otherwise you're finished. If you are increasing their size then you will then need to find this line. On or around line 1138

.mini-profile { color: @mini_text_color; font: @mini_text_font; background: @mini_background; border: @mini_border; .rounded-corners(@mini_border_radius); text-align: @mini_text_align; overflow: hidden; padding: 13px 10px; width: 150px; }

Edit the 150px to your new size. Keep track of the increase though.

For example if it's now 250px you've increased it 100px.

Go find this line. On or around line 976

.posts .post .content { padding-left: 10px; vertical-align: top; }

You're going to add the increase to the padding left. So the 10px above turns into 110px.

Next find this on or around line 1036

.messages .item .content { padding-left: 10px;...

Such as before you're going to add the increase to the padding left. So the 10px above turns into 110px.

Save changes. You're done.

Things to keep in mind.
ProBoards Avatars will still be 150x150.
Avatars Uploaded will still be re-sized to 150px.
You can link larger avatars hosted elsewhere.

[TornadoGTS]

I upsized my max size to 200x200, but after doing this, how can I make it so avatars are centered in that space? All my avatars are hanging left and it looks weird since I also have all my mini profile stuff centered.

[Texas]

Did you follow that last step? If you did then make sure the padding left is 60px.

[tunescool]

i had this

.mini-profile .avatar { max-width: 150px; max-height: 300px; overflow-x: hidden; overflow-y: hidden; margin: auto; border-width: 0px; vertical-align: middle; }

.avatar_size_default img, .avatar_size_default default { max-height: 300px; max-width: 150px; }

i was getting this, the page wouldnt load all the way. thread pages and thread pages only



now im back to this, im still getting the image above, sometimes an avatar, the pages dont load, thread pages and thread pages only


.mini-profile { color: @mini_text_color; font: @mini_text_font; background: @mini_background; border: @mini_border; .rounded-corners(@mini_border_radius); text-align: @mini_text_align; overflow: hidden; padding: 13px 10px; width: 150px; }
.mini-profile .personal-text { color: @mini_personal_text_color; display: block; font: @mini_personal_text_font; text-align: @mini_personal_text_align; }
.mini-profile .info { color: @mini_info_text_color; font: @mini_info_text_font; text-align: @mini_info_text_align; font-size: 75%; }
.even .mini-profile { color: @mini_even_text_color; background: @mini_even_background; }
.even .mini-profile .personal-text { color: @mini_even_personal_text_color; }
.even .mini-profile .info { color: @mini_even_info_text_color; }
div.mini-profile a { color: @mini_links_color; font: @mini_links_font; text-decoration: @mini_links_decoration; }
.warning-bar { background: @mini_warning_background; border: @mini_warning_border; .rounded-corners(@mini_warning_border_radius); padding-bottom: 2px; height: 14px; line-height: 100%; text-align: @mini_warning_text_align; min-width: 40px !important; }
.warning-bar .number { color: @mini_warning_number_text_color; font: @mini_warning_number_text_font; text-decoration: @mini_warning_number_text_decoration; background-color: @mini_warning_number_background_color; .rounded-corners(@mini_warning_number_border_radius); opacity: 0.5; font-size: 0.6em; margin-right: 1px; padding: 0px 2px 1px 2px; }
.warning-low { background-color: @mini_warning_low_background_color; background-position: center; }
.warning-medium { background-color: @mini_warning_medium_background_color; background-position: center; }
.warning-high { background-color: @mini_warning_high_background_color; background-position: center; }
.mini-profile .avatar { max-width: 150px; max-height: 150px; overflow-x: hidden; overflow-y: hidden; margin: auto; border-width: 0px; vertical-align: middle; }
.avatar-wrapper { display: table-cell; text-align: @mini_avatar_align; vertical-align: middle; }
.avatar-wrapper > div, #avatar-preview.flash_present.image_present > div { position: relative; }
.avatar-wrapper div object, .flash-avatar object, #avatar-preview.flash_present.image_present div object, .avatar-wrapper > div > img { position: absolute; top: 0; left: 0; }
.avatar-wrapper * { vertical-align: middle; }
.avatar_size_default, .avatar_size_default embed, .avatar_size_default object, .avatar_size_default > div, .avatar-wrapper.avatar_size_default > div > div { height: 150px; width: 150px; }

[aRMY83]

This is nice Ryan and I'm surprised that ProBoards changed the default size to 150 x 150 pixels. Of all the avatars I've seen and or downloaded, are 100 x 100 pixels.

[merleh]

This is great, but I have one problem: Proboards doesn't rescale avatars correctly that are too big. Instead it just shows a 100 x 100 detail of the original pic.

[Iroh]

I'm having the same issue as Merleh. I'm trying to update my forums, and after editing the CSS, all avatars remained in a 100 x 100 thumbnail form (as opposed to a 160 x 400 bookmark style). Does anyone know why that may be? Any help is greatly appreciated!

[Lillith]

I can't make this work either. My board is here: tortall6th.proboards.com/

I did it three times now, and I'm fairly sure I followed the steps, changed the right numbers, but still no..

Personally I don't like the square-avatars. I'm much more of a rectangular girl, so I tried changing my custom avatar size to 140x300 px.

Can someone tell me why it won't work. Thanks!

[the_Purpleshew]

Hello all I have a board I am on where the admin would like to have the background of the mini profile extend or repeat for the entire length of the post. How would I do that?

[{ P e r e g r i n e }]

I was able to change the padding size, but not the avatar size itself.    

[carlygvse3]

My avatar keeps getting smaller everytime I try to make it bigger..

[xavac]

I'm attempting to bump the maximum avatar size up to 450x600. I tried using the code above, but it turned into a mess. I really wish there was a way to have flexibility like v4. For example, when a member with a larger avatar posted in a thread the miniprofile would get wider and would be skinnier if only members with say avatars size 200x200 posted. I realize this sounds kind of excessive for avatar size, but we converted from HQ Forums about three or so years ago, and I'm really trying to give my members the same options that they used to have.

As a side note, I have to say at first I wasn't a huge fan of v5, but seeing the flexibility with skins now, I'm a believer. Our Proboards site has never looked so much like home. <3

[Baller95]

Is there a way to make members avatars automatically smaller than the mods and admins?

[Baller95]

Is the default avatar size 150x150? How can I make members & guest avatars smaller but keep the staff avatar the same?

Any help will be appreciated

[Sevanni Black]

Okay i am having an issue with the css

Something changed and i can't get the size i want to show up in the mini profile beside the post, or in the profile page. everything is small. Also, when i did get it bigger, the right side of the avatar border was gone, and everything went back to small. So my co admin exported and imported, but duh stupid me forgot about the import comes back the way it is and not reset. I don't want her to have to do the skin all over.

So is there a default css I could enter?

THEME: The Breakfast Club
FORUM: crimsonkisshigh.proboards.com/