> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nextedy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS Classes and DOM Structure

> Nextedy GANTT applies CSS classes to DOM elements for task bars, markers, resource allocation indicators, and structural components.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

<Info title="Verify in application">
  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.
</Info>

## 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.                                                  |

<Tip title="Custom Task Styling">
  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.
</Tip>

## 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

```css theme={null}
/* 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:

```html theme={null}
<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](/gantt/guides/visualization/resource-marker-colors).

### Resource Marker Styling Example

```css theme={null}
/* 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](/gantt/reference/configuration/color-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](/gantt/guides/calendars/load-holidays) is loaded. Target it to restyle the off-day highlight. |

```css theme={null}
/* Customize the non-working-day shading */
.gantt_task_cell.weekend {
    background-color: #f5f5f5;
}
```

## DOM Structure Overview

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/Jklvz9qm2AdmIvBG/gantt/diagrams/reference/css-classes/diagram-1.svg?fit=max&auto=format&n=Jklvz9qm2AdmIvBG&q=85&s=73bc93417820910d49c91fc472cdd9b4" alt="diagram" style={{ maxWidth: "500px", width: "100%" }} width="500" height="280" data-path="gantt/diagrams/reference/css-classes/diagram-1.svg" />
</Frame>

## 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 |

## Lightbox Form Classes

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:

```html theme={null}
<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

* [Color and Styling Properties](/gantt/reference/configuration/color-properties) -- color configuration via administration properties
* [Item Color Legend](/gantt/reference/item-color-legend) -- task bar color coding reference
* [Resource View Parameters](/gantt/reference/widget-parameters/resource-view) -- resource marker configuration
* [Error Messages and Diagnostics](/gantt/reference/error-messages) -- error indicator CSS classes

<LastReviewed date="2026-07-07" />