1.3.2.7. Portal Appearance

The Settings → Portal Appearance page can be reached by clicking the menu item.

IMPORTANT:

To improve the user experience and make Portal more accessible to people with disabilities, the Portal web content (text, images, markup that defines structure) was optimized to match the Web Content Accessibility Guidelines.

Portal Appearance allows the user to customize the appearance of the Portal component by choosing different colors, styles etc.

There are several ways in which the user may customize the Portal Appearance:

Customize Portal Color
Customize Portal Appearance via Portal Design Mode
Customize Portal Appearance via CSS editor

Customize Portal color

Users can change only the main color of the Portal by using the Colors drop-down list for basic colors or customizing a color by clicking on Custom Color button.

the Colors button

After a color is selected from the Colors drop-down list, click on Save Changes to apply the current setting for all users of the current tenant. If you have multiple tenants you can set a different color for each of them. No restart is required in order the chosen color to be applied.

the Custom Color button that opens a Choose appearance color window

After a color is selected, click on Save Changes to apply the current setting for all users of the current tenant. If you have multiple tenants you can set a different color for each of them. No restart is required in order the chosen color to be applied.

Customize Portal Appearance via Portal Design Mode

The user can customize Portal per Tenant via Design Mode by clicking Go To Portal Design Mode button. The GUI width is now set on Portal Custom Design, the user can set exactly the modal width in px.

Loaders Configuration: The user can set the image for the parameters and workflows loader.
Restore to default
Exit Design Mode

Heading Custom Style

Navigation Custom Style

Panel Header Custom Style

Category Custom Style

Table Custom Style

Customize Portal Appearance via CSS editor

For a more advanced customization, the content of the CSS file can be edited. All changes will be applied after clicking Save Changes button. To go back to the default theme, click the Restore button to restore to the default style and then click on Save Changes button to apply the default theme.

Customization that can be done via CSS file can be categorized into:

Simple customization
Complex customization

Simple customization - Change Title

Title can be change from the CSS file by modifying the variable --portal-title

Simple customization - Font customization

The fonts used can be found and change from the CSS file as well.

Simple customization - Status classes customization

All the workflow status colors can be customizable from CSS style. The classes used are:

Workflow completed: class used status-completed
Workflow aborted: class used status-aborted
Workflow terminated: class used status-terminated
Workflow in waiting for approval state: class used status-waitingForApproval
Workflow in waiting for more input state: class used status-waitingForMoreInput
Workflow in persisted state: class used status-persisted
Workflow in persisted until state: class used status-persistedUntil
Workflow with runtime error: class used status-runtimeError
Workflow in unhandled exception state: class used status-unhandledException
Workflow in expired state: class used status-expired
Workflow in started state: class used status-started
Workflow in stopping state: class used status-stopping

Complex customization - Change to full width

Flowster Studio Portal to be full width

To modify Flowster Studio Portal to be full width the following classes need to be change:

.containerWidth - uncoment width:100%

@media (min-width:...px) - change .navbar-fixed-top-custom width to 100%

Complex customization - Buttons customization

By default all buttons will look like hyperlink.The classes used for the customization are:

.btn-success,
.dt-button,
.btn-default,
.btn-primary,
.btn-danger,
.btn-secondary,
.btn-warning

Some of the buttons can be hidden. They will have special classes to do this:

Header - Language Button- class that can be use to hide the button is languageSpan
Workflows page - Update Workflowlist Button - class that can be use to hide the button is btn-update-workflow-list
History page - Listview button - class that can be use to hide the button is btn-list-view
History page - Chart view Button - class that can be use to hide the button is btn-chart-view
History page - Restart Button - class that can be use to hide the button is btn-restart_workflow
History page - Save state Button - class that can be use to hide the button is btn-saved-state
History page - Live Tracking Button - class that can be use to hide the button is btn-live-tracking
History page - Details Button - class that can be use to hide the button is btn-view-details

For example if the language button is not necessary in the CSS file for the corresponding class display:none; needs to be added and save.

After this is done the button will not appear in Portal.

Complex customization - Navigation bar customization

The following classes need to be change for the menu bar from Flowster Studio Portal:

to change the navbar color or other proprieties use class navbar-inverse.
to change the navbar active menu item color or other proprieties use class navbar-inverse ul.nav li.active a.
to change the navbar hover color or other proprieties use class navbar-inverse ul.nav li a:hover