Home Page Search Bar Font Color Issue

Search Best Practices - Search Front-End
1

Hi Team,

I integrated our search bar onto a client’s website last night - they use WordPress as well as a plugin called BeaverBuilder. We ran into a UI issue where the font color of text typed into the search bar is white (meaning you cannot see the text unless you highlight it) - possibly because the rest of their header uses white font.

Could anyone advise on what css to include in order to get that fixed?

image (1)

Best,
Luc

2

Hi Luc,

Since CSS cascades, the first place I would look is to see if it’s inheriting the CSS from elsewhere on the page. You could try using “!important” to make sure it’s not being overridden elsewhere.

Let us know if that works - if not, we’ll try some other things!

1 Like
3

Hi Liz,

Understood - that sounds like it should do the trick. Would something like the code below work? I think all that remains unclear to me is which css class affects user text - I assume .yxt-SearchBar-input?

<style>
.yxt-SearchBar-input {
color: black !important;
}
</style>

(inputted into the code below - white labeled of course)

<head>
 <!-- Other stuff in the head here -->
 <link
   rel="stylesheet"
   type="text/css"
   href="https://assets.sitescdn.net/answers/v1.5/answers.css"
 />
 <script>
   function initAnswers() {
     ANSWERS.init({
       apiKey: "",
       experienceKey: "",
       experienceVersion: "PRODUCTION",
       locale: "en", // e.g. en
       businessId: "",
       onReady: function() {
         ANSWERS.addComponent("SearchBar", {
           container: "",
           name: "", //Must be unique for every search bar on the same page
           redirectUrl: "",
           placeholderText: "",
         });
       },
     });
   }
 </script>
 <script
   src="https://assets.sitescdn.net/answers/v1.5/answers.min.js"
   onload="ANSWERS.domReady(initAnswers)"
   async
   defer
 ></script>
</head>