I am looking for a simple example of using the </> Class field in dashboard widgets with a custom class entry. For example, create a class to set font size and bold and then reference that class in a widget instance?
Thanks,
Tom
Here is a little example that should get you going:
[{"id":"eceed1c4f5852f94","type":"ui_text","z":"4d3350f3a5d82c68","group":"bd17ac3cedb03c4d","order":0,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","className":"","x":770,"y":220,"wires":[]},{"id":"4d9f3bdd876f9016","type":"ui_button","z":"4d3350f3a5d82c68","name":"","group":"bd17ac3cedb03c4d","order":13,"width":0,"height":0,"passthru":false,"label":"big class","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"big","payloadType":"str","topic":"topic","topicType":"msg","x":200,"y":200,"wires":[["0cf193a545a2e764"]]},{"id":"0da702fd1a42f959","type":"ui_button","z":"4d3350f3a5d82c68","name":"","group":"bd17ac3cedb03c4d","order":13,"width":0,"height":0,"passthru":false,"label":"no class","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":200,"y":260,"wires":[["0cf193a545a2e764"]]},{"id":"0cf193a545a2e764","type":"change","z":"4d3350f3a5d82c68","name":"","rules":[{"t":"set","p":"className","pt":"msg","to":"payload","tot":"msg","dc":true}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":220,"wires":[["5c0b4feeb6ce152e"]]},{"id":"5c0b4feeb6ce152e","type":"random","z":"4d3350f3a5d82c68","name":"","low":1,"high":"100","inte":"true","property":"payload","x":600,"y":220,"wires":[["eceed1c4f5852f94"]]},{"id":"95642d72d039b6f0","type":"ui_template","z":"4d3350f3a5d82c68","group":"fb28dcf88cc50447","name":"","order":13,"width":0,"height":0,"format":"<style>\n .big {\n font-size: 85px;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":420,"y":140,"wires":[[]]},{"id":"bd17ac3cedb03c4d","type":"ui_group","name":"css Example","tab":"36c718bbfb373d6d","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"fb28dcf88cc50447","type":"ui_group","name":"Office","tab":"2abb29f12f2ef82e","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"36c718bbfb373d6d","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"2abb29f12f2ef82e","type":"ui_tab","name":"Airsense","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
Very clear. Looks like I was just not setting a property that could be set.
Thanks,
Tom
Suppose I wanted to set the label to be black and the value to be red?
In a text node the label has class "label" and the value class "value"
So the necessary CSS selectors would be .big .label and .big .value
1 Like
Thnaks.
Where would I find the list of the CSS selectors for a given dashboard item? For example, what is the selector for the label and the options in a dropdown?
Tom
As far as I know there is no list of CSS selectors for dashboard widgets, you just have to use the browser inspector functions to explore. (Publishing such a list would be a service to dashboard tinkerers everywhere!)
For example, Firefox shows me that the text of a dropdown option is md-option .md-text and the full CSS path is
html body#nr-dashboard.nr-dashboard-theme.layout-column div#select_container_19.md-select-menu-container.md-active.md-clickable md-select-menu._md md-content#select_listbox_20._md md-option#select_option_29.md-ink-ripple div.md-text
I can style it with
md-option .md-text {
color: yellow;
}
Or more likely
.mycustomclass md-option .md-text {
color: yellow;
}
This one was surprisingly easy, sometimes I have to start with the full CSS path and experiment to find which parts are essential. I think it may be possible with the right selector to style any dashboard widget without having to use !important.
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
