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
- Бухоблік
- Склад
- PoS
- Проект
- MRP
Це запитання позначене
1
Відповісти
2789
Переглядів
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.
Enjoying the discussion? Don't just read, join in!
Create an account today to enjoy exclusive features and engage with our awesome community!
Реєстрація
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.