How to change Resource view bubble colors

Modified on Fri, 15 Nov at 4:49 PM

Gantt chart allows you to customize the colors of Resource view allocation bubbles using custom CSS. This procedure will be improved by a more dynamic solution in a future release.  


To start, add a Script - block widget on the page where your Gantt chart is displayed and insert there the following CSS code:


<style>
.resource_marker .marker_ok { 
    background-color: black !important;
    color: red  !important; 
} 

.resource_marker .marker_over { 
    background-color: #FF8686;
    color: orange;
}
</style>

Adjust colors as needed

  • marker_ok: Overwrites the marker that indicates allocation as OK (default green bubble). 
  • marker_over: Overwrites the marker where allocation is overloaded (default red bubble).


By changing background-color and color, you can apply any color combination that suits your needs. 


Here is an example:


In case of any questions please contact support@nextedy.com 


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article