Customise styling on a search block

Site URL: https://rhubarb-lanternfish-e8c2.squarespace.com/

Hiya!

I am using Search Blocks in Tudor. How do I edit the styling of the Search Blocks?

The titles of the months are huge, the space in between each item is huge, it doesn't seem to respond to changing site-wide styling.

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.

Your site is setup with a password:

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