Genpact Cora Knowledge Center

Support

Flowtime design variables

Design variables are valid for Cora SeQuence V8.7–V9.x only.

Starting with V8.7, Flowtime uses a new theme: Cora. You can customize the new theme using two sets of variables: 

  • CustomPortalVariables.less: Includes variables that change the UI elements in the Flowtime website.
  • CustomWorkflowsExplorerVariables.less: Includes variables that change the elements on the left panel and top menu of form pages (marked in red in the screenshot on the left).

File location

VersionLocation
Starting V8.7<server name>\Program Files\PNMsoft\Shared Resources\Themes\Cora
V9.xC:\inetpub\wwwroot\Cora SeQuence\Flowtime\Shared Resources\Themes\Cora

List of common variables

There are more than 900 variables that you can use to change Flowtimes design elements. 

For more information on how to apply these variables, see the Redesign Flowtime using variables.

CustomPortalVariables.lessCustomWorkflowExplorerVariables.less

@primary-color

@primary-hover-color

@widget-loading-image

@portal-page-wrapper-bg-color

@portal-page-font-family

@portal-content-header-bg-color

@portal-content-header-title-color

@portal-content-header-title-font-weight

@portal-content-header-title-icon-primary-color

@portal-content-header-title-icon-secondary-color

@portal-header-bg-color

@portal-header-box-shadow

@portal-header-user-delegation-text-color

@portal-header-user-delegation-username-color

@portal-header-dropdown-content-bg-color

@portal-header-dropdown-content-hover-bg-color

@portal-header-menu-link-color

@portal-header-menu-active-box-shadow

@portal-header-menu-link-hover-color

@portal-header-menu-link-hover-color

@portal-header-invisible-menu-link-color

@portal-header-invisible-menu-link-hover-color

@portal-content-header-bg-color

@portal-logo-image-rtl

@portal-logo-image

@portal-menu-item-color

@portal-menu-item-active-bg-color

@portal-menu-item-active-color

@portal-menu-item-hover-bg-color

@portal-menu-separator-bg

@portal-menu-image

@portal-menu-collapsed-bg-color

@portal-menu-active-bg-color

@portal-menu-aggregation-color

@portal-menu-aggregation-bg-color

@portal-menu-box-shadow

@portal-hotops-selector-active-color

@portal-error-page-title-color: green;

@portal-error-page-color: red;

@portal-settings-image

@portal-error-sorry-image

@portal-header-dropdown-content-color

@new-process-workflows-panel-icon-primary-color

@new-process-workflows-panel-icon-secondary-color

@new-process-workflows-item-bg-color

@new-process-workflows-item-separator-bg-color

@new-process-workflows-item-description-color

@new-process-workflows-item-start-color

@new-process-workflows-item-start-bg-color

@new-process-workflows-item-start-hover-bg-color

@new-process-categories-workflows-bg-color

@new-process-categories-item-text-color

@new-process-categories-item-container-bg-color

@new-process-categories-item-active-bg-color

@new-process-categories-item-active-color

@new-process-categories-item-container-bg-color

@new-process-categories-item-container-hover-bg-color

@new-process-categories-panel-icon-primary-color

@new-process-categories-panel-icon-secondary-color

@new-process-categories-content-load-more-color

@new-process-categories-content-bullet-bg-color

@new-process-categories-content-description-color

@new-process-categories-content-item-hover-color

@active-processes-item-text-color

@active-processes-item-hover-color

@active-processes-item-description-color

@active-processes-item-bullet-bg-color

@mostly-used-processes-bg-color

@mostly-used-processes-subtitle-color

@mostly-used-processes-item-text-color

@mostly-used-processes-item-text-hover-color

@user-preferences-button-image

@user-preferences-popup-titlebar-bg-color

@user-preferences-popup-title-color

@delegation-header-bg-color

@delegation-header-text-color

@delegation-user-title-color

@delegation-grid-row-color

@delegation-grid-header-bg-color

@delegation-grid-header-text-color

@delegation-grid-process-name-color

@delegation-header-image

@delegation-bg-color

@grid-bg-color

@grid-alt-bg-color

@grid-sort-color

@grid-header-link-color

@grid-header-non-link-color

@grid-header-bg-color

@grid-row-selected-color

@grid-row-selected-bg-color

@grid-toolbar-container-bg-color

@grid-toolbar-delegation-text-color

@grid-menu-button-action-bg-color

@grid-menu-button-action-hover-bg-color

@grid-menu-button-disabled-bg-color

@grid-menu-button-bg-color

@grid-menu-button-hover-bg-color

@grid-menu-button-after-color

@grid-row-hover-bg-color

@grid-menu-item-hover-color

@grid-norecords-bg-color

@grid-toolbar-table-bg-color

@grid-toolbar-action-strip-bg-color

@grid-toolbar-item-color

@grid-toolbar-item-bg-color

@grid-toolbar-item-hover-color

@grid-view-switch-label-bg-color

@grid-view-switch-label-color

@grid-view-switch-active-bg-color

@grid-view-switch-active-box-shadow

@grid-column-drag-color

@grid-pager-info-color

@grid-filter-link-color

@grid-select-all-panel-bg-color

@grid-column-flag-loading-image

@grid-column-flag-image

@grid-column-flagon-image

@grid-column-important-image

@grid-column-attachment-image

@grid-column-duealert-green-image

@grid-column-duealert-red-image

@grid-column-duealert-yellow-image

@grid-menu-fetch-image

@grid-menu-return-image

@grid-menu-task-unread-image

@grid-menu-task-read-image

@grid-menu-message-unread-image

@grid-menu-message-read-image

@grid-norecords-instances-image

@grid-norecords-cases-image

@grid-norecords-bg-color

@grid-norecords-messages-image

@grid-context-menu-button-image

@grid-refresh-button-image

@grid-export-button-image

@grid-clear-filter-button-image

@grid-search-button-image

@grid-open-button-image

@grid-close-button-image

@grid-clear-search-button-image

@grid-new-process-button-image

@grid-share-button-image

@grid-unshare-button-image

@grid-filter-button-image

@grid-toolbar-clear-button-image

@grid-message-box-error-image

@new-process-workflows-item-title-hover-color

@primary-color

@primary-hover-color

@trace-action-user-cell-color

@trace-action-table-bg-color

@social-features-text-color

@choose-recipients-recipient-bg-color

@choose-recipients-add-image

@choose-recipients-remove-image

@choose-recipients-add-image-rtl

@choose-recipients-remove-image-rtl

@workflow-explorer-properties-title-color

@workflow-explorer-properties-grid-bg-color

@workflow-explorer-tree-node-a-hover-bg-color

@workflow-explorer-tree-node-a-hover-color

@workflow-explorer-tree-node-a-color

@workflow-explorer-tree-node-selected-bg-color

@workflow-explorer-tree-node-selected-color

@workflow-explorer-tree-node-selected-hover-color

@workflow-explorer-tree-context-menu-color

@workflow-explorer-top-bar-bg-color

@workflow-explorer-top-bar-link-color

@workflow-explorer-dialog-header-bg-color

@workflow-explorer-dialog-header-text-color

@workflow-explorer-message-details-cell-color

@workflow-explorer-content-frame-dialog-bg

@workflow-explorer-stage-item-color

@workflow-explorer-stage-item-active-color

@workflow-explorer-stage-item-active-bg-color

@workflow-explorer-stage-item-wrapper-completed-color

@workflow-explorer-stage-item-wrapper-bg

@workflow-explorer-stage-item-wrapper-completed-after-bg

@workflow-explorer-stage-item-bg

@workflow-explorer-stage-item-wrapper-completed-bg