Support Titan > Titan Web > Elements > Input > Signature > Signature Style > Signature Styling

Signature Styling

The Titan signature is an electronic handwritten depiction of someone’s name, nickname, or mark that a person writes as proof of their identity and intent. It can easily be collected online using a mouse, finger, or stylus. The Signature element in Titan can also collect company signatures that are sometimes required for formal validation purposes.

The Signature element can be broken down into several parts, which can be styled individually, for example, Label Font, Input Border, and Message Colors. You also have the option to style the element as a whole using the “Root” option.

This element can be edited on both the Element and the Project Style levels.

#	Option	Function
1	Root	This option enables you to set general properties that affect the Signature element as a whole.
2	Label	The Label option allows you to control the style of the descriptive text above the Signature box. For example, its font type, font size, and color.
3	Shrink Label	You can use the Shrink Label option to control the style of the elevated label when the input label is configured as floating. The Shrink Label option is only available under the Standard, Filled, and Outlined variants on the project styling properties and may not be applied on the Classic and Fixed variants.
4	Input	The Input option allows you to style the Input box, fill, border, and company data which could also be shown when the element is used to collect company signatures.
5	Messages	This option allows you to style the text shown under the Signature when it is found to be valid or invalid. You can set the font for both messages and a separate color for the error and success messages. The colors set for errors or valid outcomes also affect the Input border.
6	Clear Icon	Insert a clear icon to assist users in clearing all input in a field.

1. Root

The Root option enables you to set general properties that affect the Signature as a whole such as position, size, alignment, and use of CSS.

#	Option	Function
1	Position	You can use this option to change the Signature Field’s location in the content area on the x and y-axis (left/right/top/bottom). The position also allows you to make the Signature Field float over its parent container or the entire page. “Float over Parent” allows you to set the location of the Signature Field within the box containing it, e.g. container or strip. “Float over Page” allows you to set the location of the Signature Field inside of the entire page (and have it stay in the same location even when the user is scrolling in it).
2	Size	This option allows you to change the width and height of the Signature element.
3	Alignment	You can set the Signature element to a vertical or horizontal position in relation to its strip (left/center/right/top/middle/bottom). The Alignment option also allows you to set the position of a few elements in relation to each other.
4	User CSS	Cascading Style Sheets (CSS) allows a user to apply styles on the Signature element with CSS code. Note: For Project styling, CSS is accessed via the Tools menu, which you can read about in our Style Elements Using User CSS article.

2. Label

The Label option allows you to control the style of the descriptive text above the Signature Field box. For example, its font type, font size, and color.

#	Option	Function
1	Font	The Font enables you to change the typography style, for instance, font family, weight, color, and size.
2	Margin	This option allows you to set the outer space between the label and adjacent element parts.
3	Asterisk	This option lets you set the style of the asterisk sign (*) that appears next to the label when the element is mandatory.

3. Shrink Label

You can use the Shrink Label option to control the style of the elevated label when the input label is configured as floating.

The Shrink Label option is only available under the Standard, Filled, and Outlined variants on the project styling properties and may not be applied to the Classic and Fixed variants.

#	Option	Function	Available in Project or Element
1	Font	The Font enables you to change the typography style, for instance, font family, weight, color, and size.
2	Margin	This option allows you to set the outer space between the label and adjacent element parts.

4. Input

The Input option allows you to style the Input box, fill, border, and company data which could also be shown when the element is used to collect company signatures.

#	Option	Function
1	Input Font	The Fill option allows you to set the background color of the Signature Field, the color of the signature drawing, and the color of the dashed line that indicates where to sign.
2	Fill	This option allows you to style your company information embedded in the Company Signature: the font family, size, color, spacing, and position.
3	Border	The Border option allows you to style the contour of the header in the Signature Field: make the border visible or invisible, change its width, color, corner radius, and more. The border can be styled as a whole or separated into top, bottom, left, and right border lines.
4	Company	This option allows you to style your company information embedded in the Company Signature: the font family, size, color, spacing and position.

5. Messages

This option allows you to style the text shown under the Signature Field when it is found to be valid or invalid.

#	Option	Function	Available in Project or Element
1	Font	This option allows you to style the text shown under the signature when it is found to be valid or invalid. You can set the font for both messages and a separate color for the error and success messages.

6. Clear Icon

Insert a clear icon to assist users in clearing all input in a field.

#	Option	Function
1	Color	The Color option allows you to set the icon’s color. The color can be set by selection from a color pallet or by specifying a HEX color code.
2	Stroke	This option refers to the outer contour of an icon. It allows you to make the icon’s border visible or invisible and change its weight and color.
3	Size	This option allows you to change the width and height of the Items.