Pill Search Block

---

Description

Give the search block a pill shape style. This plugin uses css editor and works with all template families.

---

How To Install

Add a search block to any page. Set the color theme to dark.

Once the search block has been added and saved, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Pill Shape Search Block //

.sqs-search-ui-button-wrapper .search-input {
  background-color: #FFFFFF;
  border-width: 0;
  opacity: 1;
  border: 4px solid #000000;
  border-radius: 50px;
}

// Search Block - Text //

.sqs-search-ui-button-wrapper .search-input {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #000000 !important;
  opacity: 1 !important;
}

---

Customize

Search Block: Adjust the background color, border, and border radius px and color values to your liking.

Search Block Text: This is the text within the search block. Feel free to adjust the font size, font weight, letter-spacing, and color to your liking.

The code works for the search block set to the dark theme, which is ideal for lighter themed websites. If you want to use the light themed search block, you will need to replace all “dark” text in the code with “light”.

---