Hi everyone.

I am working on a site with a dark background using a template from the brine template familiy, and for some silly reason the input text colour for search, contact forms and shopping cart quantity is all linked to the body text colour of my site.

Not a problem if you have a white background, but you see how this could be an issue is your body text colour needs to be white!!

I used the below code to fix the cart quantity, and selected lightbox mode for my contact form as a temporary workaround, but I'm having trouble adapting the code for the Squarespace built-in Search page.

show-cart .quantity input {

 color: #000000;

}

Any help with the code I need to enter would be greatly appreciated.

Thanks

Luke

Hey Luke,

Do you mean the search in the header? You should be able to use the following code in the CSS:

.Header-search-form-input {

 color:white;

}

Hope this helps!

Thanks for your reply DMK

Sorry, it's not the header search I'm referring to. It's the built-in search page itself, located on the reserved 'search' url slug.

Any thoughts?

Hey Luke, thanks for clarifying!

I just tried this out and it seems to work:

 .sqs-search-input {

      color:red;

   }

Let me know if you have any issues with it :)

That worked perfectly. Thank you very much for your help. It's greatly appreciated.

Sorry to be a pain.

Any idea how I can change the colour of the text when no results can be found?

On the search page the text 'your search didn't not match any documents' is black, and on the search block (theme set to light) it's white (see screenshots)!

Thanks again

This does really help

Sorry Luke only seeing this now!

.sqs-search-input,.sqs-search-page-notice, .sqs-search-container-item {

  color:red;
}

So .sqs-search-page-notice is to include the "your search didn't not match any documents"

.sqs-search-container-item would be for the actual search results if you wanted to include that

Hope that helps you out!

Thanks so much. That code worked perfectly. I really appreciate all your help.

No problem at all!

Hi @dimsk @lgwebdesign, 

I have tried as well but it doesnt seem to be working - am I doing something wrong :) 

.sqs-search-input,.sqs-search-page-notice, .sqs-search-container-item {

  color:white;
}

On 5/14/2020 at 7:18 PM, timeenjoyed said:

Hi @dimsk @lgwebdesign, 

I have tried as well but it doesnt seem to be working - am I doing something wrong :) 

.sqs-search-input,.sqs-search-page-notice, .sqs-search-container-item {

  color:white;
}

Can you share link to search page on your site?

@timeenjoyed @tuanphan

If you copy paste the code like you did, all the text will be white. To make it work, I had to break it down as follow.

This code is to change the color in the search bar from the result page, so it is not white on white.

.sqs-search-input {

      color:black;
}

This code is to change the color of the notice that says "Your search did not match any documents".

.sqs-search-page-notice {
  color:white;
}

This code changes the color in the result page.

.sqs-search-container-item {

  color:white;
}

In the custom CSS section this is how my code reads and works well!

.sqs-search-input {

      color:black;
}

.sqs-search-page-notice {
  color:white;
}
.sqs-search-container-item {

  color:white;
}