Customizing Style of ui-list, table, text, and drop-down controls

Dashboard
1

I'm currently working on creating custom styling for the UI controls on my dashboard (specifically, the ui-list, table, text, and dropdown controls).

For the UI List and Table controls, I want to be able to

  • Set the highlight background and text colors when selected item is clicked
  • Bold the control's border when it has the input focus
  • Have the control retain the selection when the control looses the focus.

So far, I haven't been able to identify the styles that control this (except one, but it leaves the highlight color on permanently and doesn't change the text).

For the UI Text and dropdown controls, I want to style them to look the same as the ones in the Node-RED editor.

For the text inputs, I want them to

  • Have a thin border around the outside instead of the underline
  • Make the border bold when the control has the input focus
  • Have the label text disappear once selected rather than moving above the input field.
  • Change the text label placeholder color to gray

For the dropdowns, I want to

  • Replace the underline with a thin border
  • Have the ability to add an icon on the left.
  • Change the text label placeholder color to gray

For all of the above, I'd also like to make the font size a bit larger since these controls will be used on a 10.1" touch screen.

Below is the test flow I've created as I've been playing with the style settings.

[{"id":"462e9bef9b3c1e95","type":"ui_template","z":"90a47c326929253c","group":"032223f306dbc65e","name":"Global Styles","order":4,"width":0,"height":0,"format":"<style>\n    :root{\n        --ui_control_border: rgb(170, 170, 170);\n        --ui_control_highlight: purple;\n        --ui_control_highlighted_text: white;\n    }\n    \n    .nr-dashboard-ui_list, .tabulator, .nr-dashboard-textinput, .nr-dashboard-dropdown\n    {\n        border-style: solid !important;\n        border-color: var(--ui_control_border) !important;\n        border-width: 1px !important;\n        border-radius: 4px !important;\n    }\n    \n    /* this just highlights the list item permanently and doesn't unhighlight after selecting another one\n       Also, the text color doesn't change either */\n    /*.md-ripple-container {\n        background: var(--ui_control_highlight) !important;\n        color: var(--ui_control_highlighted_text);\n    }*/\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":350,"y":180,"wires":[[]]},{"id":"032223f306dbc65e","type":"ui_group","name":"Group 1","tab":"a2a04b07df99d019","order":1,"disp":true,"width":6},{"id":"a2a04b07df99d019","type":"ui_tab","name":"Test UI-List","icon":"dashboard","order":37,"disabled":false,"hidden":false}]

Here's what the example above looks like on my screen currently:

image
image344×616 4.53 KB

But I'd really like it to look and function just like the Node-RED editor controls

image

NOTE: I adjusted my theme to have a light gray background with white control groups

NOTE 2: The dropdown control is close to what I want but the text and dropdown are not centered in the control. I'm sure I didn't set this all up right, but the CSS modifications are giving me problems.

Is it possible to override the global style settings for these controls to make this work or do I have to create custom template nodes for each one? Either way, are there any good examples out there of how to customize/style these controls?

2

You can add a ui-template node (set for adding to the head tag), with styles that affect all of the dashboard elements. Use the browsers Dev tools (F12) to inspect the styles & play around until it suits your requirements, then copy the CSS to the ui-template.

As for examples, there are literally hundreds of examples on this forum. Check out the Dashboard category.

3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.