New Custom UI Theme for ERPNext - Flat Design

Frappe Framework Customization
21

@rmehta how would you suggest at achieving themes without doing core hacks?

1 Like
22

@woakes070048 can you suggest a structure? Have not given this a lot of thought.

1 Like
23

I think adding theme capabilities to Frappe would give businesses a great advantage to use branding and better blend ERPNext look and feel when integrating with their platforms.

The approach Iā€™m suggesting since Frappe is using jinja2 engine is to write templates using Sass and javascript with predefined variables set, then deploy webassets to manage the process of applying templates css and javascript assets on targeted frappe application which can use [pyScss] (pyScss Ā· PyPI) to generate templates css .

Webassets library can be configured to use pyScss compiler (implemented in Python) for SCSS.

3 Likes
24

hi, great theme, we have selection another theme admin, but we need an help for install and configure it, can you help us?

25

Generally, how an app usually handles theming is by breaking out the views to a themes directory. Thatā€™d allow theme creators to modify .HTML files and use whatever else they wanted (e.g. SASS/LESS, etc.). The app would then have a theme selector in the settings that would act as a redirect to the selected theme folder.

A system like that offers the most flexibility as people can work in their own JavaScript, CSS, and custom HTML for their themes without worrying about messing up core files. Of course, any updates to the underlying code may make it so a theme has to be updated by the creator to stay current, but thatā€™s the price of flexibility.

2 Likes
26

How i can use https://almsaeedstudio.com/preview
i need to change the ui theme
help us plz.

27

@iFeras93 using frappe api, you can develop such theme.

2 Likes
28

I create bdtheme app for change ui theme and add left menu.
link to install app. you can edit and change my logo. hope you like it.

bdtheme
bdtheme1235Ɨ614 53.2 KB

21 Likes
29

I just installed the app and It works fine, the left menu is very handy but isnā€™t translated.
Also, I think the responsive needs some work too.
There is a way to accomplish this?

Thanks!

1 Like
30

This is really awesome. Nice Work. :ok_hand:

1 Like
31

Bbtheme app is the way to change theme and how to add left menu. Correct left menu I hard code notyet code for customize by app and notyet support translate. But you can edit my code apply your project. Itā€™s easy to change left menu and logo.

1 Like
32

@vinhnguyent090
I have tried your theme. It looks good.

If you want to make dynamic, you can use following js script

  1. get all modules
    frappe.modules

  2. Get Module Doctype and Report list
    frappe.call({
    method: ā€œfrappe.desk.moduleview.getā€,
    args: {
    module: ā€œDelivery Managementā€
    },
    callback: function(r) {
    console.log(r.message.data)

    },
    freeze: true,
    });

3 Likes
33

Yes thank your solution. But I like the way user can add their menu by create new menu doctype more than get dynamic via modules. Becuase erpnext have many pages. User only show their menus with their role. Exam sales role show sales menu or stock role show stock menu.

1 Like
34

That looks very nice. I have been wanting to do somthing like this for a long time.

1 Like
35

Wow! This is exactly how Iā€™ve always thought the Frappe UI (for the Desk) should beā€¦ Menu on the left sidebar and customizable dashboards/widgets on the main page

This would be fantastic!

Kind regrads,

2 Likes
36

Agree!

1 Like
37

+1 on that!

1 Like
38

+1 on that!

1 Like
39

correct this way Iā€™m doing :slight_smile: but now I have another issue need to do

1 Like
40

Very good work.
Now once applied how can i restore or change to another Theme ?
Translation to other languages when ? Initially ERPNext already has so is just use the existing ones correct?

1 Like