V13 Button Colors

[usmanalikhan]

Hi All,
Could anyone plz guide how to change button colors from blue to another color?.

[walstanb]

You can add css to .btn-primary class.

[usmanalikhan]

thanks. where to do this? can you please guide where I should add this class.

[hashir]

Install this custom app theme and edit the app’s css file.

If you need the button color and the primary color to reflect on white theme, add
--primary-color : (hex code of your preferred color) to the existing [data-theme=“light”] section of the css file. So it will look like,

[data-theme="light"] {
--primary-color : #e24c4c;
}

If you need the button color to reflect on dark theme, add the same to [data-theme=“dark”] section. You can keep different colors for light and dark theme as well.

You would need to do a bench clear-cache, bench restart and browser cache clear if the changes are not visible immediately after saving.

[usmanalikhan]

@hashir

–primary-color : #e24c4c;

Thanks!! it worked. Just one more question… how to change color of hyperlink text where its written “edit filters” etc. I want to change it to black. (screenshot below)

[hashir]

Add --primary: (your color) in light or dark section. But this will change all the blue colors wherever primary color is used.

Another option is to add these line to the css file if you need to change only the sidebar link.
.list-sidebar .sidebar-action {
color: #e24c4c;
}

[usmanalikhan]

@hashir

–primary: (your color)

Thanks a lot.
One last thing. is there any way to change color of the tick boxes?

[hashir]

Try this… Add these lines on the css

input[type=checkbox]:checked:before {
background: #fff000;
}

[Suresh_Thakor]

@hashir, Thanks for contribution.

@usmanalikhan, you may try if you are not familier with coding. i am not confirming that it will work on v13. i had used over v13-beta.

Frappe/ERPNext Theming Tool

Hi every one, I’ve create a custom app with frappe that allow you to make your own style, font and logo. It can be developed to have the ability of changing the desk components, menus and so on. So DOWNLOAD the app now and feel free to test, comment, develop and contribute. I hope it help’s someone like it helped me. Installing $ bench get-app https://github.com/open-alt/theming_tool.git $ bench --site [site_name] install-app theming_tool How To Use 1- Create “Element” and insert it’s “…

[usmanalikhan]

Thanks a lot @hashir

[usmanalikhan]

Hi,
When a page is loading for a second it shows “frappe” on the browser tab. could you kindly advise if its possible to remove / replace it and how?

[usmanalikhan]

hi - just an update. after installing v13.2.0 you would need to update the code with the below code to change the scroll bar color.

[data-page-route=Workspaces] .layout-main .layout-main-section-wrapper::-webkit-scrollbar-thumb, [data-page-route=Workspaces] .layout-main .layout-side-section::-webkit-scrollbar-thumb {
background: var(–scroll-color);

remove the other webkit.scrollbar colors applied at start.

[Shrikant_Tirki]

Can you share file location. Where it will be present.?

[SamSam]

Does this affect the Desk or only the public websites? @hashir

I am referring to erpnext v13

[usmanalikhan]

This mainly affects the desk. But u can also change site colors to a limited extend.

[Abhishek_Agarwal]

Hi @hashir

I’m using v14 and there seems to be an option to set primary color in website themes. However, it seems this is not affecting any property. Neither on the front end, nor on the desk.

Any idea what I could be missing?

[ashaseeb]

Good job!!! worked on V14 as well. thank you