Dashboard CSS tips - Color picker (text input) with icon

To make it a bit more visually attractive.
image

[{"id":"7481671e.330d38","type":"ui_template","z":"d7dd1239.8c663","group":"78c150e7.b098d","name":"dashboard style override","order":13,"width":0,"height":0,"format":"<style id=\"dashboard-styles-override\">\n\n/*style for input element container*/\n.nr-dashboard-theme .nr-dashboard-textinput md-input-container {\n   padding:0 !important;\n   margin:0 !important;\n  /* border-radius:16px;*/ /* for rounded corners*/\n   background-color:var(--nr-dashboard-widgetColor);\n}\n\n/*style for label (icon)*/\n.nr-dashboard-theme .nr-dashboard-textinput md-input-container label {\n    position: relative;\n    top: 11px;\n    font-size: 12px;\n    padding-left: 15px !important;\n}\n\n/*style for input element*/\n.nr-dashboard-theme .nr-dashboard-textinput input[type=\"color\"]{\n    border: none !important;\n    width: 48px;/*1x1 widget size horizontal*/\n    height: 48px;/*1x1 widget size vertical*/\n    margin: 0 !important;\n    padding: 6% !important;/*adjust for picker size*/\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":210,"y":460,"wires":[[]]},{"id":"cad05e8e.8fee8","type":"ui_text_input","z":"d7dd1239.8c663","name":"color","label":"<i class=\"fa fa-paint-brush fa-2x\"></i>","tooltip":"","group":"78c150e7.b098d","order":7,"width":"2","height":1,"passthru":true,"mode":"color","delay":300,"topic":"","x":390,"y":460,"wires":[[]]},{"id":"78c150e7.b098d","type":"ui_group","z":"","name":"Default Group","tab":"65fa9b03.5ede34","order":1,"disp":true,"width":"6","collapse":false},{"id":"65fa9b03.5ede34","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
5 Likes

It's great that you keep posting these snippets, they are really useful, and a good source for us to learn from :+1:

3 Likes

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