Vega Search Box Color

Vega
,
1

Hello,

We are migrating to Polaris and Vega and our web services guy would like to change the color of the magnifying glass from orange to blue. Does anyone know how to do that (and would you be willing to tell me how)? I’ve been told it’s in the custom header and footer, but I’m not sure what I’m looking for.

Thank you!

Amanda

2

We looked into this as well and it looks like it would require writing custom HTML and CSS from scratch, and was not an easy process. We stuck with the sad orange :frowning: . Good luck!

3

I think I can actually help with this! Try putting this into your custom header, changing the color code to whatever you want:

.search-bar–btn {
background-color: #6d6aa6 !important;
border-color: #6d6aa6 !important;
box-shadow: none !important;
}

button[data-automation-id=“search-dropdown-toggle-button”] {
background-color: #6d6aa6 !important;
border-color: #6d6aa6 !important;
color: white !important;
border-radius: 0 !important;
}

button[data-automation-id=“search-dropdown-toggle-button”] svg {
fill: white !important;
color: white !important;
}

1 Like