Custom dashboard colors per dashboard

🧰 Built-In Apps and Drivers Dashboard
1

Before i dive in and create problems, can i customise ONE dashboard without affecting the others.
I have dashboard solely for alarm/warning conditions, most of which are shown as switches or contacts that are by default off/open = red, on/closed = green.
As these are "alarm" or "warning" indicators i'd prefer these to be the opposite colour scheme, so when the switch or contact device is closed or on it indicates a problem and is red (for danger) rather than green (which is typically the colour of a safe condition)

my "other" dashboard can remain in the standard colours as they are.

thanks

PS- colors/colours, US/UK :grin:

2

Each dashboard is independent. Changes made to one dashboard, like template colors, do not affect any other dashboards that you may have.

3

If i want to configure each tile independently, is this possible?,
ie
switch 1 on=green, off=red
switch 2 on=red, off=blue

4

Under Templates in the Dashboard setting you can modify the state colours.

image
image927×383 32.7 KB

5

for clarification, are asking if you can change colors for switch 1 and switch 2 on the same dashboard? If so, the template would affect all switches. If you want the same switch type to have different colors you will need to dabble with CSS.

Depending on your skill a helpful place would be. The Noob’s (in)complete guide to CSS for Hubitat

6

thanks, @william2 i have spent quite a bit of time reading The Noob’s (in)complete guide to CSS for Hubitat

but not yet found the solution i seek.

I still experimenting, hoping i dont do too much damage tweaking the css

7

There is some conversation on this somewhere.... Le me find it ...

8

appreciate your time and help, @sburke781

the other option is to get my tile to perform as a different device, ie what is a "switch" can be on the dashboard as a "contact" however, i understand the tile can only be assigned to a property the device has, ie i can not make a "switch" appear as a "water sensor".
if this was possible it may be a better solution.

9

Give me or William a moment or two....

10

Try this for the background color when the switch is off , replace the tile number with yours

#tile-2 {
   background-color: rgba(53,155,223,.50) !important;

For the on position use

#tile-2[style*="background-color"] {
   background-color: rgba(53,155,223,.50) !important;
}
1 Like
11

I forgot to mention, if those do not work post the switch you are trying to modify, unfortunately some tiles are coded differently making it a bit difficult to modify but possible.

I'm heading off to work now, but I know @sburke781 is on the case.

1 Like
12

I may be "impaired" , but can take the baton to the best of my ability :slight_smile: My memory is we have solve this previously for Wilson, but will find what I can to support that....

1 Like
13

here is the current CSS:

{
  "localization": "English",
  "roundedCorners": 10,
  "dateFormat": "YYYY-MM-DD",
  "hideLabels": true,
  "customColors": [
    {
      "template": "switches",
      "bgColor": "rgba(0,255,3,0.88)",
      "iconColor": "rgb(0,0,0)",
      "state": "on",
      "customIcon": ""
    },
    {
      "template": "switches",
      "bgColor": "rgb(255,70,6)",
      "iconColor": "",
      "state": "off",
      "customIcon": ""
    },
    {
      "template": "water",
      "bgColor": "rgb(255,5,5)",
      "iconColor": "rgb(249,244,245)",
      "state": "wet"
    },
    {
      "template": "water",
      "bgColor": "rgb(0,255,181)",
      "iconColor": "rgb(0,0,0)",
      "state": "dry"
    },
    {
      "template": "contact",
      "bgColor": "rgb(7,255,154)",
      "iconColor": "rgba(0,0,0,0.99)",
      "state": "open",
      "customIcon": ""
    },
    {
      "template": "contact",
      "bgColor": "rgb(255,88,228)",
      "iconColor": "rgb(255,255,255)",
      "state": "closed",
      "customIcon": ""
    }
  ],
  "colWidth": 150,
  "cloudRefresh": 5,
  "hsmPin": "",
  "hide3dot": false,
  "gridGap": 10,
  "clockMode": true,
  "tiles": [
    {
      "rowSpan": 1,
      "template": "switches",
      "col": 2,
      "colSpan": 1,
      "id": 1,
      "row": 3,
      "device": "334"
    },
    {
      "rowSpan": 1,
      "template": "switches",
      "col": 1,
      "colSpan": 1,
      "id": 2,
      "row": 2,
      "device": "400",
      "customIcon": "report_problem"
    },
    {
      "rowSpan": 1,
      "template": "switches",
      "col": 1,
      "colSpan": 1,
      "id": 3,
      "row": 3,
      "device": "417"
    },
    {
      "rowSpan": 1,
      "template": "water",
      "col": 1,
      "colSpan": 2,
      "id": 4,
      "row": 1,
      "device": "463"
    },
    {
      "rowSpan": 1,
      "template": "contact",
      "col": 2,
      "colSpan": 1,
      "id": 5,
      "row": 2,
      "device": "397",
      "customIcon": "he-sound_on_loud"
    }
  ],
  "goBack": true,
  "modePin": "",
  "bgColor": "dimgray",
  "lanRefresh": 2,
  "iconSize": 42,
  "cols": 6,
  "rowHeight": 150,
  "customCSS": "",
  "hideEvents": false,
  "tempScale": "C",
  "noColors": false,
  "readOnly": null,
  "rows": 4,
  "hideIconText": true,
  "hideTextShadow": true,
  "name": "Watch dogs",
  "fontSize": 12
}

would i "add" new css in CSS section or modify the "layout" section?

14

typically modify the CSS section, for the suggestions myself or William suggest...

Tweaks to the "templates" will sit under the "layout" section

15

i got custom control of the tiles BG color, which is a good start but next step is to change color based on its state, which i guess refers to "on/off" for switches and "wet/dry" for water, etc

other issue is, when i add and save in the CSS section, when i return to it after leaving the dasboard my additional CSS has vanished giving me no option to remove what i have added.

16

Hmmm, That seems odd... and concerning.... Any screenshots you can provide would be useful...

17

I have made progress, thanks to the above comments by adding this to the CSS section:

#tile-3 .on {
    color: red;
    background-color: cyan !important;
}

#tile-3 .off {
    color:black;
    background-color: pink !important;
}

#tile-3[style*="background-color"] {
    background-color: rgba(255, 255, 0, 1)!important;
}

perhaps not those colors but independent from the the generic colors.
Only downside is that it shows the color as a square within the rounded-edge tile, not filling the whole of the tile area and obscuring the text
Screenshot 2023-01-13 at 12.11.48

1 Like
18

I'll admit my input for a solution is more likely in the next few evenings than tonight... At least if I need to think in more than I need to post this comment.... :slight_smile:

19

i think this was a freak one-off. my CSS data is present/visible now

1 Like
20

That's a good solution... :slight_smile: Well it is for me.... :wink: