Dashboard colour picker text mode

[hotNipi]

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.

[hotNipi]

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

[scargill]

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

[hotNipi]

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

[scargill]

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; }

[scargill]

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

[hotNipi]

@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.

<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>

[scargill]

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