Flat UI Theme for ERPNext v12

Frappe Framework Customization
,
21

Hi @hashir… I’ve installed the theme, and, after first use, I’ve got some issues:

  1. The E logo is huge (I’ve changed in css, but I believe you have to create a option to whom doesn’t change the icon!)

image

  1. The status in lists is smaller than the other fonts. It seams that it aren’t on bluetheme.css, and is getting the config from desk.min.css

image
image1001×109 5.62 KB

  1. The icons in the first page are strange… Seams the shadows are not in place. EDIT: you are pointing to the E logo, in bluetheme.css

image

For now, thats it.

Thanks!

2 Likes
22

For #3 have you try the steps explained in git readme?

1 Like
23

Nice :+1:

24

No… I just saw after… :blush:

25

One doubt: This theme changes also the system e-mail configs?

Before:

image

After:

image

26

And… Do you know how to change this color?

image

I’m trying to change via frappe-web-br.css, but, after bench restart, its getting back to this collor…

27

Every thing looks good for icon
but E logo is so big
No Bold Font
how to fix this
I follow yours steps in get-hub read me

them%20erroer
them%20erroer1194×473 20.8 KB

@hashir

28

I have to uninstall the blue theme
its break erpnext update
bench update
and i have to do bench update --reset
to solve the problem
any way Thank for your effort

1 Like
29
1 Like
31

Hi,
Successfully installed the theme on V12. How do I resize the E Logo? It’s too big…thanks for the awesome theme!

1 Like
32

Can you share a screen shot here

33

Hello, can someone tell me how to modify the UI, what files and settings can be changed, etc …

34

Hi, I found a solution to this problem. You can go to the /bluetheme/bluetheme/public/css/bluetheme.css folder. You delete the .app-logo {width: 120px! Important;} that will make the Logo E look attractive. I hope the theme developers can handle this issue, the size of the .app-logo {width: 120px! Important;} is made for a special logo / rebranding instead of the default logo. Thanks.

Update: change to .app-logo {width: 30px! Important;}
:grinning:

4 Likes
35

@hashir as of v12.5.0 the custom modules icon link is broken. The default module icons now show instead of the custom icons designed for the theme

36

yes, the css was made for wider logo. To use the default logo, please follow the steps mentioned by @teddyseptiadi. I will add this instruction in the github.

37

i think it’s because the desktop.py file in erpnext and frappe folder are getting replaced when you update erpnext to the latest version. Please replace the files again with the one in the ‘releases’ section and clear cache. it will work.

38

Go to /bluetheme/bluetheme/public/css/bluetheme.css

and delete the line " .app-logo {width: 120px! Important;} "

1 Like
39

Hi,

I have updated the theme with some small css modifications.

I have also removed the logo css from the main code. No more big logo errors.

40

Hi @hashir i have a query to replace the E logo with my custom logo how to do it in your bluetheme…! Can you help me out?

41

@arokia
The file need to be in svg format for it to work with my approach.

Rename your logo to erp-icon.svg and copy it to

/apps/erpnext/erpnext/public/images replacing the original file.

Now, go to /apps/bluetheme/bluetheme/public/css/bluetheme.css and add this

.app-logo {
width: 120px! Important;
}

Replace 120px with the desired width of your logo, taking care to maintain its proportion.