DocType Button Color

Is there a way to specify the color of a custom button specified in a DocType, similar to the red “Delete” button?


Uses the bootstrap classes. Jquery find the button and add/remove/change the class.

document.querySelectorAll("[data-fieldname='button_name']")[1].style.backgroundColor ="red";

1 Like

Hey @shahid, see if you can add this trick to the client scripting page in the wiki.
Actually… it looks like wiki needs a lot of attention…

@tmatteson Yes i’ll like to add, but how?

Hrm. Maybe it’s a permissions issue.

Do you have the option of the “Edit” button in your view?

Thanks. I will try that code later today and confirm.


Title is fine? i don’t think so, can you suggest me a better title for this?

@shahid Thanks for taking the time to add that to the wiki. It really helps us new developers get up to speed faster and become better contributors to the project.

I would suggest “Client side script to change CSS properties of Doctypes.”

1 Like

Before you get that far though, I want to discuss a couple points of style. And maybe get an opinion from @netchampfaris Faris.

  1. Frappe uses jQuery as its default method of navigating the DOM. I know that’s really passe these days but it’s the in-context method, so its a readability decision to use it or not. I like your pure javascript solution, though sometimes mixing the two (querySelector and $().find) leads to problems.
  2. Frappe also uses BootStrap (or pieces of Bootstrap) so from a design perspective the “Primary”, “Danger”, “Info”, etc classes are really where the colors are stored. This becomes more important if one uses a theme or skin (which is going to start happening more, but isn’t particularly common as of today).

@shahid Have you confirmed this script works? I have been unsuccessful getting a form button to change color.

In the doctype company, there’s a red button that’s used to delete transaction for a company. This is the method I use.

@mslake yes it is confirmed, even i am also using this.

Can you share your script please?

use this it works 100%

onload_post_render: function(frm) {

1 Like

I am using this code snippet for changing background color of data field of a doctype but it is not working .

Please help me out.

Regards ,

Hello @Taniyavish

Please use this below script. It works for me.

Custom Script:

frappe.ui.form.on(“Test”, {
refresh: function(frm) {

var set_css = function (frm) {
let el = document.querySelectorAll(“[data-fieldname=‘email’]”)[1].style.backgroundColor =“lightskyblue”;
let fl = document.querySelectorAll(“[data-fieldname=‘phone’]”)[1].style.backgroundColor =“mediumaquamarine”;


Hope this helps.


Thanks @Sujay,it also worked for me.:innocent: