Introduction

Flat theme is the latest one for Live Search. It is a bit similar for the Minimal theme, but has a flat design. With very clean animations and the result images, it can impress your customers.

Search box settings

Search box font

Search box font set the all properties of the text appear in the search input box. Click on the link, and the Font Manager will load in popup. In this section it won't be detailed, there is an article for it.

Category opener color

You can read about the category chooser in the basic parameters article. Here you can set the little arrow color.

Animation for loading

When you make a search, and the AJAX query is running (approx.: 10-500ms) a loading animation will appear in the right corner. This options can be also disabled.

Image for close button

After the search has ended, and the results appear a closing image will shown in the place of the loading animation, what can close the result box. You can select this image here.

Close image color

You can change the closing image color.

Image for search button

Search button can be clickable, if you have set a result landing page in Basic options, or can be stand next to the search input without real functionality. You can set the image for it.

The color of textbox border

Here you can add a color of the border around the search input.

The color of textbox border when it is active

For the same purpose as previous when the search box is active.

Category chooser font

Set the category chooser font properties.

Control Panel Settings

This control panel showed on frontend, when the result cards appear.

Control panel background gradient color

The main background color of the control panel.

Control panel border radius (px)

Set the rounded corners for the control panel. You can set the border-radius css property in pixels.

Control panel frame width (padding) (px)

With this option you can set the distance between the control panel's container and the inner content.

Control panel inner background

Set the inner background-color.

Control panel inner border radius (px)

Set the inner div rounded corners.

Control panel button background

Set the background color for the buttons.

Control panel button hover background

Set the background color for the buttons in hover state.

Control panel button pushed background

Set the background color for the buttons when it is pushed down.

Control panel button border radius (px)

Rounded corners for the buttons

Control Panel font

Set the font of the control panel with the font manager.

Control Panel pushed button font

You can set the font settings for the pushed buttons. It is necessary if you would like to make a nice design. With the skins this parameter is also set, so don't have to worry about it.

Control Panel pushed button drop shadow

Drop shadow can be set for the pushed button. This parameter is also an advanced one, so change it only, if you know CSS.

Control Panel pushed button inner shadow

Inner shadow for the pushed button. Also only for who has CSS knowledge.

Result Cards Settings

This control panel showed on frontend, when the result cards appear.

Result elements per page

You can set how many result-item would like to show on the same time.

Result background gradient color

Set the gradient background for the result items.

Result element frame width (padding) (px)

Set the padding of the result card.

Result image width (px)

Width of the result image.

Result image height (px)

Height of the result image.

Result image shadow size (px)

The shadow size of the image can be set in pixels.

Result element title font

Set the result title with font manager.

Result element introtext font

Set the result introtext with font manager.

Show intro text

Show/Hide the introtext.

Introtext length

The length of the introtext can be limited. If it is longer than the set value, it will be truncated.

Result intro text min height (px)

Minimum height of the introtext part of the card.

• Next >