Dashboard colour picker text mode

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.

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

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

image001.png

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

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

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

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. :slight_smile:

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

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

1 Like

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