No Template overrides? (Click on Templates across the top of the window)
As much as any overrides don't seem to be able to be Removed, I can still see the same behaviour @william2 described, even though it goes against my post overnight....
Hmm... In terms of colours, I have included those and still seem the "blue settings take effect the way they need to....
Feels like it is worth testing a simple, controlled dashboard setup to try and get to the bottom of what is happening.... Hard for me to formulate at this time of night.... (very envious of those retired in the Community 
)
Oh no rush on any of this - I really appreciate all your guys' help!!
So I created a new dashboard, with one tile on it, no custom anything, pasted William's code in there and wouldn't you know it - it just works....
I guess I have to back track and add in stuff until it breaks? I'll add some regular switches, then customize the switch template and see if it breaks.
But first, I should try William's custom CSS to change the icon while this dashbaord is still 'sterile'
1 Like
Yep, if you can do the testing for me, that would be great 
@dan1 can you publish the complete CSS from the dashboard its not working on?
Interesting:
If I set a Switch Template ON state custom background colour, the code continues to work.
If I set a Switch Template ON state custom Icon, it breaks - the background colour stays grey (the off) colour all the time. If I remove this State it works again.
If I set a Switch Template OFF custom Background colour, it breaks the way my main dashboard breaks - it just remains blue all the time.
If I set a Template OFF custom Icon, it continues to work just fine.
I'm assuming there is some messy code buried in the core HTML that is making this a bit weird and inconsistent?
I posted it, and the forum ate it alive. I'll figure out how to post it properly! Although my testing revealed that I can re-create the problem easily on the sterile dashboard... Maybe it would make sense to post that, since it's much shorter?
When posting your code click this and inset it where it tells you.
1 Like
Interesting, when I make those changes, it doesn't affect it at all.
Weird - as soon as I add a custom background colour to the off template, it breaks. Here is the entire code in the working state:
type or{
"localization": "English",
"roundedCorners": 10,
"dateFormat": "MM/DD/YYYY",
"hideLabels": true,
"customColors": [
{
"template": "switches",
"bgColor": "rgb(102,188,9)",
"iconColor": "",
"state": "on",
"customIcon": "he-devices_1"
},
{
"template": "switches",
"bgColor": "",
"iconColor": "",
"state": "off",
"customIcon": "he-switch_off"
}
],
"colWidth": 200,
"cloudRefresh": 5,
"hsmPin": "bnVsbA==",
"hide3dot": false,
"clockMode": true,
"gridGap": 10,
"goBack": true,
"tiles": [
{
"rowSpan": 1,
"template": "switches",
"col": 2,
"colSpan": 1,
"bgImage": "",
"id": 1,
"row": 1,
"device": "1261",
"templateExtra": ""
},
{
"rowSpan": 1,
"template": "switches",
"col": 1,
"colSpan": 1,
"id": 2,
"row": 1,
"device": "1060"
},
{
"rowSpan": 1,
"template": "switches",
"col": 3,
"colSpan": 1,
"id": 3,
"row": 1,
"device": "1057",
"templateExtra": null
}
],
"bgColor": "#282828",
"lanRefresh": 2,
"modesPin": "",
"iconSize": 42,
"cols": 7,
"customCSS": "/* ON */\n#tile-1[style*=\"background-color\"] {\nbackground-color: rgba(25,25,112,1) !important;\n}\n/* OFF */\n#tile-1 { background-color: rgba(60,60,60,0.4) !important;\n}\n\n\n\n\n",
"rowHeight": 190,
"hideEvents": false,
"noColors": false,
"tempScale": "C",
"readOnly": null,
"rows": 1,
"hideIconText": true,
"hideTextShadow": true,
"name": "Custom Switch Tile Test",
"fontSize": 12
} paste code here
As you can see, On state is blue, off state is grey:
Here it is after I change the background colour on the template:
type or {
"localization": "English",
"roundedCorners": 10,
"dateFormat": "MM/DD/YYYY",
"hideLabels": true,
"customColors": [
{
"template": "switches",
"bgColor": "rgb(102,188,9)",
"iconColor": "",
"state": "on",
"customIcon": "he-devices_1"
},
{
"template": "switches",
"bgColor": "rgb(166,166,190)",
"iconColor": "",
"state": "off",
"customIcon": "he-switch_off"
}
],
"colWidth": 200,
"cloudRefresh": 5,
"hsmPin": "bnVsbA==",
"hide3dot": false,
"clockMode": true,
"gridGap": 10,
"goBack": true,
"tiles": [
{
"rowSpan": 1,
"template": "switches",
"col": 2,
"colSpan": 1,
"bgImage": "",
"id": 1,
"row": 1,
"device": "1261",
"templateExtra": ""
},
{
"rowSpan": 1,
"template": "switches",
"col": 1,
"colSpan": 1,
"id": 2,
"row": 1,
"device": "1060"
},
{
"rowSpan": 1,
"template": "switches",
"col": 3,
"colSpan": 1,
"id": 3,
"row": 1,
"device": "1057",
"templateExtra": null
}
],
"bgColor": "#282828",
"lanRefresh": 2,
"modesPin": "",
"iconSize": 42,
"cols": 7,
"customCSS": "/* ON */\n#tile-1[style*=\"background-color\"] {\nbackground-color: rgba(25,25,112,1) !important;\n}\n/* OFF */\n#tile-1 { background-color: rgba(60,60,60,0.4) !important;\n}\n\n\n\n\n",
"rowHeight": 190,
"hideEvents": false,
"noColors": false,
"tempScale": "C",
"readOnly": null,
"rows": 1,
"hideIconText": true,
"hideTextShadow": true,
"name": "Custom Switch Tile Test",
"fontSize": 12
}paste code here
Now you can see the custom tile stays blue regardless of state:
Well... I've never used the template just CSS, but when I made that change you mentioned I still didn't have an issue with the CSS not working, it could be a faulty installation of the Dashboard app itself, but to be honest, I'm just guessing.
However, I would suggest choosing a path, either using the template or the CSS but not a combination. This is just my opinion, not sure how others feel about it.
Weird. No matter what I do I can't seem to get it to work with a custom background colour in the off state - that said, my custom colour was so close to the default colour, I can live with the default.
Soooo - Pushing my luck here. If I could just figure out how to change the icons in both states on a single tile, I'd be laughing. I do have custom icons on the template, and they seem to work, as long as I add the custom on colour first? (I know how weird that sounds). So I have custom icons working, custom template on colour, custom tile colours on a single tile - I tried the code snippet you posted earlier to change the icons and it didn't seem to do anything. I assume it has something to do with the fact I have a custom icon in the template?
Actually I think I figured it out!! I reference the 'old' image name to hook the state, and force it with the !important; flag - the new Icon is specified with this: content: "wb_incandescent";
This works well - however, I can't seem to use another icon... if I replace wb_incandescent in your example with "he-mode_night" - it just shows a little dash. I have to assume this has something to do with the Font Family perhaps?
#tile-1 .he-devices_1:before {
visibility: visible;
font-family: 'Material Icons' !important;
content: "wb_incandescent";
font-size: 30px !important;
color: yellow !important;
}
#tile-1 .he-switch_off:before {
visibility: visible;
font-family: 'Material Icons' !important;
content: "he-mode_night";
font-size: 30px !important;
color: rgba(125,209,233,1) !important;
}
Yes, if you want HE icons, it needs to be like this:
.he-circle-down:before {
content: "\ea0b";
color: rgba(0,0,0,1);
font-size: 25px;
}
At a high level, .he-circle-down:before is the original icon, your referencing it after you have hidden it, hence the :before. content: "\ea0b" is the HE icon you want to display.
To see a full write-up head over to this link where I shared several different modifications to HE dashboard tiles using CSS.
1 Like
Genius! I didn't make the leap to those values. I even figured out how to dig them out of the CSS with the browser's inspect feature.
Thank you again for all your help!
My simple Blue-Sky-Sun Day mode, Dark-Sky-Moon Night mode Switch tile override CSS:
/* ON */
#tile-1[style*="background-color"] {
background-color: RoyalBlue !important;
}
/* OFF */
#tile-1 { background-color: rgba(60,60,60,0.4) !important;
}
#tile-1 .he-devices_1:before {
content: "\ec3b";
color: yellow;
font-size: 42px;
position: relative;
top: -25px;
left: -25px;
}
#tile-1 .he-switch_off:before {
content: "\ec3e";
font-size: 42px !important;
color: white !important;
position: relative;
top: -25px;
left: -25px;
}
2 Likes
NP, that is what a community is for, helping each other.
1 Like
Right, now what CSS can I steal....
2 Likes
