How to add css and js in your doctype? | how to add css | how to use css in doctype

Hello all;
I want to add css file in my custom doctype, how?
I have a doctype name Project Manager Ticket i want to add css file in Trello Board

frappe.require([
			"assets/<custom_app_name>/css/project_manager_ticket.css",
		]);

This my folder directory in my code:-

<custom_app_name>/public/css/project_manager_ticket.css

Note:- You may use this css file through assets folder. In side the sites folder

This is one more was to add css in your doctype field using jquerry
For read-only type of field it won’t work

frappe.ui.form.on('<doctype_name>', {
     refresh : function(frm){
         set_css(frm);
     }
});

funtion set_css(frm){
document.querySelectorAll("[data-fieldname='<field_name>']")[1].style.color = 'green'
document.querySelectorAll("[data-fieldname='<field_name>']")[1].style.fontWeight = 'bold'

document.querySelectorAll("[data-fieldname='<field_name>']")[1].style.color = 'red'
document.querySelectorAll("[data-fieldname='<field_name>']")[1].style.fontWeight = 'bold'
}

example:
i have doctype name = Trello and i have to change the status field color

frappe.ui.form.on('Trello', {
     refresh : function(frm){
         set_css(frm);
     }
});

funtion set_css(frm){
document.querySelectorAll("[data-fieldname='status']")[1].style.color = 'green'
document.querySelectorAll("[data-fieldname='status']")[1].style.fontWeight = 'bold'

}```
4 Likes

Hello,

How to implement any loop in css query.

I am fetching the json data so it looks like this.

So if I want to fetch specific data in the left-right format so is it possible?

Screenshot from 2022-08-04 18-56-33

Thanks in advance