# Team Showcase
**URL:** https://community.elfsight.com/c/css-codes/team-showcase/179.md
[Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md)
---
## [Set custom font for all elements except popup](https://community.elfsight.com/t/set-custom-font-for-all-elements-except-popup/25179)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 12:52pm UTC](https://community.elfsight.com/t/set-custom-font-for-all-elements-except-popup/25179 "2023-11-10T12:52:35Z")
Although we do provide a list of fonts for you to choose for your widget, you might happen to need a custom code. If that is the case, add the code below to Custom CSS field on your Team Showcase widget’s Style tab: \[c…
---
## [Display long links in full](https://community.elfsight.com/t/display-long-links-in-full/25228)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 6:24pm UTC](https://community.elfsight.com/t/display-long-links-in-full/25228 "2023-11-10T18:24:14Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-member-card-info-component { max-width: 100%; overflow: visible; } .eapp-team-showcase-member-card-info…
---
## [Make images square (2nd layout)](https://community.elfsight.com/t/make-images-square-2nd-layout/25220)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 6:04pm UTC](https://community.elfsight.com/t/make-images-square-2nd-layout/25220 "2023-11-10T18:04:21Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-member-card-cards-photoContainer { padding-top: 100%; }
---
## [Hide All tab](https://community.elfsight.com/t/hide-all-tab/76554)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [October 18, 2024, 11:43am UTC](https://community.elfsight.com/t/hide-all-tab/76554 "2024-10-18T11:43:07Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-tabs-active{ display: none; }
---
## [Align team members to the center](https://community.elfsight.com/t/align-team-members-to-the-center/25187)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 1:46pm UTC](https://community.elfsight.com/t/align-team-members-to-the-center/25187 "2023-11-10T13:46:05Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-grid-component { justify-content: center; } .eapp-team-showcase-group-title { text-align: center; }…
---
## [Remove padding between cards](https://community.elfsight.com/t/remove-padding-between-cards/76551)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [October 18, 2024, 11:39am UTC](https://community.elfsight.com/t/remove-padding-between-cards/76551 "2024-10-18T11:39:33Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-grid-item { padding: 0 !important; }
---
## [Change color of tabs](https://community.elfsight.com/t/change-color-of-tabs/76548)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [October 18, 2024, 11:37am UTC](https://community.elfsight.com/t/change-color-of-tabs/76548 "2024-10-18T11:37:53Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-tabs-tabsCategory { background: #2f80ed; color: #fff; }
---
## [Make images square for List layout (4th layout option)](https://community.elfsight.com/t/make-images-square-for-list-layout-4th-layout-option/25217)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 5:52pm UTC](https://community.elfsight.com/t/make-images-square-for-list-layout-4th-layout-option/25217 "2023-11-10T17:52:42Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-member-card-list-photoContainer{ border-radius: 0 !important; } .eapp-team-showcase-member-card-list-ph…
---
## [Make image corners rounded (2nd and 3rd layouts)](https://community.elfsight.com/t/make-image-corners-rounded-2nd-and-3rd-layouts/76545)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [October 18, 2024, 11:27am UTC](https://community.elfsight.com/t/make-image-corners-rounded-2nd-and-3rd-layouts/76545 "2024-10-18T11:27:42Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-member-card-photo-photo { border-radius: 10px; width: 100%; } .eapp-team-showcase-member-card-gallery-…
---
## [Make images round (2nd and 3rd layouts)](https://community.elfsight.com/t/make-images-round-2nd-and-3rd-layouts/25218)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 5:57pm UTC](https://community.elfsight.com/t/make-images-round-2nd-and-3rd-layouts/25218 "2023-11-10T17:57:58Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-member-card-photo-photoContainer img { height: 100%; transform: translateX(-50%); left: 50%…
---
## [Hide "See Info" button](https://community.elfsight.com/t/hide-see-info-button/76540)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [October 18, 2024, 11:17am UTC](https://community.elfsight.com/t/hide-see-info-button/76540 "2024-10-18T11:17:09Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-member-card-see-more-component { display: none; }
---
## [Display full images in square containers (2nd and 3rd layout)](https://community.elfsight.com/t/display-full-images-in-square-containers-2nd-and-3rd-layout/76538)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [October 18, 2024, 11:15am UTC](https://community.elfsight.com/t/display-full-images-in-square-containers-2nd-and-3rd-layout/76538 "2024-10-18T11:15:18Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-member-card-photo-photoShow { object-fit: contain; }
---
## [Hide images in popup](https://community.elfsight.com/t/hide-images-in-popup/25232)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 6:33pm UTC](https://community.elfsight.com/t/hide-images-in-popup/25232 "2023-11-10T18:33:55Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .global-styles, .eapp-team-showcase-popup-item-photoContainer { display: none; } .global-styles, .eapp-team-showcase-pop…
---
## [Adjust font weight of each popup element](https://community.elfsight.com/t/adjust-font-weight-of-each-popup-element/50403)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [May 1, 2024, 1:32pm UTC](https://community.elfsight.com/t/adjust-font-weight-of-each-popup-element/50403 "2024-05-01T13:32:27Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .global-styles, .eapp-team-showcase-member-card-info-name { font-weight: 700; } .global-styles, .eapp-team-showcase-memb…
---
## [Set custom font in widget's popup](https://community.elfsight.com/t/set-custom-font-in-widgets-popup/25180)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 12:54pm UTC](https://community.elfsight.com/t/set-custom-font-in-widgets-popup/25180 "2023-11-10T12:54:07Z")
Although we do provide a list of fonts for you to choose for your widget, you might happen to need a custom code. If that is the case, add the code below to Custom CSS field on your Team Showcase widget’s Style tab: .g…
---
## [Adjust spacing in the popup](https://community.elfsight.com/t/adjust-spacing-in-the-popup/49812)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [April 27, 2024, 8:19am UTC](https://community.elfsight.com/t/adjust-spacing-in-the-popup/49812 "2024-04-27T08:19:20Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .global-styles, .eapp-team-showcase-popup-item-description br { margin: 10px 0; display: block; content: ""; } Guy…
---
## [Change font size for all elements (Team Showcase)](https://community.elfsight.com/t/change-font-size-for-all-elements-team-showcase/25185)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 1:44pm UTC](https://community.elfsight.com/t/change-font-size-for-all-elements-team-showcase/25185 "2023-11-10T13:44:31Z")
Add this code to the Custom CSS field on the Style of your Team Showcase widget’s settings: .eapp-team-showcase-title-component{ font-size: 32px; } .eapp-team-showcase-tabs-tabsCategory{ font-size: 18px; } .eapp-team-s…
---
## [Move widget to the center of the webpage](https://community.elfsight.com/t/move-widget-to-the-center-of-the-webpage/25188)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 1:48pm UTC](https://community.elfsight.com/t/move-widget-to-the-center-of-the-webpage/25188 "2023-11-10T13:48:27Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-root-layout-component { margin: 0 auto; }
---
## [Change border radius in popup](https://community.elfsight.com/t/change-border-radius-in-popup/25191)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 1:55pm UTC](https://community.elfsight.com/t/change-border-radius-in-popup/25191 "2023-11-10T13:55:54Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: @external { .eapp-team-showcase-popup-item-container { border-radius: 0; } }
---
## [Make images square for Grid layout (1st layout option)](https://community.elfsight.com/t/make-images-square-for-grid-layout-1st-layout-option/25216)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 5:46pm UTC](https://community.elfsight.com/t/make-images-square-for-grid-layout-1st-layout-option/25216 "2023-11-10T17:46:07Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-member-card-grid-photoContainer{ border-radius: 0 !important; } .eapp-team-showcase-member-card-grid-p…
---
## [Remove gradient effect when hovering the image](https://community.elfsight.com/t/remove-gradient-effect-when-hovering-the-image/25219)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 6:02pm UTC](https://community.elfsight.com/t/remove-gradient-effect-when-hovering-the-image/25219 "2023-11-10T18:02:12Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-member-card-gallery-infoContainer::before { background: transparent; }
---
## [Display images in full height](https://community.elfsight.com/t/display-images-in-full-height/25221)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 6:07pm UTC](https://community.elfsight.com/t/display-images-in-full-height/25221 "2023-11-10T18:07:28Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-member-card-photo-photo { object-fit: contain; height: 100%; position: static; transform: none; }
---
## [Change member's name color](https://community.elfsight.com/t/change-members-name-color/25222)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 6:10pm UTC](https://community.elfsight.com/t/change-members-name-color/25222 "2023-11-10T18:10:59Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s setting: .global-styles, .eapp-team-showcase-grid-item .eapp-team-showcase-member-card-info-component .eapp-team-showcase-member-car…
---
## [Change member's job color](https://community.elfsight.com/t/change-members-job-color/25223)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 6:12pm UTC](https://community.elfsight.com/t/change-members-job-color/25223 "2023-11-10T18:12:07Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .global-styles, .eapp-team-showcase-grid-item .eapp-team-showcase-member-card-info-component .eapp-team-showcase-member-car…
---
## [Make card borders rounded (1st layout)](https://community.elfsight.com/t/make-card-borders-rounded-1st-layout/25224)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 6:15pm UTC](https://community.elfsight.com/t/make-card-borders-rounded-1st-layout/25224 "2023-11-10T18:15:50Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-member-card-grid-component { border-radius: 50px; }
---
## [Hide images (4th layout)](https://community.elfsight.com/t/hide-images-4th-layout/25229)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 6:26pm UTC](https://community.elfsight.com/t/hide-images-4th-layout/25229 "2023-11-10T18:26:38Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-member-card-list-photoContainer { display: none; }
---
## [Hide images (1st layout)](https://community.elfsight.com/t/hide-images-1st-layout/25230)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 6:28pm UTC](https://community.elfsight.com/t/hide-images-1st-layout/25230 "2023-11-10T18:28:49Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-member-card-grid-photoContainer { display: none; }
---
## [Enlarge images (1st layout)](https://community.elfsight.com/t/enlarge-images-1st-layout/25231)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 6:32pm UTC](https://community.elfsight.com/t/enlarge-images-1st-layout/25231 "2023-11-10T18:32:26Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-member-card-grid-photoContainer { min-width: 150px; min-height: 150px; }
---
## [Change Overlay color (gradient)](https://community.elfsight.com/t/change-overlay-color-gradient/25212)
**Author:** [@Max](https://community.elfsight.com/u/Max)\
**Replies:** 0\
**Last updated:** [November 10, 2023, 5:42pm UTC](https://community.elfsight.com/t/change-overlay-color-gradient/25212 "2023-11-10T17:42:05Z")
Add this code to the Custom CSS field on the Style tab of your Team Showcase widget’s settings: .eapp-team-showcase-member-card-gallery-infoContainer::before { background: linear-gradient(to bottom, rgb(0,0,0,0), rg…