Make Teams Showcase Filters and Search Fields more prominent

[Dotty_Byrne]

Hello! I am using Teams Showcase to provide a member directory to elderly people in a Senior Cooperative. I’ve started training the elderly people (189 members) how to navigate the directory but they cannot see the light gray Group filters or the Search Field in Teams Showcase. Even after I show them where it is, they can’t find it. Is there a way to change the color of the filters/field or make the font bolder? I would prefer a pastel filter/field background (like blue) with BOLD black text.

Thank you for your consideration.
Dotty

[Max]

Hi there, @Dotty_Byrne and welcome to the Community

Sure, this code will help you change the background and text color of the search field:

[class*=“SearchBarComponent__Wrapper-sc”] {
background: #2f80ed;
color:;
}

[class*=“SearchBarComponent__InputIcon-sc”] {
fill: #fff;
}

[class*="SearchBarComponent__Input-sc"]::placeholder {
  color: #fff !important;
}

And here is the code to change the color of filters - Change color of tabs

Both codes should be added to the Custom CSS field on the Style tab of your widget’s settings. Please check it out and let me know how it worked

[Dotty_Byrne]

Hi Max, I can’t believe how fast you responded. Amazing! I copy/pasted your CSS code into the Style tab of my widget settings and the filter color worked beautifully (thank you!!). But the Search field is still gray. See screen snap. I also snapped my CSS code but you can’t see it all. Its just a copy/paste of your code.

Dotty

[Max]

Ah, you wanted to changed the background color of the search field. The code I’ve shared before changes the search field text and icon.

And here is the code to change the search background:

[class*="SearchBarComponent__Wrapper"] {
  background:brown!important;
}

Please check it out and let me know if it worked