Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


serrta

Question

Posted (edited)

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?

Edited by serrta

www.afterworkdiy.ru

Link to comment

13 answers to this question

Recommended Posts

  • 2

Add the following to Settings > Advanced > Code Injection > FOOTER.

<script>

  $( ( ) => {
  
    /*
    
      begin change search page input placeholder text
      
      Version       : 0.1d0
      
      SS Version    : 7.0
      
      Templates     : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed, Foster,
                      Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt,
                      Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor,
                      Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro,
                      Pursuit, Rally, Rover, Royce, Sofia, Sonora, Stella,
                      Thorne, Vow, Wav, West )
                      
                      your template is not listed? then it is not currently
                      supported
                      
      Dependancies  : jQuery
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    const placeholderText = 'Ввет для поиска...';
    
    // do not change anything below, there be the borg here
    
    if ( location.pathname !== '/search' ) return; // bail if not search page
    
    if ( ! ( 'MutationObserver' in window ) ) return;
    
    const observer = new MutationObserver ( function ( mutations ) {
    
      $.each ( mutations, function ( ) {
      
        if ( ! this.addedNodes.length ) return;
        
        const $e = $( 'input', $( this.addedNodes [ 0 ] ) );
        
        if ( ! $e.length ) return;
        
        $e.attr ( 'placeholder', placeholderText );
        
        observer.disconnect ( );
        
        } );
        
      } );
      
    // start listening for changes in search input
    
    observer.observe ( $( '.sqs-search-page-input' ) [ 0 ], {
    
      childList : true
      
      } );
      
    } );
    
  </script>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1

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.

How to: Setup password & share url - Insert Custom CSS - Open Page Header - Upload Custom Font - Upload File - Find Block ID, Data Section ID - Contact Squarespace Customer Care - Learn CSS at W3Schools

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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
  • 0
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
  • 0
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
  • 0
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
  • 0

Excellent! This is not directed 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 best , and see my profile. Thanks for your support!

Link to comment
  • 0

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

Create an account or sign in to comment

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

×
×
  • Create New...