Jump to content

How to change the Search input text colour

Recommended Posts

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

Edited by LGWebDesign
Initial Revision
Link to comment
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

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

screen-shot-2017-06-16-at-015955.png.4603bf7f26d375fd80489f2bac238add.png

screen-shot-2017-06-16-at-014436.png.903056606d4c1abce5667eceb45dd9f5.png

Link to comment

This does really help

Top useful websites: - [json formatter][1], validator, editor, parser online - [spanish to english][2] translation and dictionary - [bullet force multiplayer][3] games online - [javascript obfuscator][4] tool - [192.168 ll][5] wiki router [1]: http://jsonformatter-online.com/ [2]: http://spanishto-english.com/ [3]: http://bulletforcegame.com/ [4]: http://javascript-obfuscator.org/ [5]: https://192168-ll.com/

Link to comment

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!

Link to comment
  • 2 years later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 6 months later...

 

@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;
}

Edited by Hiker
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.