# Msg.ui\_control change properties of a single ui\_text node

**URL:** <https://discourse.nodered.org/t/msg-ui-control-change-properties-of-a-single-ui-text-node/53458>\
**Category:** Dashboard\
**Created:** [9 November 2021 15:33 UTC](https://discourse.nodered.org/t/msg-ui-control-change-properties-of-a-single-ui-text-node/53458 "2021-11-09T15:33:55Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\
**Post date:** [9 November 2021 15:33 UTC](https://discourse.nodered.org/t/msg-ui-control-change-properties-of-a-single-ui-text-node/53458/1 "2021-11-09T15:33:56Z")

</div>

Hello guys. I wonder if it is possible to change color and size of 1 ui\_text widget (NOT all widgets in a group)? I succeeded with ui\_template, but all widgets in the group changed. I think that it is possible to do with "msg.ui\_control", but I don't know exactly how to do that. Can anyone give me an example? Where can I find what properties can be changed, and possible values. (I don't know much about HTML and CSS)

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [10 November 2021 20:05 UTC](https://discourse.nodered.org/t/msg-ui-control-change-properties-of-a-single-ui-text-node/53458/2 "2021-11-10T20:05:53Z")

</div>

You should have something like this as your CSS selector;

Given that -  
Tab Name: CSS Tester  
Group Name : Test HTML

CSS `<style>`

```auto
    #CSS_Tester_Test_HTML .nr-dashboard-text p {
        background-color: red;
        height: 2.0em;
        font-size: 1.5em;
    }

```

This will change the size etc. of the text in the widget. Have a look at Elements in the console (usually right click on the bit you are interested in in the ui tab of the browser and select 'inspect') to find any other parts of the ui-card-panel you want to change

---

<div class="post-metadata">

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\
**Post date:** [11 November 2021 07:00 UTC](https://discourse.nodered.org/t/msg-ui-control-change-properties-of-a-single-ui-text-node/53458/3 "2021-11-11T07:00:12Z")

</div>

@Buckskin , thanks for your reaction to my question. As I said, I am not an expert at this. So same more information to this subject would be welcome.

- Where do I place this code? Should it be in a ui\_template node or a function node?
- What is the variable 'p' exactly refering to?  
I already found out about inspecting inspecting web pages.

---

<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:** [11 November 2021 09:26 UTC](https://discourse.nodered.org/t/msg-ui-control-change-properties-of-a-single-ui-text-node/53458/4 "2021-11-11T09:26:14Z")

</div>

> [@henkkas](#):
>
> - Where do I place this code? Should it be in a ui\_template node or a function node?

yes it should go in a ui-template

> [@henkkas](#):
>
> - What is the variable 'p' exactly refering to?

the html `<p>`

---

<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:** [11 November 2021 09:30 UTC](https://discourse.nodered.org/t/msg-ui-control-change-properties-of-a-single-ui-text-node/53458/5 "2021-11-11T09:30:02Z")

</div>

If you "inspect" the text you see something like this.

```auto
<p class="label" ng-bind-html="me.item.getLabel()">My text is</p>
<p class="value" ng-bind-html="me.item.getText()">Hello World!</p>

```

The label and text are each contained in HTML `<p> ... </p>` tabs

Now try right clicking in the inspector on the p tag and select Copy CSS path (That's what I do in Firefox, other browsers may be slightly different). You should get something like this

> html body#nr-dashboard.nr-dashboard-theme.layout-column md-content.\_md.layout-column.flex section.layout-row.flex md-content.\_md.flex div#Tab\_Demo.masonry-container ui-card-panel#Demo\_Demo.visible div.nr-dashboard-cardpanel.layout-column div#Demo\_Demo\_cards.nr-dashboard-cardcontainer md-card.nr-dashboard-text.\_md.layout-row.layout-align-space-between-center.nr-dashboard-widget-text.visible p.label

My UI tab is called Demo and my group is also called Demo, so the bit of the CSS path which is specific to the group is `#Demo_Demo.visible` (`<div id="Demo_Demo" class="visible"> ... <div>`)  
And the text widget is a `<div class="nr-dashboard-text"> ... </div>`

So the CSS we need to specify in a template node is

```auto
<style>
    #Demo_Demo p {
        color: red;
        height: 2.0em;
        font-size: 1.5em;
    }
</style>

```

Note that this will turn all `<p>` text in the group red, you can confine the effect to just ui-text widgets with

```auto
<style>
    #Demo_Demo .nr-dashboard-text p {
        color: red;
        height: 2.0em;
        font-size: 1.5em;
    }
</style>

```

Edit - I see you asked about changing just one text widget.  
Use the node id like this

```auto
<style>
    [node-id="5020df5c1134df77"] p.value {
        color: red;
        height: 2.0em;
        font-size: 1.5em;
    }
    [node-id="5020df5c1134df77"] p.text {
        color: yellow;
        height: 2.0em;
        font-size: 1.5em;
    }
</style>

```

---

<div class="post-metadata">

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\
**Post date:** [11 November 2021 10:33 UTC](https://discourse.nodered.org/t/msg-ui-control-change-properties-of-a-single-ui-text-node/53458/6 "2021-11-11T10:33:36Z")

</div>

@jbudd , thanks for your extended explanation. I tried last solution you offered for only ONE widget. Copied the code and changed it to right node-id, and put it in a template node "Style". But it doesn't look that it has any effect on ui\_text node "Totaal Verbruik".

![afbeelding](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/b/8b596e88cff6962ec3e42beed8282774f46ef565.png)

---

<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:** [11 November 2021 10:36 UTC](https://discourse.nodered.org/t/msg-ui-control-change-properties-of-a-single-ui-text-node/53458/7 "2021-11-11T10:36:07Z")

</div>

Can you post a simple flow with just your template and two text elements so we can fix it?

---

<div class="post-metadata">

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\
**Post date:** [11 November 2021 10:42 UTC](https://discourse.nodered.org/t/msg-ui-control-change-properties-of-a-single-ui-text-node/53458/8 "2021-11-11T10:42:57Z")

</div>

```auto
[{"id":"db093249f6a5ce36","type":"ui_text","z":"79c709b9.e9273","group":"44bfa717147f7502","order":12,"width":2,"height":1,"name":"Totaal Verbruik","label":"kWh","format":"{{msg.payload | number: 1 }}","layout":"row-center","className":"","x":1220,"y":740,"wires":[]},{"id":"00720bcfeba0d4dc","type":"inject","z":"79c709b9.e9273","name":"Boot","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payloadType":"date","x":910,"y":780,"wires":[["482040e7803f2929"]]},{"id":"482040e7803f2929","type":"template","z":"79c709b9.e9273","name":"Style","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n [node-id=\"db093249f6a5ce36\"] p.value {\n color: red;\n height: 2.0em;\n font-size: 1.5em;\n }\n [node-id=\"db093249f6a5ce36\"] p.text {\n color: yellow;\n height: 2.0em;\n font-size: 1.5em;\n }\n</style>","output":"str","x":1050,"y":780,"wires":[[]]},{"id":"5859353695b25b46","type":"inject","z":"79c709b9.e9273","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"12.3","payloadType":"num","x":1000,"y":740,"wires":[["db093249f6a5ce36"]]},{"id":"44bfa717147f7502","type":"ui_group","name":"Energy flow (kWh)","tab":"5c9d4b33.90508c","order":5,"disp":true,"width":"8","collapse":false,"className":""},{"id":"5c9d4b33.90508c","type":"ui_tab","name":"EBS -Vandaag- ","icon":"home","order":1,"disabled":false,"hidden":false}]

```

---

<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:** [11 November 2021 10:49 UTC](https://discourse.nodered.org/t/msg-ui-control-change-properties-of-a-single-ui-text-node/53458/9 "2021-11-11T10:49:47Z")

</div>

Put your CSS in a template node. Edit - A Dashboard Template node!  
You don't have to connect any wires to it.  
 ![Untitled 8](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/5/d5d1a06bd362bf7fa6ee115e8166df29c4b07f32.jpeg)

 ![Untitled 9](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/e/9e85bc026f977f075df7523381e8e8bd3d602671.jpeg)

---

<div class="post-metadata">

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\
**Post date:** [11 November 2021 11:11 UTC](https://discourse.nodered.org/t/msg-ui-control-change-properties-of-a-single-ui-text-node/53458/10 "2021-11-11T11:11:24Z")

</div>

@jbudd , thanks very much. I had to change "p.text" to "p.label", but now it's working!!  
I will show you final result later on. 😃  
Also beginning to get a grip on all of this too!!!

---

<div class="post-metadata">

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\
**Post date:** [11 November 2021 15:59 UTC](https://discourse.nodered.org/t/msg-ui-control-change-properties-of-a-single-ui-text-node/53458/11 "2021-11-11T15:59:57Z")

</div>

@jbudd , this is what I tried to make. It's not GREAT, but good enough for me.

@zenofmud , @Buckskin , thanks for the help from all of you.!!!

![afbeelding](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/5/f5059c77a535204349c7530bc219e54dc4ba9715.png)

---

<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:** [12 November 2021 10:27 UTC](https://discourse.nodered.org/t/msg-ui-control-change-properties-of-a-single-ui-text-node/53458/12 "2021-11-12T10:27:54Z")

</div>

> [@henkkas](#):
>
> I had to change "p.text" to "p.label",

Ah, you spotted my "deliberate" mistake! 😊

Nice looking dashboard, well done.

---

<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:** [26 November 2021 10:28 UTC](https://discourse.nodered.org/t/msg-ui-control-change-properties-of-a-single-ui-text-node/53458/13 "2021-11-26T10:28:50Z")

</div>

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