How to change the style of your search bar on any template

This is perfect for the following templates:

All templates

How to customize the search block with a little CSS in Squarespace - SquareCode HQ guided tutorial
 

Here’s the code:

<style>
.sqs-search-ui-button-wrapper.color-dark .search-input {
    border: none;
    background: #ffffff;
    opacity: 1;
      font-family: freight-display-pro;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    letter-spacing: 0.16em;
    line-height: 2em;
    text-transform: none;
}
</style>

Let’s break this code down just a little so we can understand what each line will do for your search block.

.sqs-search-ui-button-wrapper.color-dark .search-input { - In this section, we are targeting the search block specifically.

border: none; - Means we are removing the original border you see within the search block. You can easily change the border to the following:

Styling your search bar block in all Squarespace templates - SquareCode HQ

border: 1px solid #000000;

This would mean that you now have a thin (1px) solid line (solid) in the color black (#000000) that wraps around your search block.

background: #ffffff; means we are targeting the background color of the search block, and are wanting to change the background color to white (#ffffff). Change this hex code to any that match your brand colors.

In the example below, I am using the color #d9d9d9;

Styling your search bar block in all Squarespace templates - SquareCode HQ

opacity: 1; means we are removing the transparency of the background color and are making the background color solid. If you would like to keep your search box transparent, you can remove this line completely.

In this next part, we are making sure the text in the search block is consistent with the rest of our brand. This means we are adding the styles for the BODY text to the search block. You can do this by right click on body text > click inspect > finding the body styles > copying the styles > pasting the styles in the same code as the search bar. You should end up with something similar to what I have included in the code above/below:

How to find the font styles for your body text in Squarespace - SquareCode HQ tutorial

font-family: freight-display-pro; means we are targeting a specific font.

font-weight: 400; means will determine the boldness of the font we are targeting. The higher the number, the more bold your font will be.

font-style: normal; this targets whether your text will be normal, italics, etc.

font-size: 16px; determines the size of your font. The smaller the number, the small your text will be.

letter-spacing: 0.16em; this targets how much space will be between each letter.

text-transform: none; this will target whether you text will be capitalized, all uppercase or none of the above.

} This closes all of the stylings we’ve done for this specific block.