# Using css field in dashboard widget

**URL:** <https://discourse.nodered.org/t/using-css-field-in-dashboard-widget/72743>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [26 December 2022 19:28 UTC](https://discourse.nodered.org/t/using-css-field-in-dashboard-widget/72743 "2022-12-26T19:28:39Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![tcr000](https://avatars.discourse-cdn.com/v4/letter/t/65b543/32.png) [@tcr000](https://discourse.nodered.org/u/tcr000)\
**Post date:** [26 December 2022 19:28 UTC](https://discourse.nodered.org/t/using-css-field-in-dashboard-widget/72743/1 "2022-12-26T19:28:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [26 December 2022 21:46 UTC](https://discourse.nodered.org/t/using-css-field-in-dashboard-widget/72743/2 "2022-12-26T21:46:19Z")

</div>

Here is a little example that should get you going:

```auto
[{"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}]

```

 ![Screen Shot 2022-12-26 at 4.45.29 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/3/d3dfa5c4aa472fc8a4df34fea768a4fceea3e950.png)

---

<div class="post-metadata">

**Author:** ![tcr000](https://avatars.discourse-cdn.com/v4/letter/t/65b543/32.png) [@tcr000](https://discourse.nodered.org/u/tcr000)\
**Post date:** [26 December 2022 23:32 UTC](https://discourse.nodered.org/t/using-css-field-in-dashboard-widget/72743/3 "2022-12-26T23:32:00Z")

</div>

Very clear. Looks like I was just not setting a property that could be set.

Thanks,  
Tom

---

<div class="post-metadata">

**Author:** ![tcr000](https://avatars.discourse-cdn.com/v4/letter/t/65b543/32.png) [@tcr000](https://discourse.nodered.org/u/tcr000)\
**Post date:** [26 December 2022 23:37 UTC](https://discourse.nodered.org/t/using-css-field-in-dashboard-widget/72743/4 "2022-12-26T23:37:24Z")

</div>

Suppose I wanted to set the label to be black and the value to be red?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [27 December 2022 01:02 UTC](https://discourse.nodered.org/t/using-css-field-in-dashboard-widget/72743/6 "2022-12-27T01:02:47Z")

</div>

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**

---

<div class="post-metadata">

**Author:** ![tcr000](https://avatars.discourse-cdn.com/v4/letter/t/65b543/32.png) [@tcr000](https://discourse.nodered.org/u/tcr000)\
**Post date:** [29 December 2022 02:08 UTC](https://discourse.nodered.org/t/using-css-field-in-dashboard-widget/72743/7 "2022-12-29T02:08:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [29 December 2022 03:13 UTC](https://discourse.nodered.org/t/using-css-field-in-dashboard-widget/72743/8 "2022-12-29T03:13:55Z")

</div>

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

```auto
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

```auto
md-option .md-text {
color: yellow;
}

```

Or more likely

```auto
.mycustomclass md-option .md-text {
color: yellow;
}

```

 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/5/b5673d574b049b145a6c552e639c175014819b58.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [28 January 2023 03:14 UTC](https://discourse.nodered.org/t/using-css-field-in-dashboard-widget/72743/9 "2023-01-28T03:14:20Z")

</div>

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