How to increase avatars size on posts without making them blurred


(Daniela) #1

This guide is wiki, feel free to modify and improve it!

1. Increase size and reposition the avatar

To increase the avatar size from 45px (default) to max 120px add the code above in your customize > themes > Desktop > CSS tab
(I mean, do you really need avatars bigger than 120px? :exploding_head:)
In the example above I increased the avatar’s size to 90px and repositioned it

/*Increase avatars*/

.topic-avatar {
  width: 90px;
  .avatar {
    width: 90px;
    height: 90px;
  }
}

/*Avatars in the embedded replies will remain the default size, 
increase or decrease the size according to your needs*/

.embedded-posts .topic-avatar {
  width: 45px;
  img.avatar {
    width: 45px;
    height: 45px;
  }
}

But if you use the flair for the primary groups they will be too small now

2. (Optional) Increase size and reposition flairs

Let’s increase the flair a little. By default it is 14px, I double the size to 28px.
Depending on the size of the avatars you have chosen, you will have to increase or decrease the size of the flair accordingly.

/*Increase the flair size*/

.topic-avatar .avatar-flair {
  font-size: 28px;
  width: 30px;
  height: 30px;
}

/*Leave the default size on the embedded posts,
increase or decrease the size according to your needs*/

.embedded-posts.bottom .topic-avatar .avatar-flair {
  font-size: 14px;
  width: 20px;
  height: 20px;
}

3. No more blurred avatar.

Add this script under Desktop > Head tab. Remember to change the size (‘90’) with the size you have chosen

<script>
Discourse._registerPluginCode('0.8', function (api) {
  api.changeWidgetSetting('post-avatar', 'size', '90');
});
</script>

Increase avatar of Latest.
CSS help please- resizing avatar in posts from 45 to 120
#3

has this script been broken in Discourse 2 Beta 10? The 90px avatars look blurred (the one on the left).
39%20PM