CSS Classes and DOM Structure - Nextedy Documentation

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>

The color scale itself is configured through the 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;
}

See Color and Styling Properties for configuring marker colors via widget parameters.

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

The lightbox (inline task editor) uses dedicated CSS classes for form layout:

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>

Color and Styling Properties — color configuration via administration properties
Item Color Legend — task bar color coding reference
Resource View Parameters — resource marker configuration
Error Messages and Diagnostics — error indicator CSS classes

​Task Bar CSS Classes

​Marker CSS Classes

​Marker Styling Example

​Resource View CSS Classes

​How Marker Colors Are Applied

​Resource Marker Styling Example

​Timeline Cell CSS Classes

​DOM Structure Overview

​Structural Element IDs

​Conflict and State Indicators

​Lightbox Form Classes

​Configuration Example

​Related Pages

Task Bar CSS Classes

Marker CSS Classes

Marker Styling Example

Resource View CSS Classes

How Marker Colors Are Applied

Resource Marker Styling Example

Timeline Cell CSS Classes

DOM Structure Overview

Structural Element IDs

Conflict and State Indicators

Lightbox Form Classes

Configuration Example

Related Pages