Change Avatar Size In Latest Version

Nick012

Hi, I've just set up a forum and I want to change the avatar size to 64x64. I searched the forum but I only found answers that are for older versions of the software (they refer to CSS entries I don't have). Could anyone walk me through what I need to do to change the size? Thanks in advance,

sirlancelot

All you need to change is the CSS Selector ending in .CommentIcon. It's in themes/vanilla/styles/default/vanilla.css.

Avatars in Vanilla are displayed using the background-image: url(); CSS. Check out the source of this discussion to see what I mean.

Nick012

#Comments .CommentHeader li div.CommentIcon { padding:9px 0px 9px 30px; margin-right: 6px; background-repeat:no-repeat; display: inline; background: #E0F4F5 center center no-repeat; } Thanks for your help but what do I do to this exactly? Can I just add height: 64px; and width: 64px; to it?

sirlancelot

Since .CommentIcon is set to display: inline you can't specify a height and width for it. If you look at the CSS, you'll see some clever use of padding to create a box that is 32x32 px (why those numbers are like that I don't know).

I fiddled around with the padding a bit to achieve a 64x64 px box. However, it does have some side-effects as you can see in the picture below.

Change the padding to match this:
#Comments .CommentHeader li .CommentIcon { padding: 19px 0 30px 60px; }

I'd go further but from the looks of the background-color, I don't think you're using the default Vanilla theme, so I don't think I can be of much help. Your next step would be to push the .CommentBody down (or right) so it's not overlapping the larger avatar.