Customizing the frappe UI

Hi, I’m trying customize ERPNext UI according the specified design. However unable to do so. Any help on the matter would be appreciated.

What exactly are you trying to customize?
Please try to specify the elements, screens, etc. so that people here can guide you in the right direction.

Hi, I have Created fields in doctype and I am able to view the form. I want to change the css of the customer doctype form that I have created to match our design. How would I go about doing this? Where are the css files that I need to change? I also would like to use the bootstrap framework for some of the UI elements. How would I add this?

@Mamatha_Madhesh, If CSS is all you want to change, you can do so through Custom Scripts for that Doctype. Since Custom Scripts adds Javascript to a specific page, you can actually change the CSS on the fly allowing you to move things around, change color, size, etc.

Hi,I also want change the standard view of the doctype using the bootstrap framework. How would I go about doing this?

I would like to be able to add cards to the doctype view and display the user information.

I want to change the UI for my app as well. I want to change the basic view of the app as well as how can I change the looks of it, I want to use the bootstrap framework. I want to view the different doctypes and then change the things on the left side of the list pages:

You can make a custom app and add CSS file to the public/css.
Change any element you want.
But beware of the complexity of ERPNext and Frappe views :slight_smile:.

Don’t forget to add the CSS path to the app_include_css in your app hooks.py

Check this repo as an example:

1 Like