Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Change Avatar Size In Latest Version

edited March 2009 in Vanilla 1.0 Help
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,


  • Options
    edited March 2009
    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.
  • Options
    #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?
  • Options
    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.
Sign In or Register to comment.