Skip to main content
This page documents CSS classes derived from source code constants. Class names are stable across versions, but inspect the DOM in your browser developer tools to confirm availability in your specific Gantt version.

​
Task Bar CSS Classes

Task bars in the Gantt chart receive CSS classes based on their type and state:
CSS ClassApplied ToDescription
Milestone classTask bars of type milestoneApplied to diamond-shaped milestone markers
Summary task classTask bars of type projectApplied to summary/parent task bars with expandable children
Leaf task classTask bars of type taskApplied to standard leaf-level task bars
rangeConflictTask bars and parent barsApplied when a child task’s dates extend beyond its parent’s date range
Risky classTask bars at riskApplied when the task end date is in the past
Unplanned classUnplanned task barsApplied to tasks with no scheduled dates
Use the task bar CSS classes to visually distinguish milestones from summary tasks and leaf tasks. For example, apply a different background color to milestone elements.

​
Marker CSS Classes

Timeline markers (vertical lines on the Gantt chart) receive type-specific CSS classes:
CSS ClassApplied ToDescription
todayToday markerApplied to the vertical line marking the current date
planPlan markersApplied to markers synced from Polarion plan boundaries (iteration start/end dates)
gantt_markerAll markersBase class applied to all custom markers
Custom color classCustom markersNamed CSS class (e.g. blue, red) assigned via marker configuration for custom appearance

​
Marker Styling Example

/* Style the today marker line */
.gantt_marker.today {
    background-color: #e53935;
    opacity: 0.8;
}

/* Style plan iteration markers */
.gantt_marker.plan {
    background-color: #3f51b5;
    border-left: 2px dashed #3f51b5;
}

/* Custom color class for a named marker */
.gantt_marker.blue {
    background-color: #039be5;
}

​
Resource View CSS Classes

Resource allocation markers in the resource view use color-coded CSS classes:
CSS ClassApplied ToDescription
marker_okResource marker cellsApplied when the resource is within capacity (allocated hours <= effective hours)
marker_overResource marker cellsApplied when the resource is over-allocated (allocated hours > effective hours)

​
Default Resource Marker Colors

ClassDefault ColorMeaning
marker_okGreen (#4CAF50)Resource is within capacity
marker_overRed/OrangeResource is over-allocated

​
Resource Marker Styling Example

/* Customize over-allocation marker color */
.marker_over {
    background-color: #e53935 !important;
    color: #ffffff;
}

/* Customize within-capacity marker color */
.marker_ok {
    background-color: #43a047 !important;
    color: #ffffff;
}
See Color and Styling Properties for configuring marker colors via widget parameters.

​
DOM Structure Overview

diagram

​
Structural Element IDs

The Gantt widget uses the following stable DOM element IDs for CSS targeting:
ElementPurpose
Main containerRoot element containing the entire Gantt widget
Toolbar containerContains all toolbar buttons and controls
Footer containerContains version display, item count, filter indicators, and error badges
Resource view panelContainer for the resource allocation view below the Gantt chart
Export panelContainer for the PNG export and print UI

​
Conflict and State Indicators

CSS ClassTriggerVisual Effect
Range conflict classChild task dates exceed parent date range during dragRed/highlighted task bar border
Edit mode classGantt is in edit modeEdit-specific UI elements visible
The lightbox (inline task editor) uses dedicated CSS classes for form layout:
Class CategoryDescription
Form container classesApplied to the lightbox dialog wrapper
Work item form typeApplied when editing a work item
Plan form typeApplied when editing a plan item in Plans Gantt mode

​
Configuration Example

Add custom CSS to a Polarion wiki page to override Gantt styles: 
<style>
/* Highlight overdue tasks */
.gantt_task_line.$risky {
    border: 2px solid #e53935;
}

/* Custom today marker */
.gantt_marker.today {
    background-color: #ff7043;
    width: 3px;
}

/* Hide resource view when within capacity */
.marker_ok {
    opacity: 0.6;
}
</style>
Source Code
  • prod-gantt-src/com.nextedy.polarion.gantt.client/src/js/lib/lightbox/util.js
  • prod-gantt-src/com.nextedy.polarion.gantt.client/src/js/generic/constants.js
  • prod-gantt-src/com.nextedy.polarion.gantt/src/com/nextedy/polarion/gantt/model/MarkerFactory.java
  • prod-gantt-src/com.nextedy.polarion.gantt.client/cypress/e2e/milestones/marker-colors.cy.ts
  • prod-gantt-src/com.nextedy.polarion.gantt.client/cypress/e2e/view/markersStyles.cy.ts