That is strange. Did you set an entity on the custom tile? i see now it is possible to set entity and use the state to set it on or off 
Can you tell me a question why the flame icon does not change color when pressed to turn on the heating?
Also I would also like to know how I can see the decimals to set for the temperature. From the attached example you can see only integer values āāeg. 22 Ā° and not 22 Ā°, 1 or 22 Ā°, 5 etc in steps of 1. What does it depend on?
Hi,
This are the colors used for the icons
:host {
--auto-color: #EE7600;
--eco-color: springgreen;
--cool-color: #2b9af9;
--heat-color: #EE7600;
--manual-color: #44739e;
--off-color: lightgrey;
--fan_only-color: #8a8a8a;
--dry-color: #efbd07;
--idle-color: #00CC66;
--unknown-color: #bac;
}
And this are the modes and what color they use:
.heat_cool {
--mode-color: var(--auto-color);
}
.cool {
--mode-color: var(--cool-color);
}
.heat {
--mode-color: var(--heat-color);
}
.manual {
--mode-color: var(--manual-color);
}
.off {
--mode-color: var(--off-color);
}
.fan_only {
--mode-color: var(--fan_only-color);
}
.eco {
--mode-color: var(--eco-color);
}
.dry {
--mode-color: var(--dry-color);
}
.idle {
--mode-color: var(--idle-color);
}
.unknown-mode {
--mode-color: var(--unknown-color);
}
if you donāt want integer you can set stepSize on the card if you do not use that it checks the entities attributes for target_temp_step if it is not there is sets default stepsize to 1
Hello thanks for the reply today Iāll do a test and then Iāll be able to tell you.
@DBuit On some tiles when I use halfheight: true the card will appear blank (because the label is in the bottom half which is hidden) but on other tiles this does not happen. Please see the attached screenshot - the difference between the tile in the top left (input_boolean.away_mode) and the āPhoneā tile. What is the reason? Also attaching my code (still trying to get conditionalClass to hide state when off using your code as well but not working yet so any help will be much appreciated while you are there)
- entity: input_boolean.away_mode
halfheight: true
hide: |
[[[
var state = states['input_boolean.away_mode'].state ;
return (state == 'idle') || (state == 'off');
]]]
hideState: true
name: Away
- entity: light.entryway
name: ENTRYWAY
popup:
brightnessHeight: 350px
brightnessWidth: 130px
scenesInARow: 2
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
state: binary_sensor.motion_entryway
- entity: light.kitchen
name: KITCHEN
style: |
:host {
--tile-icon-color: rgba(255, 0, 0, 0.3);
--tile-on-icon-color: rgba(0, 255, 0, 0.3);
}
- entity: light.dining_room
name: DINING ROOM
- entity: light.lounge
name: LOUNGE
- entity: light.hallway
name: HALLWAY
- entity: light.closet
halfheight: true
name: CLOSET
style: |
:host {
--tile-icon-color: rgba(0, 0, 0, 0.3);
--tile-on-icon-color: #f75977;
--tile-icon-size: 10px;
--tile-border-radius: 5px;
}
- entity: light.bedroom
name: BEDROOM
- entity: light.living_room
name: LIVING ROOM
- entity: light.adams_room
name: ADAM'S ROOM
- entity: light.office
name: OFFICE
state: sensor.temperature_office
type: 'custom:light-popup-card'
- entity: light.patio_lights
name: PATIO
- entity: light.porch
name: PORCH
- entity: light.lounge_led
name: LOUNGE LED
- entity: light.bar
name: BAR
- entity: light.shed
name: SHED
- entity: light.living_room_colour_lamp
halfheight: true
conditionalClass: >
[[[
var state = states['light.living_room_colour_lamp'].state;
if (state == "off")
return "hideState";
else
return "";
]]]
state: false
style: |
.hideState .state {
visibility:hidden; // you can also use display:none; but then the name will go to bottom of that tile
}
Hi @mkhattab,
I have to try why it is not showing but maybe try to remove the hide and hideState part of that tile just to see if it shows without that than i know where to look for the problem.
The conditionalClass is ok i think but the style part should not be on tile level.
Style part is for the whole card so place it right here:
- type: "custom:homekit-card"
style: |
And all styles should be there.
1 Like
Thanks @DBuit hiding the off state now works after placing the style at the card level (also an opener for me on other things so thanks!!)
I tried removing hide and hideState from the halfheight cards but the label still doesnāt appear. I will keep investigating anyway.
Thanks for this amazing work!
Hello I tried to enter the info you suggested but I was not able to see the color change of the fire icon at ignition or to change the temperature in steps of 1. surely the error lies in placing the info I you gave. Can you check if there are any errors?
Should we also put some indo in the configuration.yaml file?
cards
- entity: climate.riscaldamento
name: Riscaldamento
popup:
climate.riscaldamento:
card:
cardStyle: |
background-color:#FFF;
:host {
--heat-color: #EE7600;
--off-color: lightgrey;
}
.heat {
--mode-color: var(--heat-color);
}
.off {
--mode-color: var(--off-color);
}
type: entities
style:
'--iron-icon-fill-color': '#FFF'
stepsize: 1
align-items: center
background: 'rgba(0, 0, 0, 0.8)'
display: block
flex-direction: column
height: 100%
justify-content: center
left: 0
margin: 0
position: fixed
top: 0
width: 100%
z-index: 999
title: ''
type: 'custom:thermostat-popup-card'Was there ever a resolution to this? Iām just starting to mess with this card and noticed this same issue. Home section ārulesā donāt load right away and take a few seconds, or click on them, to show up.
1 Like
Thanks gonna add it right away!!
Where did you add the code? If i do so all rounded corners dissapear haha
This is my weather card:
- card: 'custom:simple-weather-card'
cardOptions:
backdrop: true
entity: weather.home
name: Ravenna
primary_info:
- precipitation
- precipitation_probability
secondary_info:
- extrema
style: |
ha-card {
border-radius: 0;
height: 88px;
}
noPadding: true
wider: true
widerSize: 3
title: Meteo
tileOnRow: 3
It changed from this:
To this (adding "noPadding: true and āborder-radius: 0ā):
Hello @DBuit , I going mad on a thing that I suppose Itās very easy.
How can I change the Icon Color of a single card? This is not an Entity, so I canāt use the offStates for this.
Here is my coding, of course not working as intended:
- custom: home
halfheight: true
icon: 'mdi:floor-plan'
cardStyle: |
:host {
--tile-icon-color: rgba(0, 0, 0, 0.3);
--tile-on-icon-color: rgba(0, 0, 0, 0.3);
}
name: Rooms
tap_action:
action: navigate
navigation_path: /lovelace/home
One more thing: do you plan to add the option to enable/disable something like this created by this user?
I was able to do this without modifying the JS.
Apply the customisations to the style attribute at the card level - see my example here:
Thank you for your code!
The problem, from my side, is that I need to achieve that result on 6 cards having only a ānavigatieā action. So no entity and no āonā state can define this.
I need to apply the styling on each button of the selected page.
This is the code on the page with the scripts
cards:
- type: "custom:homekit-card"
home: false
enableColumns: true
style: |
:host {
--tile-background: #5F9BEA;
--tile-icon-size: 40px;
--tile-border-radius: 10px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: #DDDDDD;
--tile-name-text-color: rgba(255, 255, 255, 1);
--tile-on-name-text-color: rgba(0, 0, 0, 1);
--tile-state-text-color: rgba(0, 0, 0, 0.4);
--tile-on-state-text-color: rgba(0, 0, 0, 1);
--tile-state-changed-text-color: rgb(134, 134, 134);
--tile-unavailable-state-text-color: rgba(255, 255, 255, 0,5);
--tile-value-text-color: rgba(255, 0, 0, 1);
--tile-icon-color: rgb(255, 140, 0);
--tile-on-icon-color: rgb(255, 255, 255);
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
}
.button-inner .icon {
width:55px;
height:55px;
}
.button-inner .icon ha-icon {
width: 40px;
height:40px;
}
rows:
- row: 1
columns:
- column: 1
tileOnRow: 3
entities:
- entities:
- custom: Scripts
name: Douche
icon: mdi:shower-head
tap_action:
action: call-service
service: script.douche
- custom: Scripts
name: Bad
icon: mdi:shower
tap_action:
action: call-service
service: script.badHello I tried to put the latest info below in my style but it doesnāt work I am attaching my style can you tell me where to place that part of code that makes the outline of the card light up? I guess that instruction for all the cards is enough or one must be written for each card have patience Iām a neophyte
style: |
:host {
--tile-background: rgba(10, 10, 10, 0.22);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: var(--card-background-color);
--tile-name-text-color: var(--disabled-text-color);
--tile-on-name-text-color: var(--primary-text-color);
--tile-state-text-color: var(--disabled-text-color);
--tile-on-state-text-color: var(--paper-item-icon-active-color);
--tile-state-changed-text-color: var(--primary-text-color);
--tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
--tile-value-text-color: var(--primary-text-color);
--tile-icon-color: var(--disabled-text-color);
--tile-on-icon-color: var(--paper-item-icon-active-color);
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
--min-header-height: 150px;
--tile-icon-size: 30px;
--tile-image-radius: 100%
--slider-width: 120px;
--slider-height: 120px;
}
row: 1Hi a question but the entity weather.home that you will have snāzalro configured in configuration .yaml has by chance a key type openweathermap
Only thing ive heard Sins i mentioned it was that the rendering was being worked on. But
I think with the card owned getting a child and allot of otvetydigt problems starten with last patch. The Home rules projekt got pushad back.
Ciao Claudio,
Iām Italian too but I didnāt get what you meant.
Are you asking if your city can be configured in Openweathermap? If yes, I donāt know āSan Zalroā. I also searched it in Maps without results.
If you meant San Carlo, they link the city to the nearest location available in Openweathermap: San Carlo
Choose the one you leave in. If you need help, you can pm me in Italian too.
Hi,
Based on your code it would say it is always displayed as ON.
So the tile background should be #DDDDDD (grayish)
and the icon color should be rgb(255, 255, 255); (white)
and the name should be rgba(0, 0, 0, 1); (black)