Jump to content

Customise styling on a search block

Recommended Posts

  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Hi

I don't know if this will answer your question directly but I am happy to offer what I have in my Brine (v7.0) template site. If none of this is helpful let me know and I will report my own post for deletion. No point in adding unnecessary replies that might not help you or anyone else.

The code only affects the search and results to the same.

image.png.5cdfcd0a3de56ca67054caebf3e5ea4f.png

Your site is setup with a password:

image.png.6404ea730a63fe844c9d486c7333d113.png

This is in my footer:

<!-- Translate the See More button after a search -->
<script>
function searchPageTranslate() {
  //See More button
  Y.on('io:success', seeMoreUpdate, Y, true);
  Y.on('io:end', seeMoreUpdate, Y, true);

  function seeMoreUpdate() {
    setTimeout(function () {
      if (Y.one(".sqs-search-page-more span")) {
        Y.one(".sqs-search-page-more span").setHTML("Zobaczyć Więcej");
      }
    }, 1000);
  };
}
</script>
<!-- Localize "search page" placeholder text, credit to Jason Barone-->
<script>
  var placeHolderText = "Szukaj";
  setTimeout( function () {
    if(Y.one(".sqs-search-page input")){
    document.querySelector( ".sqs-search-page input").placeholder = placeHolderText;
  }
  }, 200);
</script>
<!-- End of "search page" placeholder text localization-->

This is in the header:

<!-- Localize "search" in the page header -->
<script>
  var placeHolderText = "Szukaj";
  setTimeout( function () {
    document.querySelector( ".Header-search-form-input").placeholder = placeHolderText;
  }, 200);
</script>
 <!-- End "search" localization -->
<!-- How to change "search" text to something custom -->
<script>
   $(document).ready(function() {
   var text = $('.sqs-search-page-input .title').text();
   text = text.replace('Search', 'Szukaj');
   $('.sqs-search-ui-button .title').text(text);
 });
 </script>

<!-- Translate the See More button after a search -->
<script>
function searchPageTranslate() {
    //See More Button
    Y.on('io:success', seeMoreUpdate, Y, true);
    Y.on('io:end', seeMoreUpdate, Y, true);

    function seeMoreUpdate () {
        setTimeout(function() {
            if (Y.one(".sqs-search-page-more span")) {
                Y.one(".sqs-search-page-more span").setHTML("Zobaczyć Więcej")
            };
        }, 1000);
    }
}
</script>

This is in my site wide Custom CSS but it is for localizing (customizing really) the text.

// If a search result is null then localize, courtesy of Banana, All-Star Circle Leader
.sqs-search-page-notice {
  visibility: hidden;
  position: relative;
  &:after {
    content: "Twoje wyszukiwanie nie zostało odnalezione.";
    position: absolute;
    top: 0;
    left: 0;
    visibility: visible;  
  }
}

 

Edited by AlexSantos
adding CSS
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.