Solid Underline Search Block

Look Demo

Give the search block a solid underline 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.

// Underline Search Block //

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

// Search Block - Text //

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

Customize

Search Block: Adjust the border bottom 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”.

License

This plugin comes with an Unlimited Use License. View License Terms