Could we have a thin outline border around the avatar pictures?


(Tommai78101) #1

There are some avatars that are white in general that some users prefer, and yes it’s an actual 64x64 white avatar. And then there are some who are 1x1 avatars that I know it’s due to an old, but resolved issue.

May I request for a think outline border for the avatars?


(Sam Saffron) #2

With UX topics its best if you post mockups.

As a Discourse forum admin you have complete control over your site’s CSS so, yes you can do so on forums you run.


(Tarak'ha) #3
img.avatar {
    border: 1px solid #000000;
}

Put that into the HTML/CSS customizations section. (And to everyone else: if I’m incorrect in my guess here for the selector, please correct me.)

EDIT: @DeanMarkTaylor’s post below is a more robust answer to plug into your theme’s current color scheme.


(Dean Taylor) #4

Be aware this has impact on sizes of other elements in the site.

One example is the topic list:

Note how they have slipped onto multiple rows.

The following CSS will resolve this one issue and use a color matching your theme colors as the surround:

@import "common/foundation/variables";

img.avatar {
  border: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
}
.topic-list .posters {
  width: 155px;
  min-width: 155px;
}

Will look like so:


(Tommai78101) #5

I prefer this one, because it looks nicer. Thank you!