# Dashboard buttons easy colour state change?

**URL:** <https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645>\
**Category:** Dashboard\
**Created:** [27 November 2020 19:51 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645 "2020-11-27T19:51:46Z")\
**Posts on this page:** 16\
**Page:** 3

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [29 November 2020 15:47 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/41 "2020-11-29T15:47:36Z")

</div>

Oh I like that painter.

---

<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:** [29 November 2020 16:15 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/42 "2020-11-29T16:15:31Z")

</div>

Add this (and adjust the vertical position of icon with the top property)

```auto
#Home_Default_Group_cards > md-card > md-input-container > label{
    position: relative;
    top: 15px;
}

```

For `#Home_Default_Group_cards > md-card > md-input-container` the `border-radius:16px;` should be given in pixels, (you may change this for all elements where you need rounded corners, then they match)

And the color picker conf - size 2x1 and the label  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/2/f25cc6807220909ae51ac86d9fdae49fbee2e2f0.png)

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [29 November 2020 20:35 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/43 "2020-11-29T20:35:27Z")

</div>

I'd like to take this opportunity to thank both you and DaveCJ - this is all working now...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/8/78826499a365c191da2b9b7c79a5cbd06a03b512.png)

---

<div class="post-metadata">

**Author:** ![Kazzy](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@Kazzy](https://discourse.nodered.org/u/Kazzy)\
**Post date:** [29 November 2020 22:01 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/44 "2020-11-29T22:01:26Z")

</div>

This looks great..i probably would just colour the Paint Brush the selected colour

---

<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:** [29 November 2020 22:15 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/45 "2020-11-29T22:15:04Z")

</div>

You probably don't want to do it cos if it matches the background color then the art means nothing.

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [30 November 2020 06:40 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/46 "2020-11-30T06:40:07Z")

</div>

As you might expect I spent half the night putting the coding on my blog so others can benefit. [https://tech.scargill.net/node-red-dashboard-for-2021/](https://tech.scargill.net/node-red-dashboard-for-2021/)

Thanks again. It's all becoming a lot clearer.For some time I've been determined to stay within Node-Red for my home control dashboard and this new knowledge will make life easier. In the blog entry I've linked back as a memory jogger to an earlier entry where I figured out how to add haptic feedback to the buttons - amazing the things you forget when not used regularly.

---

<div class="post-metadata">

**Author:** ![davidparker](https://avatars.discourse-cdn.com/v4/letter/d/9d8465/32.png) [@davidparker](https://discourse.nodered.org/u/davidparker)\
**Post date:** [1 December 2020 08:45 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/47 "2020-12-01T08:45:18Z")

</div>

Great thread Pete and hotnipi. I know you are an Android man Pete, but for us poor iPhone souls out here, did anybody get haptic feedback to work?

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [1 December 2020 16:43 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/48 "2020-12-01T16:43:43Z")

</div>

Hi Davifdd - yes ages ago I did get haptic workin on an md\_button...

> **[Node Red Dashboard Template Buttons Big Update - Scargill's Tech Blog](https://tech.scargill.net/node-red-dashboard-template-buttons-updated/)**
>
> Given a Node-Red flow – just an empty one for testing if you like…… add these two template nodes – the first is some CSS and JS which you can use for any buttons on the page – the second depicts test buttons without and with images. Sizes and...

  
The script secion - first item - that will give VIBRATE to an md\_button - but it seems beyond me now to figure out how to add that to all my non-custom md\_buttons that we;ve been working on... it may come to me. If not if anyone else knows how to do this please do step in.

---

<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:** [1 December 2020 18:03 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/49 "2020-12-01T18:03:48Z")

</div>

Just make one ui\_template per tab (cant be in site head) _or abuse one if you have_  
Fill with that

```auto
<script>
$('button').click(function() {
  window.navigator.vibrate([80])
})
</script>

```

And all buttons will vibrate.

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [1 December 2020 22:07 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/50 "2020-12-01T22:07:28Z")

</div>

Hah, thats where I went wrong - I had that in the head... I'll make one for each tab. Just tested the first one - vibrates a TREAT. I can add in my other classes from back in 2019 now -- WHEEEE.

---

<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:** [1 December 2020 22:15 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/51 "2020-12-01T22:15:57Z")

</div>

Most probably the colorpicker doesn't vibrate. No button involved...

---

<div class="post-metadata">

**Author:** ![stoffers](https://avatars.discourse-cdn.com/v4/letter/s/5daacb/32.png) [@stoffers](https://discourse.nodered.org/u/stoffers)\
**Post date:** [3 December 2020 09:29 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/52 "2020-12-03T09:29:07Z")

</div>

A ton of inspiration can also be found here:  
[https://community.athom.com/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798](https://community.athom.com/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798)

---

<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:** [3 December 2020 17:25 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/53 "2020-12-03T17:25:04Z")

</div>

> [@stoffers](#):
>
> A ton of inspiration can also be found here

Sure this is not correct place for showcases but I just could not resist ...

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

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [3 December 2020 21:10 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/54 "2020-12-03T21:10:53Z")

</div>

And why not - looks pretty. I like the shadow on the backgrounds...

---

<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:** [3 December 2020 21:36 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/55 "2020-12-03T21:36:24Z")

</div>

Balancing between kind of old-school fanciness and readability. And meaningful colors in details and so on. Hard if knowledge and skills about the (web)art are low as I have but still something.  
A lot of pseudo dashboard design solutions seen, done by real artists and of course, none of such seen in real life cos real life and it's needs differs too much what the photoshop allows to do.  
Saying that here out loud, the NR dashboard is full of wonders, if you can take that little time to be friend with it.

---

<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:** [2 January 2021 21:36 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/56 "2021-01-02T21:36:26Z")

</div>

Closed on 2 January 2021 21:36 UTC

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

[Previous page](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645.md?page=2)