Good Morning ,
How can I change the color from the task menu item please as shown in the below ?
Thanks for you help.
You can do it with CSS. For example:
.about-item.b-menuitem {
color: white;
background-color: red;
}
You can demonstrate it in https://bryntum.com/examples/gantt/taskmenu/ by adding to the code:
features : {
taskMenu : {
items : {
// Add extra menu items available on all tasks
moveToNextDay : {
icon : 'b-fa b-fa-calendar',
text : 'Move to next day',
cls : 'b-separator about-item', // <----
onItem({ taskRecord }) {
taskRecord.shift(1, 'day');
}
},
plus the above css in index.html
:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Bryntum Gantt - Task context menu demo</title>
<script src="../_shared/browser/helper.js"></script>
<link rel="stylesheet" href="../../build/gantt.stockholm.css" id="bryntum-theme">
<link rel="stylesheet" href="../_shared/shared.css">
<style>
.about-item.b-menuitem {
background-color: red;
color:white;
}
</style>
</head>
with the result of:
Note: The approach is same in React.
I have tried to do as instructed above however the color does still remain the same.
I think the b-menuitem on task boards has another name or something because it does not change at all even when I try to rename the cls to another class name.
Also , I am using the dark theme. That deep orange is from the dark-theme something related to this code here :
.b-menuitem.b-contains-focus, .b-menuitem:focus {
outline: none;
background-color: #e64a19;
color: #fff;
}
still when I change the background color and add the important it remains the same.
The above css does not select the item until it has focus. I have modified task-menu example with custom style on About menu item and I'm attaching the zip.
Hey Saki,
Thank you for your help.
Managed to solve it actually, but I do have another question if you do not mind. This time when I hover onto a sub menu item the previous menu turns orange as shown below.
The color I am trying to go for is that faded white color highlightin process name.
Kind Regards,
Jan
Hi jan.curmi,
Hm, it should already work as expected.
You can easily find a class that you need to override by yourself inspecting DOM tree in DevTools. For menus you have to turn on "Emulate focused page" option. How to enable: https://stackoverflow.com/questions/64456886/emulate-a-focused-page-option-not-available-in-chrome-developer-tools/64456947
Also might be helpful to compare you styles with our theme CSS. If no luck, please share your CSS styles with us, we will have a look.
All the best,
Alex