MaestroPreviously known as Transact Maestro. | Form Builder<![CDATA[ ]]> | 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, Template Designers manage all styling in the template as it can get complicated. You should always speak to the Template Designer before making any styling changes.
For example, you can apply multiple shared styles and item styles to a particular component. What happens if one of these styles defines the label to be red, and another defines it to be blue? What color will be chosen?
The answer is that the styles will be applied in the order that they are defined in the master style-sheet that is maintained by Maestro. Any style setting that is applied after a previous one will overwrite the previous one. You can't control what order the various styles will appear, except that the item style will always override any shared style settings. Maestro comes with the Explore Styles functionality that allows you quickly find out what the effective style of a component is and in which order CSS is arranged.
Styling uses CSS and LESS, so you should be fairly familiar with the concepts to create effective and reusable styles. For more information, see https://www.w3.org/Style/CSS/learning.
To view and edit component's styles in the Style pane:
Main Style pane functionality is described in details below.
A list of styles applied to the component appears beneath the Selected Style heading.
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 CSSCSS stands for Cascading Styles Sheets and is used to define styles for a Maestro Form, including the design, layout, and variations in the form’s display on different devices and screen sizes. The CSS on a Maestro form is primarily taken care of by the Template Designer. The Template Designer will implement the branding and/or styling of the form’s assets.CSS can be applied to the template of the form, individual components, and any other asset associated with a Maestro form. or via the GUI. You always, however, have more control when editing the CSS file.
Beneath the list of styles, the following options are available:
When a component has multiple styling targets, an additional Styling Target property is shown:
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.
Even the simplest components in Maestro have a reasonable level of complexity. For example, the simple Text Field component consists of three separate parts.
These separate parts are known as Targets, and you can style each of these separately.
Once you have selected one of these Styling Targets, you can use the Style settings to specify the Styles for each target separately.
For example, the following example shows a Text Field where the Border Style has been set for different targets.
Different types of components will have different targets, and you may need to experiment to understand which target affects which part of the component. Using the border settings, as shown above, can help to identify the different parts of the component. Alternately, you can also look at a form containing that component type in your browser and use the browser "Inspect" function to understand the structure of the component.
Normally, when you click on a component and start modifying its style, you are changing the Item Style, which is the styling for just that one item on the form. This is fine when you want to change the styling of just that one field. However, if you want to create a whole lot of components that all look the same, and you want these to be used consistently, then you need to create a shared style.
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:
|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 Style Editor has many of the standard CSS properties without needing to understand the details of CSS. It allows you to specify styles using the following four options:
These options are always visible.
Under the Text heading, the following properties are available for adjusting the text in the selected style:
Under the Text heading, the following properties are available for adjusting the layout of the selected style:
Under the Text heading, the following properties are available for adjusting the border of the selected style:
Under the Background heading, there's a dropdown with the following options:
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:
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.
If you select Solid, a solid background color will be applied to the selected style.
The color is defined by two properties:
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:
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:
If you select Image, you'll be able to choose a background image from a list or upload a new image.
The example below shows the difference between components with the individual and shared styles applied:
Next, learn about the Integration pane.