Cora Knowledge Center

Support

Flowtime design variables

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: <local maching>\Program Files\PNMsoft\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