Using CSS on a Page

Overview

Apply custom or predefined CSS styles to Page Components to control layout, typography, color, spacing, and other visual properties. CSS offers a flexible way to standardize the look of Pages across the project or apply targeted visual tweaks to specific controls like Report Viewers, Panels, Buttons, and more.

There are two main ways to apply CSS to Pages:

• Predefined CSS Class Names within Style Sheets: Write and upload a CSS file that includes predefined class selectors. If written correctly, these styles will automatically apply to matching components when the Style Sheet is selected in the Page Designer. 
• Custom Class Names: Assign one or more custom class names to individual components using the CSS Class field in their properties. This allows for precise, targeted styling using reusable utility classes.

Uploading Custom CSS File

Before applying custom classes to a Page or it's control, upload the desired CSS file to the project:

1. Navigate to Manage > Configuration > Templates > CSS.
2. Upload your CSS file (e.g., ReportCSS). This file should contain class definitions that will be referenced in the Page.

Example CSS

/* Root Report Viewer styling */
.CustomStyledReport {
  background-color: #ffffff !important;
}

/* Cell styling */
.CustomStyledReport .dp-report-grid-viewer__cell,
.CustomStyledReport .dp-report-grid-viewer__cell-content {
  font-size: 16px !important;
  font-weight: normal !important;
  font-style: normal !important;
  color: #000000 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

/* Row height and layout */
.CustomStyledReport .dp-report-grid-viewer__header,
.CustomStyledReport .dp-report-grid-viewer__row-holder,
.CustomStyledReport .dp-report-grid-viewer__cell-content,
.CustomStyledReport .dp-report-grid-viewer__groupheader {
  min-height: 36px !important;
}

.CustomStyledReport .dp-report-grid-viewer__header {
  height: 36px !important;
  background-color: #c3377a !important;
}

/* Header name text styling */
.CustomStyledReport .dp-report-grid-viewer__header-name {
  font-size: 16px !important;
  font-weight: bold !important;
  font-style: normal !important;
  color: #ffffff !important;
  text-transform: none !important;
  text-decoration: none !important;
  line-height: 16px !important;
  white-space: normal !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-box-orient: vertical !important;
  display: -webkit-box !important;
  max-height: 32px !important;
}

/* Row styling */
.CustomStyledReport .dp-report-grid-viewer__row-holder {
  background-color: #ffffff !important;
}

.CustomStyledReport .dp-report-grid-viewer__row-holder:hover {
  background-color: #ffd966 !important;
}

.CustomStyledReport .dp-report-grid-viewer__row-holder--selected-background {
  background-color: #f5dae9 !important;
}

/* Border styling */
.CustomStyledReport .dp-report-grid--border {
  border-width: 0px !important;
  border-color: #ebebeb !important;
  overflow: hidden !important;
}

/* Footer */
.CustomStyledReport .dp-report-grid-viewer__footer {
  background-color: rgba(255, 255, 255, 0.4) !important;
}

/* Group header */
.CustomStyledReport .dp-report-grid-viewer__groupheader {
  background-color: #d6d6d6 !important;
  height: 36px !important;
}

/* Header interactivity (hover/active states) */
.CustomStyledReport .dp-report-grid-viewer__header-sortable-column:hover,
.CustomStyledReport .dp-report-grid-viewer__header-resizable:hover,
.CustomStyledReport .dp-report-grid-viewer__header-sortable-column--active,
.CustomStyledReport .dp-report-grid-viewer__header-resizable--active,
.CustomStyledReport .dp-report-grid-viewer__header-sortable-column:hover .dp-report-grid-viewer__icons-holder,
.CustomStyledReport .dp-report-grid-viewer__header-resizable:hover .dp-report-grid-viewer__icons-holder,
.CustomStyledReport .dp-report-grid-viewer__header-sortable-column--active .dp-report-grid-viewer__icons-holder,
.CustomStyledReport .dp-report-grid-viewer__header-resizable--active .dp-report-grid-viewer__icons-holder {
  background-color: #253167 !important;
}

.CustomStyledReport .dp-report-grid-viewer__header-sortable-column:hover .dp-report-grid-viewer__header-name,
.CustomStyledReport .dp-report-grid-viewer__header-resizable:hover .dp-report-grid-viewer__header-name,
.CustomStyledReport .dp-report-grid-viewer__header-sortable-column--active .dp-report-grid-viewer__header-name,
.CustomStyledReport .dp-report-grid-viewer__header-resizable--active .dp-report-grid-viewer__header-name {
  color: #ffffff !important;
}

/* Report title */
.CustomStyledReport .dp-report-header__title {
  font-size: 24px !important;
  font-weight: bold !important;
  font-style: normal !important;
  color: #c3377a !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

Applying CSS to a Page

Once the CSS file is uploaded:

1. Open the Page Designer.
2. In the Page Properties panel, go to the APPEARANCE section.
3. In the Style Sheets List, select the uploaded CSS file (e.g., ReportCSS).
   Important Note on Availability in Projects

   • For the Style Sheets list to appear in the Form Designer, the CSS file must be uploaded within the current Project. Only then can you select it from the checklist.
   • If a CSS file exists only at the System level (e.g., added outside the Project or inherited from a legacy conversion), it may still apply to components where a class name is manually entered. However, it won’t appear in the Style Sheets picker, and you won’t be able to assign it visually from the Designer.
   
4. Drag a Report Viewer control onto the Page.
5. Select the Report and expand the VIEW category in the properties panel.
6. In the Control CSS Class drop down, type or select one or more class names from the CSS file.
7. Save and Close the Page Designer and view the applied changes on the Folder the Page is applied to.