Skip to Content
This question has been flagged
1 Reply
2832 Views
Avatar
Eric Osterberg 
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
Avatar
Discard
Chris Parker

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.

Avatar
Eric Osterberg
Author Best Answer

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

Avatar
Discard
Eric Osterberg
Author

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.