› 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.

    For a theme imported from an earlier version of TotalAgility 7.6.0, or available on upgrading to TotalAgility 7.6.0, the desktop style defaults to Classic. If you change the default style to TotalAgilityWorkspace, make sure you change the style sheet to TotalAgilityWorkspace.css.

    Touch style

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

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

    For a theme imported from an earlier version of TotalAgility 7.6.0, or available on upgrading to TotalAgility 7.6.0, the touch style defaults to Triton. If you change the default style to Kofax TotalAgility Workspace, make sure you change the style sheet to TotalAgilityWorkspace.css.

    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, 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.

    When upgrading to Kofax TotalAgility 7.6.0, the KCM General and Group header options are only available when you import the TotalAgilityWorkspace.css.

    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, 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 devices (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: