# I am still not getting thse \`buttons\` and their settings

**URL:** <https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843>\
**Category:** Dashboard\
**Created:** [15 April 2020 00:17 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843 "2020-04-15T00:17:14Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [15 April 2020 00:17 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/1 "2020-04-15T00:17:14Z")

</div>

(Believe me I don't like this any more than _you_)

This is really driving me batty.

This is the `button`:  
It works. I see the icon.

```auto
[{"id":"5ef1b432.4ab89c","type":"ui_button","z":"26262ba1.62dcbc","name":"","group":"1430591a.926dbf","order":0,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"fa-toggle-on fa-rotate-90","payload":"","payloadType":"str","topic":"","x":610,"y":560,"wires":[[]]},{"id":"1430591a.926dbf","type":"ui_group","name":"Group 2","tab":"aa487daa.33c1c","order":2,"disp":true,"width":6},{"id":"aa487daa.33c1c","type":"ui_tab","z":"","name":"Tasmota stuff","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

So, I replace the `icon` field with `{{msg.icon}}` and have this flow:

```auto
[{"id":"41f64a6c.76638c","type":"change","z":"26262ba1.62dcbc","name":"Icon","rules":[{"t":"set","p":"icon","pt":"msg","to":"fa-toggle-on fa-rotate-90","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"lime","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":560,"wires":[["5ef1b432.4ab89c","fd9c7398.8dfbb"]]},{"id":"38c571db.9db896","type":"inject","z":"26262ba1.62dcbc","name":"","topic":"","payload":"X","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":310,"y":560,"wires":[["41f64a6c.76638c"]]},{"id":"5ef1b432.4ab89c","type":"ui_button","z":"26262ba1.62dcbc","name":"","group":"1430591a.926dbf","order":0,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"{{msg.icon}}","payload":"","payloadType":"str","topic":"","x":610,"y":560,"wires":[[]]},{"id":"fd9c7398.8dfbb","type":"debug","z":"26262ba1.62dcbc","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":610,"y":520,"wires":[]},{"id":"1430591a.926dbf","type":"ui_group","name":"Group 2","tab":"aa487daa.33c1c","order":2,"disp":true,"width":6},{"id":"aa487daa.33c1c","type":"ui_tab","z":"","name":"Tasmota stuff","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

I see this in the `debug` node:

`{"_msgid":"1fdf1d24.0023e3","topic":"","payload":"X","icon":"fa-toggle-on fa-rotate-90","background":"lime"}`

There is a `msg.icon` and it is the same as it is/was when it was in the `button` node.

I deploy the flow and press the `inject` button.

All I see is a button with a `?` and the word `button` written after it.  
Editing the `button` node and putting the `fa-toggle-on fa-rotate-90` back in the `icon` field and deploying: It works and I see the `fa-toggle-on fa-rotate-90` icon clear as.

I am really paying penance for my mistakes.

I don't know the _magic_ to make this all in a `template` node.  
Even if I did, I use different kinds of buttons there too and don't know if they allow `enabled` conditions.

So the problem is:  
Why is it when I enter the icon name directly in the `button` node (even with rotation) it works.  
If I inject it as `msg.icon` it doesn't?

---

<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:** [15 April 2020 05:37 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/2 "2020-04-15T05:37:19Z")

</div>

Here is one a bit more advanced way to control icons on dashboard button.

```auto
[{"id":"513c200a.1cc12","type":"ui_button","z":"eab6da64.c00bf8","name":"","group":"c2bad0c2.83c31","order":0,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-play bigIcon","payload":"","payloadType":"str","topic":"","x":580,"y":510,"wires":[[]]},{"id":"2425789.9a1dd88","type":"ui_template","z":"eab6da64.c00bf8","group":"c2bad0c2.83c31","name":"icon style","order":1,"width":0,"height":0,"format":"<style>\n .bigIcon{\n font-size:2em;\n transition: 1s;\n }\n .bigIcon.red{\n color:red;\n }\n .bigIcon.blue{\n color:blue;\n }\n \n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":580,"y":440,"wires":[[]]},{"id":"a11095e5.3c8718","type":"inject","z":"eab6da64.c00bf8","name":"inject","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":480,"wires":[["579fc56b.1ca04c"]]},{"id":"43b501c2.8b6f5","type":"inject","z":"eab6da64.c00bf8","name":"inject","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":520,"wires":[["60956eea.1eab1"]]},{"id":"579fc56b.1ca04c","type":"change","z":"eab6da64.c00bf8","name":"","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-pause bigIcon","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":480,"wires":[["513c200a.1cc12"]]},{"id":"60956eea.1eab1","type":"change","z":"eab6da64.c00bf8","name":"","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-play bigIcon red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":520,"wires":[["513c200a.1cc12"]]},{"id":"ab1b058.e5a4af8","type":"inject","z":"eab6da64.c00bf8","name":"inject","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":560,"wires":[["2acee86f.adc8e8"]]},{"id":"2acee86f.adc8e8","type":"change","z":"eab6da64.c00bf8","name":"","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-stop bigIcon blue","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":560,"wires":[["513c200a.1cc12"]]},{"id":"c2bad0c2.83c31","type":"ui_group","z":"","name":"Default","tab":"9730248a.782dc8","disp":true,"width":"6","collapse":false},{"id":"9730248a.782dc8","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [15 April 2020 06:48 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/3 "2020-04-15T06:48:25Z")

</div>

(Sorry for slow reply.)

I am not really understanding it, but I think you are "name swapping" (or cheating) with how the payload is handled.

I am working on rebuilding a lot of remote controls I had stored on the PC.

I do appreciate your time.  
Believe me I will look at it.

But I think I am on a bit of a roll just now and want to keep the energy going while it is as it is.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [15 April 2020 06:56 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/4 "2020-04-15T06:56:57Z")

</div>

> [@Trying\_to\_learn](#):
>
> So, I replace the `icon` field with `{{msg.icon}}` and have this flow

Spit balling...  
What happens if you try {{icon}} in the icon field? Or try triple curly brackets?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [15 April 2020 07:03 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/5 "2020-04-15T07:03:11Z")

</div>

Yeah, I'm stupid.

It seems to work, though now in the function node I have this:  
` msg= {icon: '<font color = "lime"><i class="fa fa-toggle-on fa-rotate-90 fa-3x"></i></font>'};`

In the `button` node I change it to `{{icon}}` and I see the icon, but to the left there is a (white) circle with a question mark in it. Then the icon.

I'll look at it and see if I can nut it out.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [15 April 2020 07:06 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/6 "2020-04-15T07:06:11Z")

</div>

Possibly the icon field is only expecting an icon class? (I'm guessing)

What do you see if you inspect that in Dev tools?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [15 April 2020 07:08 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/7 "2020-04-15T07:08:39Z")

</div>

> [@Steve-Mcl](#):
>
> What do you see if you inspect that in Dev tools?

Above my skill set.

I shall have to enqueue all this to look at later on.

---

<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:** [15 April 2020 07:09 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/8 "2020-04-15T07:09:07Z")

</div>

That's why I did my example. Icon treatment goes a bit differently than other button properties.  
Take a look this example then. I put other properties into it, to have full control over button appearance.

```auto
[{"id":"513c200a.1cc12","type":"ui_button","z":"eab6da64.c00bf8","name":"","group":"c2bad0c2.83c31","order":0,"width":"2","height":"1","passthru":false,"label":"{{msg.payload}}","tooltip":"","color":"","bgcolor":"{{msg.background}}","icon":"fa-play bigIcon","payload":"","payloadType":"str","topic":"","x":580,"y":510,"wires":[[]]},{"id":"2425789.9a1dd88","type":"ui_template","z":"eab6da64.c00bf8","group":"c2bad0c2.83c31","name":"icon style","order":1,"width":0,"height":0,"format":"<style>\n .bigIcon{\n font-size:2em;\n text-shadow: 1px 1px 5px #00000099;\n }\n .bigIcon.red{\n color:red;\n \n }\n .bigIcon.blue{\n color:blue;\n }\n \n \n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":590,"y":470,"wires":[[]]},{"id":"a11095e5.3c8718","type":"inject","z":"eab6da64.c00bf8","name":"inject","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":480,"wires":[["579fc56b.1ca04c"]]},{"id":"43b501c2.8b6f5","type":"inject","z":"eab6da64.c00bf8","name":"inject","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":520,"wires":[["60956eea.1eab1"]]},{"id":"579fc56b.1ca04c","type":"change","z":"eab6da64.c00bf8","name":"","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-pause bigIcon","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":480,"wires":[["513c200a.1cc12"]]},{"id":"60956eea.1eab1","type":"change","z":"eab6da64.c00bf8","name":"","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-play bigIcon red","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"blue","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":520,"wires":[["513c200a.1cc12"]]},{"id":"ab1b058.e5a4af8","type":"inject","z":"eab6da64.c00bf8","name":"inject","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":560,"wires":[["2acee86f.adc8e8"]]},{"id":"2acee86f.adc8e8","type":"change","z":"eab6da64.c00bf8","name":"","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-stop bigIcon blue","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"orange","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":560,"wires":[["513c200a.1cc12"]]},{"id":"f5ae9eaf.20e84","type":"ui_button","z":"eab6da64.c00bf8","name":"","group":"c2bad0c2.83c31","order":3,"width":0,"height":0,"passthru":false,"label":"A","tooltip":"","color":"","bgcolor":"","icon":"","payload":"A","payloadType":"str","topic":"","x":180,"y":630,"wires":[["579fc56b.1ca04c"]]},{"id":"a0b194b6.d22ee8","type":"ui_button","z":"eab6da64.c00bf8","name":"","group":"c2bad0c2.83c31","order":3,"width":0,"height":0,"passthru":false,"label":"B","tooltip":"","color":"","bgcolor":"","icon":"","payload":"B","payloadType":"str","topic":"","x":180,"y":670,"wires":[["60956eea.1eab1"]]},{"id":"c5eddbbd.c07748","type":"ui_button","z":"eab6da64.c00bf8","name":"","group":"c2bad0c2.83c31","order":3,"width":0,"height":0,"passthru":false,"label":"C","tooltip":"","color":"","bgcolor":"","icon":"","payload":"C","payloadType":"str","topic":"","x":180,"y":710,"wires":[["2acee86f.adc8e8"]]},{"id":"c2bad0c2.83c31","type":"ui_group","z":"","name":"Default","tab":"9730248a.782dc8","disp":true,"width":"6","collapse":false},{"id":"9730248a.782dc8","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [15 April 2020 07:22 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/9 "2020-04-15T07:22:59Z")

</div>

> [@hotNipi](#):
>
> ```auto
> [{"id":"513c200a.1cc12","type":"ui_button","z":"eab6da64.c00bf8","name":"","group":"c2bad0c2.83c31","order":0,"width":"2","height":"1","passthru":false,"label":"{{msg.payload}}","tooltip":"","color":"","bgcolor":"{{msg.background}}","icon":"fa-play bigIcon","payload":"","payloadType":"str","topic":"","x":580,"y":510,"wires":[[]]},{"id":"2425789.9a1dd88","type":"ui_template","z":"eab6da64.c00bf8","group":"c2bad0c2.83c31","name":"icon style","order":1,"width":0,"height":0,"format":"<style>\n .bigIcon{\n font-size:2em;\n text-shadow: 1px 1px 5px #00000099;\n }\n .bigIcon.red{\n color:red;\n \n }\n .bigIcon.blue{\n color:blue;\n }\n \n \n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":590,"y":470,"wires":[[]]},{"id":"a11095e5.3c8718","type":"inject","z":"eab6da64.c00bf8","name":"inject","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":480,"wires":[["579fc56b.1ca04c"]]},{"id":"43b501c2.8b6f5","type":"inject","z":"eab6da64.c00bf8","name":"inject","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":520,"wires":[["60956eea.1eab1"]]},{"id":"579fc56b.1ca04c","type":"change","z":"eab6da64.c00bf8","name":"","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-pause bigIcon","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":480,"wires":[["513c200a.1cc12"]]},{"id":"60956eea.1eab1","type":"change","z":"eab6da64.c00bf8","name":"","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-play bigIcon red","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"blue","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":520,"wires":[["513c200a.1cc12"]]},{"id":"ab1b058.e5a4af8","type":"inject","z":"eab6da64.c00bf8","name":"inject","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":560,"wires":[["2acee86f.adc8e8"]]},{"id":"2acee86f.adc8e8","type":"change","z":"eab6da64.c00bf8","name":"","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-stop bigIcon blue","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"orange","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":560,"wires":[["513c200a.1cc12"]]},{"id":"f5ae9eaf.20e84","type":"ui_button","z":"eab6da64.c00bf8","name":"","group":"c2bad0c2.83c31","order":3,"width":0,"height":0,"passthru":false,"label":"A","tooltip":"","color":"","bgcolor":"","icon":"","payload":"A","payloadType":"str","topic":"","x":180,"y":630,"wires":[["579fc56b.1ca04c"]]},{"id":"a0b194b6.d22ee8","type":"ui_button","z":"eab6da64.c00bf8","name":"","group":"c2bad0c2.83c31","order":3,"width":0,"height":0,"passthru":false,"label":"B","tooltip":"","color":"","bgcolor":"","icon":"","payload":"B","payloadType":"str","topic":"","x":180,"y":670,"wires":[["60956eea.1eab1"]]},{"id":"c5eddbbd.c07748","type":"ui_button","z":"eab6da64.c00bf8","name":"","group":"c2bad0c2.83c31","order":3,"width":0,"height":0,"passthru":false,"label":"C","tooltip":"","color":"","bgcolor":"","icon":"","payload":"C","payloadType":"str","topic":"","x":180,"y":710,"wires":[["2acee86f.adc8e8"]]},{"id":"c2bad0c2.83c31","type":"ui_group","z":"","name":"Default","tab":"9730248a.782dc8","disp":true,"width":"6","collapse":false},{"id":"9730248a.782dc8","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
> 
> ```

Again: Thanks, I am looking at it.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [15 April 2020 09:50 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/10 "2020-04-15T09:50:38Z")

</div>

Sorry, but......

I kind of get the structure. And I am so not getting it in others.

First off the `template` node.  
😕

Ok, the code:

```auto
<style>
    .bigIcon{
        font-size:2em;
        text-shadow: 1px 1px 5px #00000099;
    }
    .bigIcon.red{
        color:red;
        
    }
    .bigIcon.blue{
       color:blue;
    }
    .bingIcon.green{
        color:lime;
    }
</style>

```

I added the `green` part to try something.  
I used `lime` only that I don't really like the `green` as it is, so I call it green and use lime for the colour.  
That shouldn't really matter in the scheme of things on if they work or not.

I'll get back to it shortly.

But I am not quite understanding what it _does_. Suffice to say it does something about _creating_ something like `.bigIcon{ }`. But it has _subclasses_ of (from the original) of `.red` and `.blue`.

So it does what ever it does. Trying to understand I step back and look at the bigger picture.  
(Sort of)

`A` looks like this:

```auto
[{"id":"4b67cfaf.3954c8","type":"change","z":"b25fd092.bcc758","name":"A","rules":[{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-pause bigIcon","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":360,"wires":[["8700b1ed.b7b5c"]]}]

```

Ok, it sets `msg.ui_control.icon` to `fa-pause bigIcon`, with `msg.background` set to `green`.  
So it _creates_ bigIcon from `fa-pause`. The background colour is `green`.

With you to there.  
The colours match.  
Background colour is green. The white icon is because no colour was declared.

So, "Let's put it to the test".

Looking at the `B` option now:  
`fa-play bigIcon red`  
Now the `red` is added.

I'm guessing the `red` is from that thing in the `template` node?  
I've tried it changing `C` option from blue to red and it worked.

So, the `green` bit I put in...... Can I use it?

No, seems not to work. I make that work.

I set the `change` node line to `fa-stop bigIcon green`  
Deployed it and when I press the `C` button, the stop button is/was white.

So I am missing something there. Yes, I am _spit balling_ (as called by @Steve-Mcl) but when I don't understand anything, all I can do is try.

So as much as it looks interesting, I am missing some serious stuff on how to define colours of the icons.

---

<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:** [15 April 2020 10:01 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/11 "2020-04-15T10:01:05Z")

</div>

> [@Trying\_to\_learn](#):
>
> .bingIcon.green

Check your spelling 😏

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [15 April 2020 10:12 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/12 "2020-04-15T10:12:00Z")

</div>

(Yes, I'm really not the sharpest tool in the shed.)

Ok. So _how does the structure_ work?

In the `template` node, the `bigIcon` is created.  
You set/define the font size and drop shadow is defined. Not sure what the numbers mean, but I can live with that for now.

You then create 2 (I made it 3) sub-sections/sets of that with the part:

```auto
    .bigIcon.red{
        color:red;
        
    }

```

Which defines the colour of the icon. Ok.

In the `change` nodes, you create the `msg.ui_control.icon` from text which has a structure:  
`fa-icon` bigIcon (the icon created in the `template` node) `colour`.

Then in the next line, you define the background colour also.

In the `button` node, the icon field has `fa-play bigIcon` in it.  
I'm guessing that is the default icon. Yes?  
But if so, I can't get how the _new_ icon overwrites that.

I could negate the `label` field if I don't want the text showing.

I see you have replied. So I won't keep posting on this thread.

---

<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:** [15 April 2020 10:26 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/13 "2020-04-15T10:26:13Z")

</div>

> [@Trying\_to\_learn](#):
>
> Not sure what the numbers mean, but I can live with that for now.

1em = default size.

> [@Trying\_to\_learn](#):
>
> In the `button` node, the icon field has `fa-play bigIcon` in it.  
> I'm guessing that is the default icon. Yes?

Yes. If left empty there will be no icon at startup.

`msg.ui_control.icon`

As you see, to change the icon and any properties of icon, the `msg.ui_control` is used.  
That is the different treatment from button background for example where properties can be sent directly via `msg.something`.

Now the value of `msg.ui_control.icon`

`fa-play` - the shape of icon.  
`bigIcon` - name of class added to that icon.  
`red` - subclass of that class.

You can have many of custom CSS classes added to icon which makes full new playground how to style the icon.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [15 April 2020 10:36 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/14 "2020-04-15T10:36:43Z")

</div>

> [@Trying\_to\_learn](#):
>
> Not sure what the numbers mean, but I can live with that for now.

I meant the `text-shadow: 1px 1px 5px #00000099;`  
I'm guessing that is the size of the drop shadow and colour.

Guessing: left, bottom, right. #00000099 - the colour? RGB

> [@hotNipi](#):
>
> You can have many of custom CSS classes added to icon which makes full new playground how to style the icon.

Wow! Yes, I am kind of picking up on that.

I need to learn how to use them. (My problem)

But what about size and _two messages for pressing_ (one on down and one on up)?

Sorry. Don't fret on that because I think it is beyond the scope of the node, and may be why I may need to use that other way.

But anyway: I have learnt a lot from this.

But in the mean time I am busting my _butt_ trying to get back all the flows I lost.  
(the machine had about 30 tabs in Node-Red with flows, etc)  
That's a lot of code.

Some I can do without and some I would like to get working again.

---

<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:** [15 April 2020 10:38 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/15 "2020-04-15T10:38:30Z")

</div>

> [@Trying\_to\_learn](#):
>
> text-shadow: 1px 1px 5px #00000099

Actually x, y, blur, RGBA (A - alpha or transparency)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [15 April 2020 10:48 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/16 "2020-04-15T10:48:33Z")

</div>

Yeah, ok.

As I said: Not really important for having it work.

On the size of the button.

The `button` node makes the buttons at a given size.  
When I use the `template` node it makes the _buttons_ smaller.  
Further _tweaking_ it with colour settings, the button gets even smaller.

Would that fall under this thread?  
(sorry, it may be good to learn if you could help and I can get my head around it.)

(Shooting myself in the foot now)

I have .... 7 - 8 RasPies with NR installed and running stuff.  
I don't know if it would be worth retrospectivly updating them all.

But yes it would be a good idea to establish a better way of building a `button` that could then be used for any time I need a button.

---

<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:** [15 April 2020 10:56 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/17 "2020-04-15T10:56:32Z")

</div>

There is trick to have ui\_template with full size  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/a/da56589f0341719f186fab366da9809a7cfb4526.png)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [15 April 2020 11:04 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/18 "2020-04-15T11:04:10Z")

</div>

Again: Thanks.

I shall have to play with that and see what happens. Or: What a mess I can make. 😉

I think it is time I shut the computer down (again) my shoulders are killing me because I don't have an ergonomic set up.

All the best.  
Again: Your help is appreciated.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [15 April 2020 13:00 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/19 "2020-04-15T13:00:36Z")

</div>

I think you might benefit from spending a couple of hours working through this css tutorial. I mean working through it, doing the exercises and so on, so you actually understand the basics of what css is all about.  
[https://www.w3schools.com/Css/](https://www.w3schools.com/Css/)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [15 April 2020 20:36 UTC](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843/20 "2020-04-15T20:36:47Z")

</div>

Thanks Colin.

I shall look into that soon.

It isn't as though I have much else happening just now.

[Next page](https://discourse.nodered.org/t/i-am-still-not-getting-thse-buttons-and-their-settings/24843.md?page=2)