Jump to content

Localize "Type to search..." placeholder text on the Search Page

Recommended Posts

Hello dear helpful community! 

I'm building a site for a Russian company using Brine and I managed to localize some of the built-in text. Special thanks to @tuanphan for his Search Block custom code 👍🏽 https://forum.squarespace.com/topic/164077-how-to-edit-customise-search-box-placeholder-text/?do=findComment&comment=375210

What I'm struggling with is the translation of "Type to search..." on the search Page. I'd like it translated OR hidden.

I found this thread https://forum.squarespace.com/topic/156697-customise-styling-on-a-search-block/ but it doesn't seem to work, or maybe I'm doing something wrong. Please help!

 

PW: rsrtr2021

Bonus question:
How to make the search results fonts smaller?

www.afterworkdiy.ru

Link to comment
  • Replies 13
  • Views 1.3k
  • Created
  • Last Reply

Add this to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() {
	$('.sqs-search-page .sqs-search-page-input input').attr('placeholder','Squarespace new text');
});
</script>

add this to Code Injection > header

<style>
  /* Search page input font */
  .sqs-search-page .sqs-search-page-input input {
    font-size: 16px;
}
</style>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

OMG, @tuanphan you're fast and helpful as always! Thank you for your prompt reply! 🤍🤍🤍

The Style part works great - the font got smaller.

But the Code part doesn't seem to change anything... I pasted the code to the Footer as is, without even changing your text example. But It still says "Type to search..." ((
This same code works for the Search Block but somehow not for the Search Page. Any idea why?

BUT thanks to you I realized how to implement plan B  - hide the placeholder text making it white. Maybe it will help someone:

<style>
  /* Search page placeholder text color */
  .sqs-search-page .sqs-search-page-input input::placeholder {
    color:white;
  }
</style>

 

www.afterworkdiy.ru

Link to comment
Quote

But the Code part doesn't seem to change anything... 

I think this may be because the needed elements are not on the DOM when the code runs. Even though the code has waited until document ready. 😞

This may need a MutationObserver.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
22 hours ago, creedon said:

This may need a MutationObserver.

Thank you for your reply @creedon!

I guess it will require a pretty long piece of code? I guess I shouldn't overload the site and 'd better stick with making the placeholder text white on white...

www.afterworkdiy.ru

Link to comment

Although the code may look long to do what you want it really isn't. I don't think overloading the site is an issue. I have some bits from which I can cobble a script together.

Please bump this thread in several days if I've not posted some code.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 5/15/2021 at 5:27 AM, creedon said:

Although the code may look long to do what you want it really isn't. I don't think overloading the site is an issue. I have some bits from which I can cobble a script together.

Please bump this thread in several days if I've not posted some code.

Hey! Bumping the thread to ask if you have time to have a look at the code. If not, no problem, I'll stick with the white-on-white option then))))) But I'm sure the solution would help others too

www.afterworkdiy.ru

Link to comment
17 hours ago, creedon said:

Did you try the code I posted last Friday?

I'm an idiot))) The link brought me to your last reply and I didn't even scroll to the top to see your answer.

OMG! IT WORKS PERFECTLY!!!!!!!!! ABSOLUTELY PERFECT!!!! 

Thank you soooo much! This thread can be closed as the super right answer is here.

www.afterworkdiy.ru

Link to comment

Excellent! This is not directed at sertta but gives me an opportunity to expound.

Unfortunately some folks have a habit of what I call hit and run questioning. They ask a question, get their answer, then delete the thread! 😒

I just don't get that! Folks! A forum is a community. The community helped you by answering your question. Do your part and share the knowledge!

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

I totally agree! This forum is an outstanding resource. My whole site is built based on other people's threads, their experience and help. Even when I don't find an answer, I find some bits of code that when reassembled can do amazing little things.

 

Once again, thank you for the beautiful solution! 

www.afterworkdiy.ru

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.