Badge Inside group-avatar-flair

I’m trying to place a second image (a badge to mark the group) to the right of the group’s avatar-flair class, sort of like so, where the second image is not the avatar-flair, but a different image.

I’m sure it can be done, but just hoping someone can get me started on how I’d do it since the existing group-avatar-flair seems to be a background image. I guess I have to add some CSS that finds one of the elements and adds some html, or can it be done with all just CSS attributes?

Any guidance to get me started would be very much appreciated!

1 Like

You can try something like this:

.group-avatar-flair .avatar-flair-GROUP_NAME:after {
  content: "";
  display: inline-block;
  background: url(file.jpg); // <--- set the url of the image you want to use
  background-size: 40px;
  width: 40px;
  height: 40px;
  margin-left: 0.5em;
}

Change GROUP_NAME above to the name of the group you’re targeting. Change spaces in the group name to underscores.

Here’s an example with .avatar-flair-theme_authors:after

We have a guide that covers this method in detail if you’d like to learn more

5 Likes

This almost worked; a slight change (background-image):

.group-avatar-flair .avatar-flair-Agape:after {
  content: "";
  display: inline-block;
  background-size: 40px;
  width: 40px;
  height: 40px;
  background-image: url(https://gomomentum.org/assets/img/teams/team_standards_badge_red.png); // <--- set the url of the image you want to use
  margin-left: 4em;
}

But does not move the text over:

Thanks, @Johani!

1 Like

My bad, the background shorthand overrides the background-size property so that was caused by the order of the properties. I must have unintentionally switched the order when I typed the answer above, but I fixed it now.

This is working OK when I tested it

.group-avatar-flair .avatar-flair-theme_authors:after {
  content: "";
  display: inline-block;
  background: url(https://gomomentum.org/assets/img/teams/team_standards_badge_red.png);
  background-size: 40px;
  width: 40px;
  height: 40px;
  margin-left: 1em;
}

Can you share a link to the site where you’re having the problem?

3 Likes

So interesting. I wonder what it is …

.group-avatar-flair .avatar-flair-DaVinci:after {
  content: "";
  display: inline-block;
  background: url(https://gomomentum.org/assets/img/teams/team_standards_badge_red.png); // <--- set the url of the image you want to use
  background-size: 40px;
  width: 40px;
  height: 40px;
  margin-left: 4em;
}

![image|492x250](upload://qkrXMi9h0bqHf2XJfix8qA3NNHC.jpeg)
1 Like

It’s most likely some other part of your CSS that’s causing this. It’s almost impossible to tell what it is without being able to see the problem in my browser.

1 Like