# Dashboard: Disable but don't dim a button?

**URL:** <https://discourse.nodered.org/t/dashboard-disable-but-dont-dim-a-button/50220>\
**Category:** Dashboard\
**Created:** [26 August 2021 15:44 UTC](https://discourse.nodered.org/t/dashboard-disable-but-dont-dim-a-button/50220 "2021-08-26T15:44:40Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![awneil](https://avatars.discourse-cdn.com/v4/letter/a/49beb7/32.png) [@awneil](https://discourse.nodered.org/u/awneil)\
**Post date:** [26 August 2021 15:44 UTC](https://discourse.nodered.org/t/dashboard-disable-but-dont-dim-a-button/50220/1 "2021-08-26T15:44:40Z")

</div>

Is there a way to disable a Dashboard button _ **without** _ also dimming it?

I'm using a button as an _indicator_: setting its background to red or green and label to 'on' or 'off'

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/d/ad49d5c848c17e67369438a3cfc087c978d9a000.png)

So modelling an indicator which lights up with different colours _ **and** _ text to indicate the state.

It's not _controlling_ that on/off state - it's just indicating the current state.

But I don't want it clickable.

Disabling it makes it not clickable, but also "dims" the colour.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dd18643c2e87b9520f2c355bc4d5e645e03973fe.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5ef08e52c66489cfa0adc4209c785d6e874cb953.png)

How do I make it not clickable, _ **without** _ also "dimming" the colour?

Or is there a better widget to use for this?

---

<div class="post-metadata">

**Author:** ![MyRandomThoughts](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/myrandomthoughts/32/41085_2.png) [@MyRandomThoughts](https://discourse.nodered.org/u/MyRandomThoughts)\
**Post date:** [26 August 2021 15:52 UTC](https://discourse.nodered.org/t/dashboard-disable-but-dont-dim-a-button/50220/2 "2021-08-26T15:52:52Z")

</div>

Would an LED not be a better option?

> **[node-red-contrib-ui-led](https://flows.nodered.org/node/node-red-contrib-ui-led)**
>
> A simple LED status indicator for the Node-RED Dashboard

---

<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:** [26 August 2021 16:00 UTC](https://discourse.nodered.org/t/dashboard-disable-but-dont-dim-a-button/50220/3 "2021-08-26T16:00:38Z")

</div>

You can override dashboard CSS

Most of default dashboard items follow this rule when they are at disabled state.

```auto
.nr-dashboard-disabled {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

```

Just change the opacity value to 1 to preserve full color.

---

<div class="post-metadata">

**Author:** ![awneil](https://avatars.discourse-cdn.com/v4/letter/a/49beb7/32.png) [@awneil](https://discourse.nodered.org/u/awneil)\
**Post date:** [26 August 2021 16:13 UTC](https://discourse.nodered.org/t/dashboard-disable-but-dont-dim-a-button/50220/4 "2021-08-26T16:13:52Z")

</div>

> [@MyRandomThoughts](#):
>
> Would an LED not be a better option?

I prefer to have the text + colour effect.

> [@hotNipi](#):
>
> Most of default dashboard items follow this rule when they are at disabled state

That sounds interesting.

Is there a way to make this apply to just buttons? Or even just particular button instancess?

Where do I find the dashboard CSS?

---

<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:** [26 August 2021 16:33 UTC](https://discourse.nodered.org/t/dashboard-disable-but-dont-dim-a-button/50220/5 "2021-08-26T16:33:09Z")

</div>

Do search here in forum about dashboard CSS, to learn what it takes to override dashboard CSS.

You then can remove the dim element by element, using the `node-id` as CSS selector. I doubt you can do it for buttons all together cos the rule is applied one level higher.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/e/ae658e32fdacc8d6329b76914d98c3a0e440710a.png)

---

<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:** [26 August 2021 16:50 UTC](https://discourse.nodered.org/t/dashboard-disable-but-dont-dim-a-button/50220/6 "2021-08-26T16:50:24Z")

</div>

Oh I was wrong. All buttons is possible and it is also possible to do it for all buttons inside one specific group.

For all buttons:

```auto
<style>
.nr-dashboard-button {
    opacity: 1 !important;   
}
</style>

```

---

<div class="post-metadata">

**Author:** ![awneil](https://avatars.discourse-cdn.com/v4/letter/a/49beb7/32.png) [@awneil](https://discourse.nodered.org/u/awneil)\
**Post date:** [26 August 2021 17:03 UTC](https://discourse.nodered.org/t/dashboard-disable-but-dont-dim-a-button/50220/7 "2021-08-26T17:03:01Z")

</div>

Thanks.

So your previous reply was for a specific button instance?

I think that's probably the one I want - but thanks for the extra update.

😁

---

<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:** [26 August 2021 17:13 UTC](https://discourse.nodered.org/t/dashboard-disable-but-dont-dim-a-button/50220/8 "2021-08-26T17:13:52Z")

</div>

> [@awneil](#):
>
> previous reply was for a specific button instance?

Correct.

And it is pretty simple to find the `id`

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

---

<div class="post-metadata">

**Author:** ![awneil](https://avatars.discourse-cdn.com/v4/letter/a/49beb7/32.png) [@awneil](https://discourse.nodered.org/u/awneil)\
**Post date:** [27 August 2021 12:12 UTC](https://discourse.nodered.org/t/dashboard-disable-but-dont-dim-a-button/50220/9 "2021-08-27T12:12:12Z")

</div>

hmm... doesn't seem to be working:

I found the button's id:

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

put it in a Template Node:

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

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

Is it significant that the id seems to be in a different format (with a dot) from yours?

---

<div class="post-metadata">

**Author:** ![awneil](https://avatars.discourse-cdn.com/v4/letter/a/49beb7/32.png) [@awneil](https://discourse.nodered.org/u/awneil)\
**Post date:** [27 August 2021 12:15 UTC](https://discourse.nodered.org/t/dashboard-disable-but-dont-dim-a-button/50220/10 "2021-08-27T12:15:51Z")

</div>

Got it: the id needs to be in quotes:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/7/67ba4f25f1c7b493a974112a1ba25cbe96b72a5f.png)

---

<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 September 2021 12:16 UTC](https://discourse.nodered.org/t/dashboard-disable-but-dont-dim-a-button/50220/11 "2021-09-26T12:16:29Z")

</div>

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