4.2.3 Styling Tab

The panel Element Properties shows the editable properties of the element selected in the Elements panel.

The Styling tab specifies the styling and coloring of the selected element. Note that the styling will apply to both the element’s label and its user input.

List of element properties

The following is a list of some of the element properties that can be adjusted. Only properties relevant for the element type you have selected are shown in the Designer.

Styling tab

Label color

Color of text shown. Click on the grey square to select a color, or type an English color name, or type the hex code of the color.

Background color

Background color of text.

Icon

Page and Tab elements are indicated by little icons you can select here. Default is the icon showing a piece of paper with a folded corner.

Label multimedia

A multimedia file (image, video) to represent the element, pasted in the field as a base64 code or a URL address to a file in Resources.

Auto-scale Label multimedia to available width

Select this to expand or contract the image to the width available for this element.

Max width of Label multimedia

Type a number for the maximum width, either as pixels (“200px”) or percentages (“50%”).

Min width of Label multimedia

Type a number for the minimum width, either as pixels (“200px”) or percentages (“50%”).

Tip: If these width properties do not work as intended you may create a grid with one row and no borders, place the multimedia element in one of the grid cells. Let the other cells have Spacer elements so they look empty. Vary the column width of the cells in the row until the multimedia element has the correct size and position on the page. Note – if the picture is very small, it will not be enlarged even if you enlarge its column width.

Font size

Font size of the text. In Zegeba v 4.4 and lower, default when no size was specified was 11pt when the text was viewed in the form.

However, such default 11pt text was printed in 8pt size on PDFs – unless it was expressly fixed as 11 pt:

From Zegeba v 4.6 this has changed. Default (non-specified) text will now be printed as 11pt on the PDF:

If you find that this new text layout on PDF messes up the layout you have made in earlier versions, you may select “Use Legacy font conversion” on the form element’s property tab PDF to always print this form with the old system of using unspecified font size as 8pt.

Font style

Style of font, default normal. Type the words bold and/or italics to change the style.

Border

For Grid, Group, Accordion elements: Type the word “none” if you do not wish to have a border around the element (and inside the grid). Delete “none” to restore the default border.

Border Style

Default is “solid” – a normal line. Type “dashed”, “dotted”, “thick”, or “transparent” to try other types of lines.

Border Color

Select the color you want for the border. Click on the grey square to select a color, or type an English color name, or type the hex code of the color.

Border Width

Type a width size in number of pixels.

Cell Padding

Padding is the space between the border of a cell and the text or other elements within. Try e.g. “4” for 4 pixels to improve the spacing in a grid.

Tip: If a Properties input field has “stretch marks” in its bottom right corner, you can drag this corner downwards to expand the field.

Customize standard buttons

From Zegeba v. 3.24, the Styling tab has a new powerful tool to customize standard buttons to suit your form and your company’s needs. For Repeat, Image/Audio/Video capture, Signature, Action and Attachment elements you can set new text, new icons and new colors.

For the two Signature Capture elements in the picture below we have used a pale blue company branding color for all the buttons and changed the main icon from a pencil to a head. We have also changed the label on the left Signature element to “Service Technician’s signature” (not shown in the picture), and the label on the right Signature element to “Captain’s signature”.