The shape of the task group is created using :before
and :after
pseudo-elements.
In the default theme it looks like this:
.gantt_default_task_group .gantt_default_event_inner {
position: absolute;
top: 5px;
left: 0px;
right: 0px;
bottom: 6px;
overflow: hidden;
background: #0b5394;
filter: none;
border: 0px none;
}
.gantt_default_task_group.gantt_default_event:before {
content: '';
border-color: transparent transparent transparent #0b5394;
border-style: solid;
border-width: 6px;
position: absolute;
bottom: 0px;
}
.gantt_default_task_group.gantt_default_event:after {
content: '';
border-color: transparent #0b5394 transparent transparent;
border-style: solid;
border-width: 6px;
position: absolute;
bottom: 0px;
right: 0px;
}
When you set the color using backColor
property these styles are overridden using inline styles.
If you want to change the color using a custom CSS class, you need to define these pseudo-elements for your class in the global scope.