How to change Group task background color?

Asked by Bikram Jeet Singh
3 years ago.

Hello,

I am using css modules in my project, so not able to use simple CSS.
I was trying to change the color of group from blue to grey.
By cssClass property, the whole box background changes to grey (full-box-background.png) &
By backColor property, the color changes from blue to grey(backColor.png), but not for the psuedo-elements.

Is there any change the color of psuedo-elments?

Thankyou.

backcolor.png

full-box-background.png

Answer posted by Dan Letecky [DayPilot]
3 years ago.

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.

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.