How to change Status field colors

[joaovicentini]

Hello, is there a way to change or add different colors to the Status field of a ticket? Thank you!

[Evgeniy]

Hello Joao! Yes, for that please navigate to List settings > 'Status' column and change the column formatting:

For example, you can change an existing colour:

To add a new colour for the custom status, copy this block of code and put it after the last colour code:

[joaovicentini]

Hi Evgeniy. Thank you so much for the detailed response. However, when I go to Status list properties, the Column Formatting field is empty, see screenshot below:

It's interesting, because that field is currently displaying colors as you can see on the first screenshot I posted when I created this topic. We're using SharePoint 2019 on-premise.

[joaovicentini]

hi @Evgeniy ,

Is this something you can help me with? I have looked everywhere and I cannot find where to change the existing colors of the status field.

Thank you!

[Evgeniy]

I am sorry for the delay but I need to consult with developers on the matter. I will get back to you soon.

[joaovicentini]

thank you @Evgeniy . I appreciate that.

[Evgeniy]

Hi Joao! Developers advise the following to change the colours of the default statuses. They will check additionally whether it is possible to modify them for custom ones.

1. go to {site}/HD/scripts,
2. download plumsail.helpdesk.customcss.js,
3. add new custom CSS item to Plumsail.HelpDesk.CssToLoad array:

{
  id: "custom css",
  url: "{site}/HD/custom.css"
}

4. upload modified plumsail.helpdesk.customcss.js back,
5. create custom.css, specify CSS rules and upload to SharePoint ({site}/HD/custom.css):

.pl-status-inprogress {
	border-color: red;
}

.pl-status-new {
	border-color: gray;
}

.pl-status-pending {
	border-color: rgb(211, 211, 211);
}

.pl-status-solved {
	border-color: rgb(69, 171, 50);
}

[Evgeniy]

Hi Joao! Unfortunately, it is not possible to customise the colour for custom statuses in the on-premises version.

[Evgeniy]

Alternatively, you could use your own column formatting (default SharePoint feature).

[joaovicentini]

Hi @Evgeniy , thank you again for helping me with this. I have tried to implement what you suggested wit the default statuses. But that did not work, see screenshots below:

Step1

Step2

Step3

Do you have any other ideas as to why the status colors are not displaying properly?

[Evgeniy]

Please load the HelpDesk site in incognito mode of browser and check whether the issue persists then. If it does not, clearing browser cache should help. Otherwise, please open developer tools (F12), switch to a 'Network' tab, reload the page with Ctr+R and reproduce the issue. After that, export a HAR file.

Then switch to a 'Console' tab and save logs:

Share the collected files and screenshots showing the location of the CSS file with the site URL visible in the browser address line. You can share the information through a private message in the community or raise a support ticket at support@plumsail.com. In the last case, refer to this community topic in your message.