Overview

Forms in ITAM are automatically assigned a standard theme, which gives them an attractive look and feel for your users. You may, however, find that you would like to make some adjustments or perhaps completely change the visual look of the form, possibly to match your company standards or branding. The Theme Editor allows you to customize nearly every aspect of a form's visual appearance, providing a user-friendly set of tools to help you achieve just the look you want.

In this guide section, we will cover the Theme Editor and how it allows you to create, change, and delete themes for displaying forms.

Accessing the Theme Editor

To access the Theme Editor, click the Edit Themes button on the main menu of the Forms Manager to open the Theme Editor.

 

Editing Themes

The Theme Editor displays a sample form as a placeholder with various elements that can be adjusted with the manager's features. As you click the buttons along the top of the editor, sections of the form will be overlaid with buttons representing a section of the layout that can have a theme applied to it. Each section will then expose a set of Design Widgets, represented by a set of buttons with a letter in the middle. Clicking on one of the buttons will display the widget for managing that section.

Design Widgets

Each configurable section, accessed by the grey menu bar at the top of the Editor interface, is loaded with customizable design control elements called design widgets. These design widgets allow you to visually control the details of the appearance of specific types of items within the form's design. The design widgets are denoted by an arrow figure and a large dotted letter and are hidden until activated.

• Click on the large dotted letters to display a design widget.
• Select and adjust from the available design widget options until that aspect of your form looks as anticipated.

 

Design Control Screens

In the screenshot above, we see that there are six (6) primary theme design control functions:

Logo

The logo option controls what logo is displayed on your form

Backgrounds

The background option exposes design widgets for various areas of the form. These will let you select a color or other background pattern or image for that section.

Fonts

The font option allows you to control the fonts used, style, size, and color, in several areas of a form.

Borders

The Borders option allows you to control the type, style, and color of the borders around various types of content in a form.

Shadows

The Shadows option gives you tools to add a drop shadow to your main form area, helping your form stand out from the background behind it.

Buttons

Allows you to control the Form Submit button and how an image or text represents it.

Selecting each option opens an interactive and intuitive design control screen with specialized design widgets to allow you to customize selected design elements visually.

Sidebar Theme Control Pane

A gray drop-down arrow is located at the far top-right corner of the Theme Editor page. Clicking this arrow displays the Sidebar Theme Control Pane, as seen below.

Although the function of the available features is intuitive, three features deserve further discussion.

Create New Theme

There are a few important operational points that the Theme Designer/Editor should be aware of when editing an existing theme or creating a new one.

• Selecting the Create New Theme option from the Sidebar Theme Control Pane puts the Theme Editor into "Create New Theme" mode. This is only obvious from the message at the top of the screen, which reads, "Create a new theme for your forms."

• After selecting the Create New Theme option, the theme is switched to the default ITAM theme.

• Selecting one of the Built-In themes while in Create New Theme mode will apply the settings of that theme to the new theme. This may be a faster way to create a theme if one of the built-in themes has many desired design features.

• Selecting one of the themes from the Your Themes list does not apply that theme's settings to the new theme. Instead, the chosen theme will be opened for editing, and any changes will be applied.

• To create a new theme from an existing custom theme, select the theme and then choose Duplicate from the Sidebar Theme Control Pane.

Advanced CSS

The Advanced CSS option allows theme creators with knowledge of CSS to customize even more. Clicking on the option presents a text editor, allowing the theme creator to add CSS manually.

The Advanced CSS option allows theme creators with knowledge of CSS to customize even more. Clicking on the option presents a text editor, allowing the theme creator to add CSS manually.

Theme Permissions and Sharing

Unlike forms, themes do not have an advanced permissions scheme. A user granted the “Create New Theme” privilege can only create a theme. By default, any theme created by a user will only be available to that user unless the user chooses to share the theme with others.

• To share a theme with other users, select the theme from the Sidebar Theme Control Pane. This will open the Theme in the Theme Editor.

• Then, select the Share This Theme option from the Sidebar Theme Control Pane. A confirmation screen will be displayed. Click Save and Share this theme to finish sharing the theme.

 

Note that when a theme is shared, other users of the ITAM system can use it within their forms; however, only the theme owner can edit the theme. This is important if a particular individual or group will manage theme design for the organization or project.