Change Monocle Search design

The design editor changes the built-in search interface and search launcher. You can make common brand changes without writing code.

Changes apply immediately. Open your site in another window to review each change.

Visual style

Choose the corner shape for panels, inputs, and controls. You can use square, rounded, or fully rounded corners.

Choose an accent colour from the presets or enter a custom colour. Monocle uses it for focus rings and highlighted matches.

Search launcher

The search launcher is the button that opens the floating search interface. You can:

• show or hide the built-in launcher
• place it in any corner of the screen
• choose its size, colour, and icon
• add a short text label

You can also use search links and search inputs without the built-in launcher. For a different button design, see Create a custom launch icon.

Search panel and backdrop

Place the search panel on the left, in the centre, or on the right. You can also change the placeholder text in the search field.

For the area behind the panel, choose a backdrop colour and the amount of blur. These settings apply to the floating search interface.

Search results

Control how much information each result shows. You can:

• show or hide page descriptions
• choose the length of the text around a match
• hide images or show them as square, 3:4, or in their original shape
• allow one result per page or several matching sections from the same page

Monocle can also scroll a visitor to the matching section after they open a result. This option depends on the structure of the site.

Limits of the design editor

The editor changes Monocle Search. It does not change your site theme or the content of your pages.

The editor does not provide direct HTML editing or unrestricted templates. For small changes outside these settings, read Change CSS. Custom CSS can stop working when the search interface changes.