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.
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 
All the bootstrap themeing properties are here:
https://github.com/frappe/frappe/blob/develop/frappe/public/less/variables.less
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
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/
can you provide me the contents of the css file for refernce?