Style Customization
How to customize
You have to add a new css file to your resources and import it into your template.
Code Example:
<ui:composition template="/layouts/basic-10.xhtml"> <ui:define name="title">test</ui:define> <ui:define name="content"> <ic:com.axonivy.portal.components.ProcessHistory businessEntityId="alpha" chunkSize="12" scrollHeight="600" /> <h:outputStylesheet name="layouts/styles/process-history-customize.css" /> </ui:define> </ui:composition>
Note
You have to place your css file in a
<h:outputStylesheet />
below the component to override defined styles.Within this file you can override default css variables of components. For example, the --process-history-description-text-color:
:root { --process-history-description-text-color: red; }
List of css variables that you can override
Process Chain
Variable |
Default value |
Description |
---|---|---|
--process-chain-process-step-font-size |
12px |
Size of process step in of process chain component. |
--process-chain-body-background-color |
rgba(0,0,0,0) |
Background color of waiting circle process steps. |
--process-chain-menu-color |
var(--primary-color, hsl(195, 100%, 29%)) |
Color of process steps. |
--process-chain-link-color |
#D9DADA |
Link color between process steps. |
--process-chain-current-circle-horizontal-step-title-font-weight |
bold |
Font weight of circle horizontal process step title. |
--process-chain-current-circle-vertical-step-title-font-weight |
bold |
Font weight of circle vertical process step title. |
--process-chain-current-line-horizontal-step-title-font-weight |
bold |
Font weight of line horizontal process step title. |
--process-chain-current-line-vertical-step-title-font-weight |
bold |
Font weight of line vertical process step title. |
Process History
Variable |
Default value |
Description |
---|---|---|
--process-history-header-border-bottom-color |
#D9DADA |
Color of bottom header’s border. |
--process-history-unsortable-header-font-size |
1.4rem |
Text size of cell header that is unsortable. |
--process-history-unsortable-header-text-color |
#9C9D9D |
Text color of cell header that is unsortable. |
--process-history-description-text-color |
#9C9D9D |
Text color of item description. |
--process-history-item-background-color |
rgba(var(--white, #000000), 0.2) |
Background color of item. |
--process-history-item-border-bottom-color |
#D9DADA |
Color of bottom item’s border. |
--process-history-item-border-hover |
1px solid #90DDE9 |
Hover color of item’s border. |
--process-history-item-background-hover |
rgba(144, 221, 233, 0.24) |
Hover background color of item. |
--process-history-state-in-progress-color |
rgba(7, 140, 255, 1) |
Color of in-progress state. |
--process-history-state-done-or-resume-color |
#4EB41C |
Color of done or resumed state. |
--process-history-empty-message-label-color |
hsl(64, 1%, 48%) |
Text color of message label when there is no item. |
--process-history-empty-message-label-font-size |
1.2rem |
Font size of of message label when there is no item. |
Process Viewer
Variable |
Default value |
Description |
---|---|---|
--process-viewer-data-has-error-message-font-weight |
bold |
Error message font weight. |
--process-viewer-data-has-error-message-font-size |
1.2rem |
Error message font size. |
--process-details-column-title-font-size |
0.85rem |
Process details column title font size. |