How to change font of name and position in Team Showcase popup

Ask the Community Customization
1

Hi - I’m using the following CSS to try to adjust the font WITHIN the team showcase popup. I’d like the name and position to be a different font. I’m using:

div[class*=“popup”] .eapp-team-showcase-member-card-info-name,
div[class*=“Popup”] .eapp-team-showcase-member-card-info-name {
font-family: “Pathway Gothic One”, “Arial Narrow”, “Helvetica Condensed”, Arial, sans-serif !important;
font-size: 30px !important;
color: #243671 !important;
font-weight: 400 !important;
letter-spacing: -1px !important;
margin-bottom: 8px !important;
}

div[class*=“popup”] .eapp-team-showcase-member-card-info-job,
div[class*=“Popup”] .eapp-team-showcase-member-card-info-job {
font-size: 16px !important;
color: black !important;
}

But it is not working - any suggestions?

Thanks,

Lisa

2 Likes
3

Hi there, @Lisa_Stein :waving_hand:

You were really close to the correct version. Here is a slightly tweaked code that should work great:

.global-styles,
[class*="PopupItem__Container-sc"] .eapp-team-showcase-member-card-info-name {
  font-family: "Pathway Gothic One", "Arial Narrow", "Helvetica Condensed", Arial, sans-serif !important;
  font-size: 30px !important;
  color: #243671 !important;
  font-weight: 400 !important;
  letter-spacing: -1px !important;
  margin-bottom: 8px !important;
}

.global-styles,
[class*="PopupItem__Container-sc"] .eapp-team-showcase-member-card-info-job {
  font-size: 16px !important;
  color: black !important;
}

Give it a try and let me know if you like the result :wink:

1 Like
4

By the way, we have a guide explaining how to create CSS codes for our widgets. If you’re interested in building the codes on your own, feel free to check it out :wink: - Guide to CSS Codes

5

oh so cool! will bookmark this link :slight_smile:

3 Likes