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:
Every task bar carries the base class gantt_task_line; type and state add further classes:
| CSS Class | Applied To | Description |
|---|
gantt_bar_task | Task bars of type task | Applied to standard leaf-level task bars. |
gantt_bar_project / gantt_project | Task bars of type project | Applied to summary/parent task bars with expandable children. |
gantt_bar_milestone / gantt_milestone | Task bars of type milestone | Applied to diamond-shaped milestone markers. |
gantt_dependent_task | Task bars participating in dependencies | Applied to tasks that have dependency links. |
gantt_task_inline_color | Task bars with a per-item color | Applied when an item or status color overrides the default bar color (the color is set inline). |
gantt_task_progress | Progress fill element inside a bar | The inner element representing the completed portion of the task. |
rangeConflict | Task bars and parent bars | Applied when a child task’s dates extend beyond its parent’s date range. |
overdue | Task bars at risk | Applied when the task end date is in the past. |
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 Class | Applied To | Description |
|---|
today | Today marker | Applied to the vertical line marking the current date |
plan | Plan markers | Applied to markers synced from Polarion plan boundaries (iteration start/end dates) |
gantt_marker | All markers | Base class applied to all custom markers |
| Custom color class | Custom markers | Named 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
Each resource allocation cell in the resource view is a marker element carrying the base classes gantt_resource_marker resource_marker:
| CSS Class | Applied To | Description |
|---|
gantt_resource_marker | Resource marker cells | Base class on every resource allocation marker. |
resource_marker | Resource marker cells | Base class on every resource allocation marker. |
resource_marker_variable_color | Resource marker cells | Added when the marker color is computed from the allocation value (the default coloring mode). |
How Marker Colors Are Applied
The marker color is not carried by discrete state classes. Instead, each marker is assigned an inline --marker_color CSS custom property whose value is computed from the resource’s allocation relative to its capacity — shading from a within-capacity color toward an over-allocation color. For example, a live marker renders as:
<div class="gantt_resource_marker resource_marker resource_marker_variable_color"
style="--marker_color:#51c185">5.8</div>
resourceMarkersColorConfig object (its ok/over colors or its colors/percentages thresholds), not by editing the marker classes. See Configure Resource Allocation Marker Colors.
Resource Marker Styling Example
/* Override the text color on resource markers */
.resource_marker {
color: #ffffff;
}
/* Force a fixed color, ignoring the computed --marker_color */
.resource_marker_variable_color {
background-color: #e53935 !important;
}
Timeline Cell CSS Classes
Cells in the chart’s timeline area carry classes used for the grid background and for highlighting non-working time:
| CSS Class | Applied To | Description |
|---|
gantt_task_cell | Each timeline background cell | Base class on every timeline grid cell. |
weekend | Timeline cells on non-working days | Added (alongside gantt_task_cell) to cells that fall on a non-working day — weekends, and holidays/time-off when a working calendar is loaded. Target it to restyle the off-day highlight. |
/* Customize the non-working-day shading */
.gantt_task_cell.weekend {
background-color: #f5f5f5;
}
DOM Structure Overview
Structural Element IDs
The Gantt widget uses the following stable DOM element IDs for CSS targeting:
| Element | Purpose |
|---|
| Main container | Root element containing the entire Gantt widget |
| Toolbar container | Contains all toolbar buttons and controls |
| Footer container | Contains version display, item count, filter indicators, and error badges |
| Resource view panel | Container for the resource allocation view below the Gantt chart |
| Export panel | Container for the PNG export and print UI |
Conflict and State Indicators
| CSS Class | Trigger | Visual Effect |
|---|
| Range conflict class | Child task dates exceed parent date range during drag | Red/highlighted task bar border |
| Edit mode class | Gantt is in edit mode | Edit-specific UI elements visible |
| Class Category | Description |
|---|
| Form container classes | Applied to the lightbox dialog wrapper |
| Work item form type | Applied when editing a work item |
| Plan form type | Applied 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.overdue {
border: 2px solid #e53935;
}
/* Custom today marker */
.gantt_marker.today {
background-color: #ff7043;
width: 3px;
}
/* Dim resource allocation markers */
.resource_marker {
opacity: 0.6;
}
</style>
Related Pages
