How to change image behaviour and background color on Team Showcase pop-up

Ask the Community Customization
1

I need help to customize the image settings on the Team Showcase pop-up using CSS. I’m testing out the feasibility for using the Team Showcase to display sponsor logos (because I need to categorize them into groups). It’s working great except for the pop-up image which cuts off due to the default CSS on object-fit: cover; The second issue is that the background color is transparent.

I’d like the popup images to have a white background and have the object-fit to be “contain”. If possible, I’d also like 20px of padding around the logo.

I can make these changes in the browser using the inspect tool but when I past the code into the gadgets custom CSS area it doesn’t work. Here’s the code I’m using…

.jHQOrI {
object-fit: contain;
background-colour: #fff;
padding: 20px;
}

Here’s a direct link to the working gadget… https://b61412fe2d58461c89c250c9764277d0.elf.site

Any help would be much appreciated!

1 Like
3

Hi there, @OrgBliss :waving_hand:

Sure! I’ve passed your request on to the devs and will get back to you once the solution is ready :slightly_smiling_face:

4

Awesome, thanks Max!

1 Like
5

Hi there, @OrgBliss :waving_hand:

Thank you for waiting!

We’ve added this code to the Custom CSS field on the Style tab of your widget’s settings:

.global-styles,
.eapp-team-showcase-popup-item-container img {
  object-fit: contain;
  height: revert;
  transform: translate(-50%, -50%);
  top: 50%;
  box-sizing: border-box;
  padding: 20px;
}

@media(max-width: 480px) {
  .global-styles,
  .eapp-team-showcase-popup-item-container img {
    transform: translateY(-50%);
    top: 50%;
  }
}

.global-styles,
.eapp-team-showcase-popup-item-container .eapp-team-showcase-member-card-photo-photoContainer {
  background: white;
}

Please check it out and let me know if you like the result :slightly_smiling_face:

1 Like
6

You are the best! Works like a charm.

Is it on the roadmap to include filtering/grouping features to the logo showcase? This would be very beneficial for anyone who needs to group and list logos by type (eg Gold, Silver, Bronze sponsors). Also, I think it’s very valuable to include a popup to the logo showcase so that you could show a company bio, website, socials etc.. This could take the Logo Showcase to the next level!

1 Like
7

Glad to know you’re good now!

Unfortunately, this request isn’t on our roadmap yet. However, if this idea gets more votes, we’ll try to consider it in the future.

As soon as any news comes up, we’ll update you in the Wishlist thread :slightly_smiling_face:

8

Sounds great. Just curious, how many votes are typically required to really get on the radar? I’ll encourage all my customers to vote for it, but are we taking hundreds of votes required. I’ll do my best to campaign for this because I feel anyone using the Logo showcase could benefit. Have a great day!

1 Like
9

We don’t have a set number of votes necessary for consideration, but the more votes the request gets, the higher chances for its consideration are :slightly_smiling_face:

1 Like