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

ui_text have

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 ?

Welcome to forum :slight_smile:
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.

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

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.

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

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

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.

1 Like
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

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?

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

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

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

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

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

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

1 Like

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.

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.

1 Like

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