Welcome > Form Designer module > Themes > Create a theme

Create a theme

See Themes.

  1. On the Home page, click Form Designer > Theme.
    The Themes page appears.
  2. On the General tab, configure the following for the theme:
    1. Select a Category. (Default: Working category)
    2. Enter a Name and Description.
    3. On the Desktop Style list, select a style to apply to the desktop forms. (Default: TotalAgilityWorkspace)

      Available options are:

      • Classic

      • Crisp

      • Crisp Touch

      • Gray

      • Neptune

      • Neptune Touch

      • TotalAgilityWorkspace

      • Triton

      Note A theme imported from an earlier version of TotalAgility 7.5.0, or available on upgrading to TotalAgility 7.5.0, defaults to Classic for the desktop style.
    4. On the Touch Style list, select a style to apply to the touch forms (Default: TotalAgilityWorkspace).

      Available options are:

      • iOS

      • Material

      • Neptune

      • TotalAgilityWorkspace

      • Triton

      Note

      • A theme imported from an earlier version of TotalAgility 7.5.0, or available on upgrading to TotalAgility 7.5.0, defaults to Triton for the touch style.

      • If you change the desktop or touch theme to TotalAgilityWorkspace theme, make sure you change the style sheet to TotalAgilityWorkspace.css.

    5. To override the font and background color in the style with your own settings, click Yes for Override Font/Background (default: No) and select the background (page color) and the font style.
    6. To set a Background color, click the Down arrow and select the color to use. (Default: White)
    7. To set a Font Style, click the Down arrow and select the font style. (Default: Verdana)

      Available font styles are:

      • Arial

      • Arial Black

      • Comic Sans MS

      • Courier New

      • Georgia

      • Lucida Grande

      • Lucida Grande Unicode

      • Noto Sans

      • Times New Roman

      • Trebuchet MS

      • Verdana

    8. Consume the style sheet in the Style Sheet box. 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.
      Note For a TotalAgilityWorkspace theme that is imported from the TotalAgility Workspace package, the Touch and Desktop styles default to TotalAgilityWorkspace, and the style sheet defaults to TotalAgilityWorkspace.css.
  3. On the CSS tab, configure the following:
    1. In the Basic Controls group, select the style for Calendar, Check Box, Dropdown, Horizontal Rule, Hyperlink, Radio Button List and Text Box, as needed.
      When you apply a style to a calendar, it only applies to the drop-down list and not to the calendar selection popup. To display the button different 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.

    2. In the Buttons group, select the style for the following buttons: Standard, Image, Calendar, File Upload, Table, Picker, Toolbar and Primary Button.
      Note You can specify hover and active selectors for different background colors when you hover on a toolbar button or make the button active. Do the following in the CSS file: 

      .ToolBarButton {
    background-color: green;       /* default background */
}

.ToolBarButton: hover {
    background-color: greenyellow;      /* background when hovered*/
}

.ToolBarButton: active {
    background-color: darkslategrey;   /* background when activated/pressed */
}

    3. In the Menu group, select the style for the Default menu and Hover.
    4. In the Cell group, select the Cell Header for the collapsible cell header and Cell General.
    5. In the Table group, select the style for the Header, Frame, Default Row, Alternate Row and Selected Row of the table.
    6. In the Tabs group, select the style for the Default tab, Hover, Selected tab, Content Style and the Header/Footer Style for the tab.
    7. In the Labels group, select the style for Basic Label, Heading 1, Heading 2, Heading 3, Heading 4, Heading 5 and Heading 6.
    8. In the Header/Footer group, select the style for the Header and Footer.
    9. In the List group, select the style for the Row, Alternate Row and the Selected Row.
    10. In the Capture group, select the style for Error messages, Confirmed fields, Non-confirmed fields, Status Bar, Selected Node and Multi-Select Node.
    11. In the CCM group, select the General style for the border color of the CCM control and Group Header style for the header of group boxes.
  4. Click Save.