# Allow msg.class to add md-card to display in widget

**URL:** <https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640>\
**Category:** Dashboard\
**Created:** [8 February 2021 23:48 UTC](https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640 "2021-02-08T23:48:52Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![twocolors](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/twocolors/32/36787_2.png) [@twocolors](https://discourse.nodered.org/u/twocolors)\
**Post date:** [8 February 2021 23:48 UTC](https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640/1 "2021-02-08T23:48:52Z")

</div>

ui\_text have

```auto
The widget also has a class of nr-dashboard-widget-{the_widget_label_with_underscores} which can be used for additional styling if required. You may need to use the !important flag to override the theme.

```

can add msg.class to all widget for used adding styles?

I would like to keep the original dashboard style, but also edit the styles of some system widgets.

Can you help ?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [8 February 2021 23:55 UTC](https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640/2 "2021-02-08T23:55:11Z")

</div>

Welcome to forum 🙂  
You can override the CSS of dashboard elements.  
Do search here in forum with keywords "dashboard css" and you find many threads with many examples.

---

<div class="post-metadata">

**Author:** ![twocolors](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/twocolors/32/36787_2.png) [@twocolors](https://discourse.nodered.org/u/twocolors)\
**Post date:** [9 February 2021 00:13 UTC](https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640/3 "2021-02-09T00:13:34Z")

</div>

Thanks, I understand what you mean, but I only want to change one widget.  
I can change the style through the group's id, but then all single-type widgets in this group will change.

It is also possible to disable any widget

```auto
Any widget can be disabled by passing in a msg.enabled property set to false;. Note: this doesn't stop the widget receiving messages but does stop inputs being active and does re-style the widget.

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 February 2021 06:21 UTC](https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640/4 "2021-02-09T06:21:51Z")

</div>

You'll need to be much more specific then. Widgets are different, many ways to do things ...

---

<div class="post-metadata">

**Author:** ![twocolors](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/twocolors/32/36787_2.png) [@twocolors](https://discourse.nodered.org/u/twocolors)\
**Post date:** [9 February 2021 07:55 UTC](https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640/5 "2021-02-09T07:55:24Z")

</div>

Perhaps you are right, I would like the msg.class to work the same way as msg.enabled

It would be cool to change the style for only one widget

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 February 2021 14:10 UTC](https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640/6 "2021-02-09T14:10:11Z")

</div>

I don't think such functionality will be added. Modifications of elements and their properties is supported today. Using the `ui_template` node you can make any kind of smart query's with it to reach what ever element or property is needed. It is advanced usage of dashboard. And that can go to pretty high extremes.

The overall idea behind the dashboard is to help any user to create controls and/or visualize the data/states of the running node-red flow's. Do it with mostly near zero knowledge of front-end languages and technology.

If you feel that dashboard solution is too limited, there is `ui-builder` node, which gives to you full control over the front-end solution.

---

<div class="post-metadata">

**Author:** ![twocolors](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/twocolors/32/36787_2.png) [@twocolors](https://discourse.nodered.org/u/twocolors)\
**Post date:** [9 February 2021 18:47 UTC](https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640/7 "2021-02-09T18:47:28Z")

</div>

```auto
Do it with mostly near zero knowledge of front-end languages and technology.

```

today we have msg.enabled, msg.ui\_control, icons built and you think it's "near zero knowledge"

msg.class will not be superfluous for possible costamization

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 February 2021 19:13 UTC](https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640/8 "2021-02-09T19:13:24Z")

</div>

If user has ability to show icon, it is never told that actually the string he/she writes is class name. But why it made such way? Because of any other way it takes somebody to maintain huge mappings.  
Enabled/disabled is condition brought to be controlled at the user level. If it is also the class name, coincident, but not always the case.

The msg.ui\_control is part of advanced usage of dashboard possibilities. Most widgets (except simple ones) are built on top of some JavaScript library. To open up all possible configuration options with widget configuration page, there will be newspaper to read end to end. That's why it is necessary. But even then, those are widget options. And mostly it is the author decision how much and what are the properties to be public and changeable.

All those help the dashboard from one or other side to be easy to use but still provide plenty of options to be reasonably custom.

But OK. You want to change some property for `md-card` by sending message . (ignoring the fact that md-card is not the widget but container to maintain the layout)

What property and why?

---

<div class="post-metadata">

**Author:** ![twocolors](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/twocolors/32/36787_2.png) [@twocolors](https://discourse.nodered.org/u/twocolors)\
**Post date:** [9 February 2021 19:42 UTC](https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640/9 "2021-02-09T19:42:38Z")

</div>

I just want to add a class to the **md-card class** that is passed to msg.class.

Now this works for example with **ui\_text** if set label

```auto
class="nr-dashboard-text _md layout-column layout-align-center-center **nr-dashboard-widget-test_label** visible"

```

This will make it possible to make such widgets from system nodes without breaking the rest

 ![photo_2021-02-09 22.38.35](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/f/8fd6a741f5d7ed8dafd34cc96199b5edca99107e.jpeg)

In this example, I would like the switch to remain with the system css

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 February 2021 19:58 UTC](https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640/10 "2021-02-09T19:58:32Z")

</div>

So you have already some custom CSS rules applied. I cant advise anything without seeing it.

---

<div class="post-metadata">

**Author:** ![twocolors](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/twocolors/32/36787_2.png) [@twocolors](https://discourse.nodered.org/u/twocolors)\
**Post date:** [9 February 2021 20:17 UTC](https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640/11 "2021-02-09T20:17:43Z")

</div>

yes, but i want use custom CSS only for one md-card on page not for all md-card

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 February 2021 20:38 UTC](https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640/12 "2021-02-09T20:38:10Z")

</div>

`md-card` is child of the `div` which has an `id` in form of "Tabname\_groupname\_cards". Use the `:nth-child()` selector to reach each individual `md-card`. [CSS :nth-child() Selector](https://www.w3schools.com/cssref/sel_nth-child.asp)

---

<div class="post-metadata">

**Author:** ![twocolors](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/twocolors/32/36787_2.png) [@twocolors](https://discourse.nodered.org/u/twocolors)\
**Post date:** [10 February 2021 14:53 UTC](https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640/13 "2021-02-10T14:53:04Z")

</div>

I can do it through id md-card, through jquery, there are many solutions how to solve this problem.

But I want to use a solution without "crutches", what I propose will allow the community to custom CSS and easily use them for different widgets and not for all.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [10 February 2021 15:55 UTC](https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640/14 "2021-02-10T15:55:13Z")

</div>

The way how the dashboard is improved day by day is that if you have an idea then:

1. You discuss the idea with the community and with the owners. You may get support behind the idea. Sometimes you don't. The positive result of the discussion is when the owners let you know that the thing has potential value and they are happy to take pull request when you are done.

2. You'll make the thing (or somebody will make it), sharing beta versions and discuss with community about the possible issues and improvements, with the constructive feedback and support you make your idea better and at some day you present the final pre-release.

3. You'll get feedback from owners that at this point they are happy to take the pull request.

4. If everything went well (and why shouldn't) , the next release contains your thing and you made a lot of people happy.

I am not currently too supportive about the idea. But this is only my opinion. I don't make any decisions. I'm regular user like most of us.

---

<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:** [12 March 2021 15:55 UTC](https://discourse.nodered.org/t/allow-msg-class-to-add-md-card-to-display-in-widget/40640/15 "2021-03-12T15:55:35Z")

</div>

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