Customizing the Header Bar in CDL

To modify the colors of header bar in CDL, change the headerBarTheme block elements such as headerBackgroundColor, tabsBackgroundColor.

You can change the colors of the header bar by modifying the config headerBarTheme CDL block. The theme elements in the block correspond to the different parts of the header bar.

Element	Description
headerBackgroundColor	The header area above the report tabs.
headerBottomLineColor	Separator line between the top header and the report tab area.
tabsBackgroundColor	The background of the report tab area.
tabsTextColor	The text colour of the report tabs.
activeTabColor	The colour of the indicator line below the report page indicating that it is the active (in view) tab.
showPageBreadcrumbs	Enabling page breadcrumbs in the report toolbar allows for easy navigation of reports when using subpages. See About Pages--Subpages to learn more.

The following CDL example sets the header bar colors to be the same as the example mentioned before.

config headerBarTheme {
  showPageBreadcrumbs: true
  headerBackgroundColor: #0e9aa7
  headerBottomLineColor: #039117
  tabsBackgroundColor: #4a4e4d
  tabsTextColor: #dfebf0
  activeTabColor: #f6cd61
}

Resulting header bar theme on a primary page with the above CDL code

Resulting header bar theme on a subpage with the above CDL code

To learn how to setup the Header theme in the user interface, see Header Settings.