Style Customization

Introduction

Portal Components use CSS custom properties (variables) for styling, allowing you to customize colors, fonts, spacing, and other visual aspects without modifying component code. Override these CSS variables in your own stylesheet to match your corporate design or application theme.

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.