Team Showcase rounded photo

Ask the Community Customization
1

Our Team Showcase images aren’t displaying rounded in production like they are in the Elfsight preview. You can see the light gray circle that Elfsight has denoted as where it should be though.

I’m looking to compare two options:

  1. How to force a rounded photo
  2. How to use a square photo instead (so that the gray circle doesn’t show up)

Team showcase page

Thanks!

4

Hello @SOPFC!

You can place this code into the Custom CSS field of your widget’s settings if you’d like to round the pictures:

.eapp-team-showcase-member-card-list-photoContainer {
  border-radius: 50% !important;
}

And if you’d like to remove the grey circle and use square pictures instead, you can try this:

.eapp-team-showcase-member-card-list-photoContainer::after {
  border: none;
}

Let me know if this helps!

5

Hmm, neither solution seems to work on my end.

Right now I have the rounded pictures CSS in place. Do you know why it might not be working?

7

I see that the Custom CSS was not saved in your widget so I went ahead and placed it there for you. The images should now be rounded on your website. Let me know if everything looks good now!

Screenshot 2023-01-25 at 12-44-20 Apps Service
Screenshot 2023-01-25 at 12-44-20 Apps Service585×649 15.9 KB
Screenshot 2023-01-25 at 12-45-53 Apps Service
Screenshot 2023-01-25 at 12-45-53 Apps Service600×664 12.4 KB

8

Amazing, it works!

Could you provide custom CSS to achieve the same rounded effect for the Logo Showcase widget?

9

The code below should achieve that!

.eapp-logo-showcase-logo-inner {
  border-radius: 50%;
  overflow: hidden;
}
10

Not sure if I’m doing something wrong again, but I’ve added that Custom CSS to the widget at Elfsight Apps and I’m not seeing it in production…

11

There might be a conflict with the styles on your website. Could you give me the link to the page where the widget is installed?

12

Yes, here it is, thanks.

13

There was indeed a conflict, so I adjusted the custom CSS in your widget, and it should all look good now on your website!