this is the default UI
i want to change it to like this
Is this possible? If possible, how can i do this
or just tell me know how can i edit/modify the default UI
Hi @Vinay1:
Using custom pages you can create your UI from scratch …
See this:
https://frappeframework.com/docs/user/en/api/page
And this:
Hope this helps.
3 Likes
It appears you’re showing the standard Frappe desk in your first image. The Frappe desk is typically an Intranet-type application for internal use, and prioritizes functionality over sexiness 
The second image (what you want) is more the style of a public-facing UI for a website. Frappe’s Website module lets you create these custom pages, but doesn’t include many design tools to help beyond some basics, like a contact form. You’ll need to do a bunch of work to create them how you want, or pay someone else to.
You’ll also need to decide how much anonymous access to pages you’ll want to give your users, vs. allowing them to authenticate, and possibly access the Desk for more Intranet-type use.
If everyone is logging into Frappe anyway, you can also (as was already suggested) create some custom pages which can be formatted how you want within the Frappe desk. I guess it’s a matter of whether you want your app residing in the Desk environment, or more within a public website, with the potential for non-authenticated access.
What is the way to have my custom pages residing inside Desk having the side bar and navigation bar? Is there any way other than custom HTML blocks in a Workspace?
Custom HTML Blocks should be used that can bring to workspace with ease and also helpful in building pages , we did this like
1 Like
Hi @Vinay1:
Custom pages are avaliable on v14.
Following docs and video posted above you will be able to do this.
Here another good tutorial about it.
Hope this helps.
Hi @avc with the above mentioned approach I need to write frontend and also backend so my doubt is that is there any other way where I can just change the UI, I mean changing CSS of the frappe so that I don’t need to write backend logic
Or maybe creating new css file and linking it to frappe UI
Could you please share this html code?
Regards,
Shubham
Hi:
No changes are needed in backend, just get_context() method which provide data to show.
Mainly JS and HTML/CSS to render your stuff.
See this sample in backup page:
Just a custom page. Here the code:
IMHO is absolutely easier than modify Frappe user interface …
By the way, note that custom pages lives “inside” desk, so user needs be logged to see them. Fits this your requirement? If not, if you need that external users can see your page, use web page instead.
https://docs.erpnext.com/docs/user/manual/en/web-page
or webview of your doctype …
https://frappeframework.com/docs/user/en/tutorial/portal-pages
As you see, many options to choose
Hope this helps.
hey @avc can’t we use context to send data from py file to html and use jinja template engine to render the context into html?
as per one of the videos (https://www.youtube.com/watch?v=gKwQSYMVCGo&t=1667s&ab_channel=GhorzAce) you mentioned we need to create a whitelist method in py file and call the whitelist method from js file and render it to the html using DOM manipulation
rather than doing all this can’t we just pass context from py file to html and use jinja template engine to render the context into html