How to change Resource view bubble colors

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 [email protected]