The search bar is designed to sit naturally on any theme. It inherits your theme's font out of the box, so in most cases it already looks right.
Change the accent colour for the whole site:
Go to Settings, find Appearance On The Front End, and set an Accent Colour as a hex value such as #0d6efd. This colour is used for the focus ring, the search icon and the highlighted words. Leave it empty to use the house amber.
Change one bar only:
Use the accent attribute on that shortcode:
- [results_ai_search accent="#0d6efd"]
Change the font:
The bar uses your theme font by default. To override it for one bar:
- [results_ai_search font="Georgia, serif"]
Pick a shape:
- style="minimal" removes the border and leaves a clean underline
- style="square" uses soft rounded corners instead of a full pill
- Leave style out for the default pill shape
Write your own CSS:
Settings has a Custom CSS box that loads on every page showing a search bar. Target the wrapper class .ras-search and its parts. For example, to widen every bar:
- .ras-search { max-width: 640px; }
To target one bar only, give it a class and style that:
- [results_ai_search class="hero-search"]
- .hero-search .ras-box { height: 60px; }