# Button colour settings - need help

**URL:** <https://discourse.nodered.org/t/button-colour-settings-need-help/24584>\
**Category:** Dashboard\
**Created:** [10 April 2020 11:29 UTC](https://discourse.nodered.org/t/button-colour-settings-need-help/24584 "2020-04-10T11:29:26Z")\
**Posts on this page:** 9\
**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:** [10 April 2020 11:29 UTC](https://discourse.nodered.org/t/button-colour-settings-need-help/24584/1 "2020-04-10T11:29:26Z")

</div>

(Dashboard? Not really sure, but....)

This button works, but I want to change the colours.

```auto
[{"id":"271d3520.9bb862","type":"ui_template","z":"e0bd2889.28018","group":"42382e93.83c508","name":"","order":6,"width":"2","height":"1","format":"\n<md-button class=\"vibrate filled touched smallfont rounded\" style=\"background-color:#e67e22\" ng-click=\"send({payload: 'Hello World'})\"> \n Red<br/>button\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":220,"y":220,"wires":[[]]},{"id":"42382e93.83c508","type":"ui_group","z":"","name":"Default","tab":"d109c4c9.944c98","disp":true,"width":"6"},{"id":"d109c4c9.944c98","type":"ui_tab","z":"","name":"Button examples","icon":"dashboard","order":8}]

```

I get that I can change the background colour by editing this part:  
`style="background-color:#e67e22"`

But how do I edit the _text_ colour?

---

<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:** [10 April 2020 11:49 UTC](https://discourse.nodered.org/t/button-colour-settings-need-help/24584/2 "2020-04-10T11:49:10Z")

</div>

color: red;

---

<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:** [10 April 2020 11:50 UTC](https://discourse.nodered.org/t/button-colour-settings-need-help/24584/3 "2020-04-10T11:50:19Z")

</div>

Yeah, thanks Steve, but you may have to put it in context how I put that in the line.

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [10 April 2020 11:51 UTC](https://discourse.nodered.org/t/button-colour-settings-need-help/24584/4 "2020-04-10T11:51:04Z")

</div>

in the button properties make your settings similar to this

![button](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/0/00a0e6a4afea36b5a1abd4b5e8bd7d18b4ce27b5.jpeg)

then in your message set the color, in my graphic labeled colorup to whatever color you choose  
something similar to  
msg = {  
labelup: "some text",  
colorup: "pink",  
backgroundup: "skyblue",  
}  
this should do 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:** [10 April 2020 11:52 UTC](https://discourse.nodered.org/t/button-colour-settings-need-help/24584/5 "2020-04-10T11:52:03Z")

</div>

Um, that isn't going to work either.

It is a different node.

It isn't a `button` node.

It is a `template` node.

---

<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:** [10 April 2020 11:53 UTC](https://discourse.nodered.org/t/button-colour-settings-need-help/24584/6 "2020-04-10T11:53:12Z")

</div>

> [@Trying\_to\_learn](#):
>
> how I put that in the line.

`style="color: red; background-color:#e67e22" `

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [10 April 2020 11:53 UTC](https://discourse.nodered.org/t/button-colour-settings-need-help/24584/7 "2020-04-10T11:53:14Z")

</div>

didn't load his flow, sorry, carry on

---

<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:** [10 April 2020 11:55 UTC](https://discourse.nodered.org/t/button-colour-settings-need-help/24584/8 "2020-04-10T11:55:25Z")

</div>

Sorry and thanks to all who replied.

I am not good at this stuff and maybe it is _easy_ but I am really flailing around in the dark trying to get what to do.

Appreciated.

---

<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:** [24 April 2020 11:55 UTC](https://discourse.nodered.org/t/button-colour-settings-need-help/24584/9 "2020-04-24T11:55:29Z")

</div>

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