Styling

Tap icon sliders h in the top-right corner of the kiosk editor, followed by the option 'Style' in the menu to display the styling options for the kiosk dataset:

stylesettings

  1. Edit the layout of the kiosk

  2. Edit the styling for the menu bar at the top of the Kiosk

  3. Edit the styling for the font color of the default text (e.g. of the voice-overlay, the microphone icon, …​)

  4. Edit the background of the kiosk

  5. Edit the options for the menu of the kiosk (e.g. kiosk-settings, title bar color, …​)

  6. Edit the options for the items of the dataset

The options for the menu bar (1) and menu (4) are not available for the action kiosk.

Layout

The following options can be changed for the layout of the kiosk:

layout

  1. Set the number of rows of elements

  2. Set the number of columns of elements

  3. A preview is shown with the resulting layout for a page.

When starting a new kiosk, the default layout based on the connected device will be used.

The following options can be found in the top menu bar category:

topmenubar

  1. Set an icon for the title instead of text

  2. Set the font-size for the text of the title of the kiosk

If a custom icon is selected, no text will be shown (for any folders in the kiosk either). By default, the ZBOS logo will be used by the dataset.

Font color

The following options can be found in the top menu bar category:

fontcolor

  1. Set the color for the default text as shown on the tablet when the device is speaking

  2. Set the color for the default icons (e.g. microphone, volume controls, …​)

For example, these settings

fontcolorexample

will result in the following:

fontcolorresult

Background

The following options are available for the background of the kiosk:

background

Availble options

The following options can be set:

bgtypes all

  1. Select the option 'Color' to set a single color as background

  2. Select the option 'Gradient' to set a gradient between two colors as background

  3. Select the option 'Image' to set an image as background

Setting a color

Select the option 'Color' in the type and tap the color field to set the color using a Color-wheel .

bgoptions color

Setting a gradient

Select the option 'Gradient' in the type and tap the color fields to set the colors using a Color-wheel.

bgoptions gradient

  1. Tap the color field for the begin color to set the color at the top

  2. Tap the color field for the end color to set the color at the bottom

The end-result will produce a background which transitions from the color set at the top to the color set at the bottom.

For example, the following setting

gradientexample

results in the following gradient:

gradientresult

Setting an image

Select the option 'Color' in the type and tap the options for the image to select the image stored on the connected device to use for a background.

bgoptions image
The background will also be used in the settings of the Kiosk app.

The following options are available for the background of the kiosk:

menu

  1. Set the font-color for the selected category in the kiosk settings

  2. Set the background-color for the title-bar

For example, the result of the shown settings result in the following in the kiosk menu:

menuresult

Kiosk item

The following options are available for the background of the kiosk:

kioskitem

  1. Set the font-size for all items in the kiosk

  2. Set the font-color for all items in the kiosk using a color wheel