Ghost Plugins

View Original

Pill Search Block

See this gallery in the original post

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.

See this content in the original post

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”.


See this gallery in the original post