Hello,
I've been searching for what I hoped would be a simple solution to darkening the default placeholder text color. For example, on the contacts form, the address fields, I am unable to locate where to click, let alone what values to place in the form fields as the contrast is too weak, unless I view my monitor from an extreme angle. The default color is #dee2e6.
I've been hunting around the code and came up with this file: ./addons/web/static/src/webclient/webclient.scss where the following code is located:
@mixin o-placeholder {
// Rules below need to be separeted. Otherwise all browsers will discard the whole rule.
color: $input-placeholder-color;
}
::-webkit-input-placeholder {
// WebKit, Blink, Edge
@include o-placeholder;
}
::-moz-placeholder {
// Mozilla Firefox 19+
@include o-placeholder;
}
:-ms-input-placeholder {
// Internet Explorer 10-11
@include o-placeholder;
}
Where or how can I set the colors to use? Seem simple enough, somewhere I need to define $input-placeholder-color.
I tried reading https://www.odoo.com/documentation/16.0/developer/reference/user_interface/scss_inheritance.html and frankly I'm lost.
Can someone spell out a solution for me?
PS: I'm not all that strong with CSS, so, I might need a few more details than other web developers 😉
Thank you
Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
- CRM
- e-Commerce
- Accounting
- Inventory
- PoS
- Project management
- MRP
This question has been flagged
1
Reply
1284
Views
OK, I've hired a contractor for the hint and here's our solution.
Create the file structure for a custom addon...
/opt/odoo/odoo-server/custom-addons/custom_placeholder_color
/opt/odoo/odoo-server/custom-addons/custom_placeholder_color/static
/opt/odoo/odoo-server/custom-addons/custom_placeholder_color/static/css
/opt/odoo/odoo-server/custom-addons/custom_placeholder_color/static/css/main.scss
/opt/odoo/odoo-server/custom-addons/custom_placeholder_color/static/description
/opt/odoo/odoo-server/custom-addons/custom_placeholder_color/__manifest__\\\.py
/opt/odoo/odoo\\\-server/custom\\\-addons/custom_placeholder_color/__init__\\\.py
Then\\ the\\ contents\\ of\\ this\\ file /opt/odoo/odoo\\-server/custom\\-addons/custom_placeholder_color/static/css/main\\.scss\\ will\\ set\\ the\\ color\\ scheme\\.
:root\\ \\{
\\-\\-bs\\-gray\\-300:\\ \\#474747;
\\}
::placeholder\\ \\{
\\ \\ color:\\ \\#474747;
\\}
In\\ addition\\ this\\ file\\ may\\ be\\ valuable\\ to\\ someone\\ starting\\ out\\.
cat\\ /opt/odoo/odoo\\-server/custom\\-addons/custom_placeholder_color/__manifest__\.py
\#\ \-\*\-\ coding:\ utf\-8\ \-\*\-
\{
\ \ \ \ 'name':\ 'Placeholder\ Color\ Changer',
\ \ \ \ 'version':\ '16\.0\.0\.1',
\ \ \ \ 'author':\ 'gray duck locks',
\ \ \ \ 'license':\ 'OPL\-1',
\ \ \ \ 'website':\ 'https://127.0.0.1',
'category': 'Extra',
'depends': [
'base'
],
'data': [
],
'assets': {
'web.assets_backend': [
'custom_placeholder_color/static/css/main.scss',
], },
'description': u'Change all placeholder color to #474747',
}
Does anyone have comments about improving this solution?
Thank you
Sorry guys, the formatting is terrible, I tried twice, but this forum does not display the way I entered the text. Hopefully you get the idea.
Appreciate you coming back and providing your solution. That's a rarety!
Another option might be to use an add-in like Stylus to override the CSS. I haven't tried it yet on Odoo but it's worked well for me in the past. There are a few places I plan to use it on Odoo in the future.
IMHO the designers have good too far in their minimalism and would do well to always remember this is a business product meant for heavy data entry.