Override some CSS rules in desk

I have some users with poor eyesight. I need to override a couple CSS rules across the entire application.

Two examples are;
making h6 font-size 15px instead of 12px
making the text-muted colour a dark grey than #8d99a6

What’s the best way to override these? Should I just go hack ./apps/frappe/frappe/public/css/common.css ?

Why not your are increase font in browser? Its quite easy.
https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages

Thanks @kolate_sambhaji, that’s a fine solution is some cases, but doesn’t address the contrast issue. Also, because erpnext is reactive, when a user bumps the zoom factor in the browser, the left column showing assignments and attachments disappears.

The general size and color scheme is good, I just need to override some specific rules. Hence this question.

@ebjorsell I wanted to add a font resize option within ERPNext for the vision impaired as well but I put it on the back burner due to other work commitments. After reading your post I had another search online and found numerous options on how to achieve this but I am not sure which would be the most efficient way to implement this within ERPNext.
Options included inserting a revised common.css file after the default.css gets loaded. There are jQuery options, Less/Sass mixin options, The list goes on.
As there are pre made bootstrap.css for the vision impaired, Maybe have a “Hi Contrast” check box in the user profile page. If this is checked it will load the high_contrast_common.css instead which is located in the same folder as the default common.css folder. Maybe a forum member could advise if this would be the least intrusive way to inject this functionality?

@System19 yes, this was basically my question. I can find many ways to hack erp css to meet my needs. What I’m asking for from the community is; ‘What is the best most sustainable way to do this’?

One suggestion would be to have a CSS override in System settings, where I can add rules that overrides all other rules.

Your high-contrast option is a great idea too, but possible adds a lot of testing and maintenance overhead for the erpnext team. Or maybe not, what does the core devs say? @rmehta @anand @nabinhait :smile:

All the bootstrap themeing properties are here:

You are right, contrast needs to be done up a bit too,

You can create a separate app for this.

In your app, create a file public/css/custom.css or similar.

In hooks.py, use app_include_css = “assets/css/your_app/custom.css”

Make sure your app is after erpnext in sites/apps.txt

Best,
Anand Doshi

ERPNext

7 Likes

Cool, Thanks,
I will have a go at this late next week when I get some time.

There is typo in @anand’s answer that took me lot of hours to resolve it. The correct command in hooks.py is
app_include_css = “assets/your_app/css/custom.css”
the app name comes just after the public/

4 Likes