Styles Pane

   MaestroPreviously known as Transact Maestro.  |   Form Builder |  5.1 & Higher This feature is related to 5.1 and higher.

The Maestro editor comes with the Style pane that allows you to modify the appearance of a component. Although a template used in a Maestro form enforces the majority of the styles, you can use this pane to add minimal modifications to the visual look and feel of forms and components. Form Builders should not use the Styles pane often, if ever. In most cases, the Template Designers manage all styling in the template. You should always speak to the Template Designer before making any styling changes.

To view and edit component's styles in the Style pane:

  1. Open a design in the Maestro editor and select the Style tab.
  2. Maestro editor style pane window

  3. Find a style you need to modify. Styles are grouped by related settings so you may need to use the arrow to expand the group to see all available options.
  4. Click Save to update the component's changes in the form or the template.

Main Style pane functionality is described in details below.

Selected Style

A list of styles applied to the component appears beneath the Selected Style heading.

Styles > Selected Style

The first style in this list - Item Style - is unique to the selected component and can only be modified via the GUI (using the controls under the Item Appearance - Container heading).

All other styles that appear in this list are shared styles. These are styles that can be used by multiple components and edited as CSS or via the GUI. You always, however, have more control when editing the CSS.

Beneath the list of styles, the following options are available:

  • Add Shared Style - Add an existing shared style to the component. The styles in this list depend on the Available Component Styles.
  • Explore Styles - View the CSS/LESS for all of the component's styles.
  • Apply to Receipt Only - If enabled, the selected style will only be applied to the component when it's rendered within a receipt.

When a component has multiple styling targets, an additional Styling Target property is shown:

Styles > Selected Style > Styling Target

This option allows you to adjust the style of an individual part of a component, such as the label of a Text Field component or the input of a Dropdown.

Item Appearance - Container

Styles > Item Appearance

By default, the section that appears beneath the Selected Style section is called Item Appearance - Container. The first part of this heading refers to the currently selected style -- by default, Item Style -- and the second part of the heading refers to the styling target -- by default, the Container target.

If you select a different style from the Selected Style list, or select a different option from the Styling Target dropdown, the name of this section will change.

In addition to this, certain buttons will appear at the bottom of this section when certain conditions are met:

Label Description
New Shared Style Appears when an Item Style is selected.
Edit Custom CSS Appears when a Shared Style is selected. For more information, see edit custom CSS.
Save to Shared Style Appears when the selected style has been modified via the GUI. This is often the case for forms that use a template with one or multiple brands.
Clear Item Styles Appears when the selected style has been modified via the GUI.

The options described below, however, are always visible.

Text

Styles > Item Appearance > Text

Under the Text heading, the following properties are available for adjusting the text in the selected style:

Label Description
Font
Size
Color

Layout

Styles > Item Appearance > Layout

Under the Text heading, the following properties are available for adjusting the layout of the selected style:

Label Description
Padding
Min Height
Max Height
Min Width
Max Width
Vertical Alignment

Border

Styles > Item Appearance > Border

Under the Text heading, the following properties are available for adjusting the border of the selected style:

Label Description
Type
Radius

Background

Under the Background heading, there's a dropdown with the following options:

  • (EMPTY)
  • None
  • Solid
  • Left to Right
  • Top to Bottom
  • Image

Depending on which option is selected, different properties will become available that affect the background of the selected style.

By default, the dropdown is empty:

Styles > Item Appearance > Background

In this state, a background will not be applied to the selected style. If a background has been applied by a different style though, it will continue to appear.

If you select None, any existing background on the selected style will be removed.

Styles > Item Appearance > Background > None

If you select Solid, a solid background color will be applied to the selected style.

The color is defined by two properties:

Label Description Default Value
Color #cccccc
Alpha 100

Styles > Item Appearance > Background > Solid

If you select Left to Right, a left-to-right gradient background will be applied to the selected style.

The gradient is defined by three properties:

Label Description Default Value
From #cccccc
To #ffffff
Alpha 100

Styles > Item Appearance > Background > Left to Right

If you select Top to Bottom, a top-to-bottom gradient background will be applied to the selected style.

The gradient is defined by three properties:

Label Description Default Value
From #cccccc
To #ffffff
Alpha 100

Styles > Item Appearance > Background > Top to Bottom

If you select Image, you'll be able to choose a background image from a list or upload a new image.

Styles > Item Appearance > Background > Image

Next, learn about the Integration pane.