I like using the Dashboard widgets, but I don't always like the default appearance. I've explored several posts on this forum, which change the appearance by using custom css
...so I had a go, using the Chrome browser inspection tool.
The dropdown widget seems to be one of the more complex structures. In trying to change "color" and "background-color" I found 5 classes in the default theme which overrode what I was wanting to change. In fact the only thing that wasn't overridden from "MyDropdown" was font-size.
In posts I saw from people like @hotNipi and @jbudd, they had overrides starting with .mdcontent, .mdcard etc. but I couldn't get anything to work unless I started with .nr-dashboard-theme.
I feel I'm missing something, and that this could be simplified. Anyone care to take a look?
Don't be alarmed at the ugly colors I've used. I wanted a diverse, contrasting selection so I could see what each one did. I would love to see a css file with all the dashboard style classes. Maybe we could Wiki one?
I am using node-red 2.1.5 and node-red-dashboard 3.4.0
<style>
/* Customised css for dashboard dropdown widget.
Classes discovered by Inspecting Web page in Chrome browser.
MyDropdown Class specified in dropdown widget could only change the font size
other entries were overwritten.
Discovered 5 other elements of the dropdown that had preset color attributes.
The colors shown here are deliberately contrasting (ugly) so I could identify them at runtime :)
*/
body.nr-dashboard-theme md-content md-card { /* default - no selections */
background-color: #F433FF; /* Bright pink*/
color: #64E986; /* green */
}
.nr-dashboard-theme md-select-menu md-option[selected] { /* selected option in dropdown */
color: purple !important;
background-color: silver !important;
}
.nr-dashboard-theme md-select-menu md-option { /* unselected (default) in dropdown */
background-color: lime;
color: red;
}
.nr-dashboard-theme md-select-menu md-option:hover { /* when hovering over an item in the dropdown list */
background-color: orange !important;
color: green !important;
}
/* selected item from list with underline (border) */
.nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value, .nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value.md-select-placeholder {
color: yellow;
border-color: pink;
border-bottom-width: 1px;
padding: 0px 2px;
}
.MyDropdown {
font-size: 24px;
}
</style>
Here's the short example flow:
[{"id":"d0d1f08b.852d6","type":"tab","label":"Custom Dropdown Example","disabled":false,"info":""},{"id":"cb41e652.188c9","type":"ui_dropdown","z":"d0d1f08b.852d6","name":"","label":"Dropdown","tooltip":"","place":"Select an Option","group":"ca2272c3.e8396","order":4,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"Option 1","value":"option1","type":"str"},{"label":"Option 2","value":"option2","type":"str"},{"label":"Option 3","value":"option3","type":"str"}],"payload":"","topic":"","topicType":"str","className":"MyDropdown","x":200,"y":120,"wires":[["ef47c6d2.779a78"]]},{"id":"ef47c6d2.779a78","type":"debug","z":"d0d1f08b.852d6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":400,"y":120,"wires":[]},{"id":"3388f9fcd5b845d6","type":"ui_template","z":"d0d1f08b.852d6","group":"ca2272c3.e8396","name":"","order":5,"width":0,"height":0,"format":"<style> \n/* Customised css for dashboard dropdown widget. \n Classes discovered by Inspecting Web page in Chrome browser.\n MyDropdown Class specified in dropdown widget could only change the font size\n other entries were overwritten.\n Discovered 5 other elements of the dropdown that had preset color attributes.\n The colors shown here are deliberately contrasting (ugly) so I could identify them at runtime :)\n*/\n\nbody.nr-dashboard-theme md-content md-card { /* default - no selections */\n background-color: #F433FF; /* Bright pink*/\n color: #64E986; /* green */\n}\n\n.nr-dashboard-theme md-select-menu md-option[selected] { /* selected option in dropdown */\n color: purple !important;\n background-color: silver !important;\n}\n\n\n.nr-dashboard-theme md-select-menu md-option { /* unselected (default) in dropdown */\n background-color: lime;\n color: red;\n}\n\n.nr-dashboard-theme md-select-menu md-option:hover { /* when hovering over an item in the dropdown list */ \n background-color: orange !important;\n color: green !important;\n}\n\n\n/* selected item from list with underline (border) */\n.nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value, .nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value.md-select-placeholder {\n color: yellow;\n border-color: pink;\n border-bottom-width: 1px;\n padding: 0px 2px;\n}\n\n\n.MyDropdown {\n font-size: 24px;\n}\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"MyDropdown","x":210,"y":200,"wires":[[]]},{"id":"ca2272c3.e8396","type":"ui_group","name":"Group 1","tab":"8e4884bb.ff1388","order":1,"disp":true,"width":6},{"id":"8e4884bb.ff1388","type":"ui_tab","name":"Button and Style testing","icon":"dashboard","order":11,"disabled":false,"hidden":false}]
