# Dashboard colour picker text mode

**URL:** <https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823>\
**Category:** Dashboard\
**Created:** [11 February 2021 14:07 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823 "2021-02-11T14:07:49Z")\
**Posts on this page:** 9\
**Page:** 2

<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:** [12 February 2021 10:32 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/21 "2021-02-12T10:32:12Z")

</div>

If the tab name is "Home" and the group has name "Multiword groupname" then the element id's generated as `Home_Multiword_groupname`

Any space in tab name or group name is replaced with underscore.

---

<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:** [12 February 2021 10:42 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/22 "2021-02-12T10:42:05Z")

</div>

Pete  
To avoid any confusion please do share the screenshot of your dashboard layout like below

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/0/4087f2118dab50232fa5ae098fa28da38ef9b10d.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:** [12 February 2021 10:55 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/23 "2021-02-12T10:55:35Z")

</div>

I've copied the relevant bit for those two pages – that what you wanted?

![image001.png](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/0/30c907868edcc1d42ae612ace58d9a5cb10f8a06.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:** [12 February 2021 11:01 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/24 "2021-02-12T11:01:10Z")

</div>

And confirm :  
a) you have color picker(s) used on both tabs (Bedrock Home and Bedrock Other)  
b) you have color picker(s) used only on Bedrock Home tab

---

<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:** [12 February 2021 11:26 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/25 "2021-02-12T11:26:13Z")

</div>

WEEEEEEEEEE. I have no idea why it ever worked in the first place – but now with your mods it WORKS..

THANKS… I'm going to go off and clone my SSD THEN get rid of those stupid DEFAULT and GROUP 1 names and put in something sensible.

Regards

Pete

.md-button { border-radius: 16px; } #Bedrock\_Other\_Group\_1\_cards \> md-card \> md-input-container { padding:0 !important; margin:0 !important; border-radius:16px; background-color:var(--nr-dashboard-widgetColor); } #Bedrock\_Other\_Group\_1\_cards \> md-card \> md-input-container \> label{ position: relative; top: 15px; } #Bedrock\_Home\_Default\_cards \> md-card \> md-input-container { padding:0 !important; margin:0 !important; border-radius:16px; background-color:var(--nr-dashboard-widgetColor); } #Bedrock\_Home\_Default\_cards \> md-card \> md-input-container \> label{ position: relative; top: 15px; } .nr-dashboard-theme .nr-dashboard-textinput input[type="color"]{ border: none !important; width: 58px; height: 60px; margin: 0 !important; padding: 10% !important; }

---

<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:** [12 February 2021 12:08 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/26 "2021-02-12T12:08:55Z")

</div>

Right now I have colour pickers only on the HOME page.

---

<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:** [12 February 2021 12:41 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/27 "2021-02-12T12:41:49Z")

</div>

> [@scargill](#):
>
> #Bedrock\_Other\_Group\_1\_cards

So you can get rid for all of those. And keep only the required ones.

And to be future-proof I'd suggest to add comments to the styles. 🙂

```auto
<style id='my custom styles'>

/*
Logic how the dashboard creates id's for elements:

#Bedrock_Home_Default_cards

is combinaton of:

Tab name: Bedrock Home
Group name: Default
and 
dashboard adds what is needed for element. (cards in this case)

All connected with underscore

*/

/* rounded corners for all md-buttons*/
.md-button {
    border-radius: 16px;
}

/* background and shape for color picker (text-input widget)*/
#Bedrock_Home_Default_cards > md-card > md-input-container {
    padding:0 !important;
    margin:0 !important;
    border-radius:16px;
    background-color:var(--nr-dashboard-widgetColor);
}

/* color picker icon position (text-input widget)*/
#Bedrock_Home_Default_cards > md-card > md-input-container > label{
    position: relative;
    top: 15px;
}

/* actual color picker element (square) position and size (text-input widget)*/
.nr-dashboard-theme .nr-dashboard-textinput input[type="color"]{
    border: none !important;
    width: 58px;
    height: 60px;
    margin: 0 !important;
    padding: 10% !important;
}
</style>

```

---

<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:** [12 February 2021 13:37 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/28 "2021-02-12T13:37:51Z")

</div>

Done- and thank you for that – not only is it all working but I now have a clearer view of why. I'll document this – already added the comments and simplified the naming.

Regards

Pete

---

<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:** [14 March 2021 13:38 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/29 "2021-03-14T13:38:19Z")

</div>

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-colour-picker-text-mode/40823.md?page=1)