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

Customise styling on a search block

Question

1 answer to this question

Recommended Posts

  • 0

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

Share this post


Link to post

Create an account or sign in to comment

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

Sign in to follow this  

×
×
  • Create New...