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

# Apply Custom CSS to the Gantt Widget

> Customize the visual appearance of the Nextedy GANTT chart by injecting CSS styles through Polarion script block widgets on the same page.

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>;
};

## How CSS Styling Works

The Gantt chart renders inside an iframe embedded in your Polarion wiki page. CSS styles defined in a **Script block** widget on the same page are automatically copied into the Gantt iframe, allowing you to override default styling for task bars, text, grid columns, and other visual elements.

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/DDjWgCW2DWY5biNv/gantt/diagrams/guides/integration/custom-css-styling/diagram-1.svg?fit=max&auto=format&n=DDjWgCW2DWY5biNv&q=85&s=ac044ce7caf82b9ee9e62b6200ab5322" alt="diagram" style={{ maxWidth: "660px", width: "100%" }} width="660" height="80" data-path="gantt/diagrams/guides/integration/custom-css-styling/diagram-1.svg" />
</Frame>

<Steps>
  <Step title="Add a Script Block Widget">
    1. Open your Gantt wiki page in edit mode
    2. Add a **Script - block** widget to the page (from the Widgets panel)
    3. Place it anywhere on the page (it does not need to be adjacent to the Gantt widget)
  </Step>

  <Step title="Add CSS Styles">
    Insert your CSS inside a `<style>` tag within the script block. Common customizations are listed below.

    ### Change Right-Side Text Appearance

    Adjust the color, size, and position of text displayed to the right of task bars:

    ```html theme={null}
    <style>
    .gantt_side_content.gantt_right {
        bottom: 0px;
        top: -5px;
    }

    .gantt_task_line .gantt_side_content {
        color: green;
        font-size: 10px;
    }
    </style>
    ```

    * **Positioning**: Modify `top` and `bottom` values to adjust vertical alignment
    * **Appearance**: Customize `color` and `font-size` to match your style

    ### Change Font Color of Task Labels

    ```html theme={null}
    <style>
    .gantt_task_line .gantt_task_content {
        color: #333333;
    }
    </style>
    ```

    ### Style Completed Items with Strikethrough

    Use an item script to add a CSS class to completed items, then target that class:

    ```html theme={null}
    <style>
    .gantt_task_line.completed-task .gantt_task_content {
        text-decoration: line-through;
    }
    </style>
    ```

    <Tip title="Combine CSS with item scripts">
      For dynamic styling based on work item properties (e.g., status, priority), use an item script to set a CSS class on the task, then target that class in your CSS. See [Write Item Scripts](/gantt/guides/scripting/item-script-basics) for details.
    </Tip>
  </Step>

  <Step title="Adjust Row and Task Heights">
    Row and task heights are controlled via the Gantt Config Script (not CSS). Navigate to the widget parameters, open **Advanced > Gantt Config Script**, and add:

    ```javascript theme={null}
    gantt.config.task_height = 20;
    gantt.config.row_height = 22;
    ```

    | Property      | Description                              | Recommendation                         |
    | ------------- | ---------------------------------------- | -------------------------------------- |
    | `task_height` | Height of the task bar in pixels         | Set slightly smaller than `row_height` |
    | `row_height`  | Height of each row in the grid and chart | Minimum 2px more than `task_height`    |

    <Warning title="Task height must be smaller than row height">
      If `task_height` is equal to or greater than `row_height`, task bars may overlap or render incorrectly.
    </Warning>
  </Step>
</Steps>

## Common CSS Targets

| CSS Selector           | Element                  | Use Case                    |
| ---------------------- | ------------------------ | --------------------------- |
| `.gantt_task_line`     | Task bar container       | Background color, borders   |
| `.gantt_task_content`  | Text inside task bar     | Font size, color, alignment |
| `.gantt_side_content`  | Text beside task bar     | Right-side labels           |
| `.gantt_tree_content`  | Grid cell text           | Grid column font styling    |
| `.gantt_task_progress` | Progress fill inside bar | Progress bar color          |

<Warning title="CSS changes may break on upgrade">
  Custom CSS relies on internal CSS class names that may change between Gantt versions. Test your custom styles after each upgrade and adjust selectors as needed.
</Warning>

## Verification

You should now see:

* The Gantt chart renders with your custom styles applied
* Text colors, font sizes, and positioning match your CSS definitions
* Row and task heights reflect your Gantt Config Script settings

## See Also

* [Configure Item Colors](/gantt/guides/visualization/configure-colors)
* [Configure Right-Side Text on Task Bars](/gantt/guides/visualization/right-side-text)
* [Adjust Gantt Row Height](/gantt/guides/visualization/row-height)
* [Write Item Scripts](/gantt/guides/scripting/item-script-basics)
* [Write Gantt Config Scripts](/gantt/guides/scripting/gantt-config-script)

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