Designing Themes in Theme Builder

Theme Name

Modify your theme's name. This value must not be empty, and cannot be the same as any other theme.

Maximum of 50 characters.

Login Page Disclaimer Text

Use the rich text formatting input field to add/modify the disclaimer text for the login page of this theme. This can include links to another website with more information, such as a privacy policy.

Brand Primary

Applied to the most visually prominent components, primary color is used on main titles, primary buttons, check boxes and radio controls. It's also used to accent various elements including tabs, page navigation and the wait animation.

Brand Secondary

Used on secondary buttons, toggles, accordion tabs and publish folders.

Header Background

The background color of the main header shown on Produce home, form pages and dashboards.

Header Text

Used for text on the header including the form title. The text color should contrast with the header background for readability.

Header Link

Used for links on the header. The link color should contrast with the header background for readability.

Header Link Hover

Used for links in the hover state. The hover color should contrast with the header background for readability, and is often set to a slightly lighter or darker shade of the link color.

Site Logo

Defines a logo to show in the header on full screen devices. Recommended maximum pixel dimensions is 385 (width) x 100 (height).

Supported image formats are BMP, JPEG, GIF, SVG, and PNG.

Logo Size

Provides a slide control to adjust the size of the main logo for use in the header.

• For raster files (BMP, JPG, GIF and PNG), the slider allows the size to be reduced only to avoid significant upscaling. If a larger logo is required, upload a larger image file and then resize down to suit.

• For SVG files, the slider defaults to the middle 50% position and allows adjustment up or down in size.

Small Logo

Defines a smaller logo to show in the header on mobile/small screen devices. Recommended pixel dimensions are 60 x 60.

Supported image formats are BMP, JPEG, GIF, SVG, and PNG.

Favicon

A very small logo used in the browser for tab and bookmarks, depending on browser support. Recommended pixel dimensions are 16 x 16.

Supported image formats are PNG, ICO and SVG.

Shape - Corner style

Sets the corner style for all buttons and inputs.
Options are:

• Square

• Normal (default)
• Rounded - If selected, provides the option to exclude rounding the corners of Input Fields.

Depth - Button elevation

Sets whether shadow is used to create an elevated effect on buttons. Note that only primary and secondary buttons are affected.
Options are:

• Flat - (default) no shadow effect
• Raised - shadow effect

Content Width

Sets the ability to control the width of the form content, which changes the left/right margin padding sizes.

• Constrained - Adds left/right margin spaces for larger displays, scaled based on screen resolution
• Full - Removes all padding and pushes the content to 100% of the available space (except for the home screen)

Note:
On smaller screens with less horizontal resolution, content is always set to 100% of available space regardless of the Content Width setting chosen.

Font Stack

Select the preferred font stack from the drop-down list.
Options are:

• Sans Serif - (default) uses the system defined preferred sans serif font.
• Serif - uses the system defined preferred serif font.
• Monospace - uses the system defined preferred monospace font.
• Classic - retains the same font stack from previous versions of SmartIQ.

Page Title

Page title appears on the top of every form page.

Question Text

Question text color including the various position options of top, left or floating.

Body Text

Defines the color of input text and labels, as well as any other text not associated with another text style.

Link Text

Anchor link text color includes project links on the home page, link buttons (such as save), and any anchors in labels.

Link Hover

Provides a hover color for anchor links.

Heading Weights

Select how light or heavy to make headings appear, including page, section and column titles.
Options are:

• Light

• Normal (default)

• Heavy

Error

Sets the color used for validation or other errors that may be displayed in the page navigation, input field or finish page.

Warning

Color for warning labels and messages.

Success

Color for success labels and messages such as form submitted toast messages.