User colors

[RaphVDM]

Hello I just have a question about how set colors to the users.

As you can see from the image, I have 4 users, 2 have set blue and 2 green. How can I chage this so that each user has it own color? Thank you

[cgaspard]

Hi @RaphVDM ,

Colors are generating using the first three letters of a username. I'm converting those into hex values, then applying them to the user. I don't currently have a way to override this.

In the past, I've considered building it so that you can override utilizing the custom.css, but haven't had a chance to implement this yet.

The only other solution I can think of for now is to change what gets passed to the function that generate the style.

If you take a look at global.js line 567, that is where the 3 chars are passed in to generate the color codes.

[RaphVDM]

Hi @cgaspard

Thank you for the advice, when don't have a lot of users. So I just created a new object in the config.js section like this

Kanban.Users = { "USER1" : "#0000FF", "USER2" : "#0099FF", "USERn" : "#FF3300" }

inside the kanbanclasses.js at line 506 i changed the code to if(this.HandlerName != "") { if(Kanban.Users[this.HandlerName.substring(0, 3).toUpperCase()] == undefined) { storyDivButton.setAttribute("style", GetStyleCodeFor3DigitsHalfShaded(this.HandlerName.substring(0, 3))); } else { storyDivButton.setAttribute("style", GetStyleCodeFor3DigitsHalfShadedHex(Kanban.Users[this.HandlerName.substring(0, 3).toUpperCase()])); } }

and in the global. I added this two functions

function GetStyleCodeFor3DigitsHalfShadedHex(digits) { var colorObject = hex2rgb(digits); var textContrast = GetColorContrastForRBG(colorObject.first, colorObject.second, colorObject.third); return "color: " + textContrast + "; background: linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(41,137,216,0) 50%,rgba(" + colorObject.first + "," + colorObject.second + "," + colorObject.third + ",1) 51%,rgba(" + colorObject.first + "," + colorObject.second + "," + colorObject.third + ",1) 100%) !important; /* W3C */" }

function hex2rgb(hex) { if (hex[0]=="#") hex=hex.substr(1); if (hex.length==3) { var temp=hex; hex=''; temp = /^([a-f0-9])([a-f0-9])([a-f0-9])$/i.exec(temp).slice(1); for (var i=0;i<3;i++) hex+=temp[i]+temp[i]; } var triplets = /^([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i.exec(hex).slice(1); return { first: parseInt(triplets[0],16), second: parseInt(triplets[1],16), third: parseInt(triplets[2],16) } }

Maybe it's not so clean but it does the job

thank you again