Style Customization

How to customize

1. 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.

2. 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.