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.

Preview changes

On wide screens, a preview appears beside the settings. It shows the search panel or launcher over the last captured screenshot of your site. The view follows the setting you edit.

New website screenshots do not include the Monocle launcher button. Start a new crawl to replace an older screenshot.

Before the first crawl completes, the preview shows labelled examples. It then uses live search results. Empty results and search errors do not show examples.

If the screenshot is unavailable, the preview uses a plain background.

Narrow editors hide the preview and show a notice. Changes apply to your live site as you make them. Select Open live search to open your site with a sample query. Use a second window to check each change.

Shared style

Choose the corner shape for panels, inputs, and controls under Shared style. This applies to search interfaces, including the overlay and launcher button. 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.

Launcher button

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 overlay

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.

Choose how the panel opens:

• Full height opens the full-height panel. This is the default.
• Start compact opens with the search field and any required notices. The panel grows when it needs more space.

Start compact works with all three positions and on mobile devices. The panel keeps its largest height when you change or clear the query. Closing and reopening the panel resets its height. A small screen or an open keyboard can limit its height.

This choice does not change autocomplete or search placed within a page.

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.