› User interface › Themes › Create a theme

Create a theme

Use the following procedure to create themes to use across your sites.

  1. Navigate to User interface > Themes.
  2. Click New.
  3. Configure the general properties.

    Name

    A name for the theme, such as MyTheme.

    Category

    A category for the theme.

    Description

    Optional. A description for the theme, such as "A theme for a Customer Onboarding solution."

    Desktop style

    A theme to apply for the desktop forms. (Default: TotalAgilityWorkspace)

    Available themes are Classic, Crisp, Crisp Touch, Gray, Neptune, Neptune Touch, TotalAgilityWorkspace, Triton, and Aria.

    Touch style

    A theme to apply for the touch forms. (Default: TotalAgilityWorkspace)

    Available themes are iOS, Material, Neptune, TotalAgilityWorkspace, and Triton.

    Override font/background

    If selected, allows you to set the Background (page color) and Font style. Your settings override the default font and background color.

    Stylesheet

    A style sheet to use for the theme. Alternatively, type in the name of the style sheet. Make sure the name of the style sheet is correct for it to work at runtime.

    For a TotalAgility Workspace theme that is imported from the Kofax TotalAgility Workspace package, the Touch and Desktop styles default to TotalAgility Workspace, and the style sheet defaults to TotalAgilityWorkspace.css.

    Display desktop right to left

    If selected (default: clear), the content is displayed from right to left when you view forms or TotalAgility Workspace using a site that is using the theme.

    This option is not supported on tablet or mobile.

  4. To configure the styles for the basic controls, menu, header, footer, and more, click the CSS tab.
  5. By default, all control types and the associated settings are displayed. To filter the list by control type, on the Control list, select a control type, such as Basic.

    The basic controls are displayed.

  6. On the CSS class list for the control, select a style.

    This style will be applied to the selected control.

    The available control types are:

    Control type

    Description

    Basic

    A style for the Calendar, Check box, Dropdown, Horizontal rule, Hyperlink, Radio button list, and Text box controls.

    When you apply a style to a calendar, it only applies to the dropdown list and not to the calendar selection popup. To display the button in a different color from the calendar, do the following in the CSS file:

    1. Remove the line: 

      display: inline-block.

    2. Add the following code snippet to change the color of the button: 

      .x-datepicker .x-btn
{
background: black !important;
color: red !important;
}

    This style will be applied to all calendars.

    Button

    A style for Calendar, File upload, Image, Picker, Primary button, Success button, Alert button, Standard, Table, and Toolbar.

    Capture

    A style for Confirmed fields, Not confirmed fields, Error messages, Selected node, Multi-select node, and Status bar.

    KCM

    A General style for the border color of the KCM control and the Group header style for the header of group boxes.

    Cell

    A style for the collapsible Cell header and Cell general.

    Footer

    A style for the Footer.

    Header

    A style for the Header.

    Label

    A style for the Basic label, Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, and Heading 6.

    List

    A style for the Alternate row, Row, and the Selected row of the list.

    Menu

    A style for the Horizontal default menu and Horizontal hover style, Vertical default menu, and Vertical hover style.

    Tab A style for Content style, Default tab, Header/footer style, Hover style, and Selected tab.

    Table

    A style for the Alternate row, Background color, Default row, Frame, Header, and Selected row of the table.

    • On upgrading TotalAgility without importing the Workspace package, the 'Vertical default' style behaves the same as the 'Horizontal default' style, and the 'Vertical hover style' behaves the same as the 'Horizontal hover style.'

    • On upgrading TotalAgility by importing the Workspace package, the TotalAgility Workspace theme will have the vertical menu style and all the CSS styles are applied.

    • When you view the navigation on a desktop, mobile or tablet device (non-touch forms only), and a theme has been defined for the horizontal and vertical navigation, the styles defined for each are applied.

  7. Similarly, apply the style for other controls as needed.
  8. Click Save.

How to: