Thanks for your reply, Thomas!
I also tried this and the mod-card takes the full height but then the vertical-stack inside still doesnât apply a height of 100%.
Iâve now tried this:
...
- type: custom:mod-card
gridcol: 1 / 2
gridrow: 1 / 2
style: "ha-card { height: 100%; }"
card:
type: vertical-stack
cards:
- type: horizontal-stack
...
From the documentation:
When exploring the cards using the element inspector, you might run into something called a
shadow-rootand notice that you canât apply styles to anything inside that.
Each card is in a shadow-root, so you need to specifically set the height of every card.
This is what I have now:
...
- type: custom:mod-card
gridcol: 1 / 2
gridrow: 1 / 2
style: "ha-card { height: 100%; }"
card:
type: vertical-stack
cards:
- type: custom:mod-card
style: "ha-card { height: 100%; }"
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: light.storage
show_entity_picture: true
show_name: false
color_type: card
icon: "mdi:television"
styles:
card:
- border-radius: 10%
- height: 100%
img_cell:
- border-radius: 15%
- type: custom:button-card
entity: light.storage
show_entity_picture: true
show_name: false
color_type: card
icon: "mdi:radio"
styles:
card:
- border-radius: 10%
- height: 100%
img_cell:
- border-radius: 15%
...
but still it looks like this:
Should I also set another style to get this working?
Iâm using this successfully with some entity-filter cards (doors/locks/windows/etc). However, when my front door is unlocked, the card pops up with a red background , so I know the door is unlocked - but the font color on the âLOCKâ text next to it is blue, because of my theme. It looks horrible with blue font on red background. I went through the documentation, but canât seem to find a config or parameter to put that will change the font color of an action/button that gets displayed to click. Any ideas?
Hi,
How do I add styles to more-info overrides? I have tried this:
popup_cards:
sensor.330i_remaining_fuel:
title: Fuel BMW
card:
type: history-graph
style: |
ha-card {
width: 500px;
}
hours_to_show: 120
entities:
- sensor.330i_remaining_fuel
And it does set the width of the card, but the outer html, is fixed width so all I get is a horizontal scroll-bar.
What am I missing?
Thereâs another style parameter:
popup_cards:
sensor.my_sensor:
title: Title
style:
popup_window: styles
go: here
note: the different format
card:
type: entities
style: |
ha-card {
embedded-card: styles go here;
}
Well Iâm ALMOST finished with my Lovelace Panel for my tablet but I canât seem to get a horizontal stack card to increase itâs height. The card contains two gauges and no matter what I do they wonât stretch out the tile? Any help???
- type: gauge
min: 0
max: 120
theme: default
entity: sensor.battery_level
name: Water Filter
style: 'ha-card { height: 187px; }'
Thanks for responding super fast :).
Iâm still missing something - which selector do I use for popup_window? ha-card doesnât work (to be expected), but I tried using all the tags under the âha-more-info-dialogâ tag inkluding âha-more-info-dialogâ itself.
I tried:
popup_cards:
sensor.330i_remaining_fuel:
title: BrÊndstof pÄ BMW
style:
popup_window: |
ha-card {
width: 500px;
}
card:
type: history-graph
style: |
ha-card {
width: 500px;
}
and also:
popup_cards:
sensor.330i_remaining_fuel:
title: BrÊndstof pÄ BMW
style:
popup_window:
style: |
ha-card {
width: 500px;
}
card:
type: history-graph
style: |
ha-card {
width: 500px;
}
Is it possible to hide an entity icon when using the Entity card panel in lovelace? Iâve tried show_icon: false and it doesnât seem to take. Any ideas?
I use that for hidding icons:
style: |
state-badge {
display: none;
}
Nope that didnât workâŠDoesnât seem like it should be this hard! lol
Iâm afraid itâs even harder than that ! 
- type: entities
entities:
- sensor.temperature_salon
- sensor.temperature_bureau
style:
"#states div":
hui-sensor-entity-row:
$:
hui-generic-entity-row:
$: |
.flex .info {
margin-top: -20px;
}
state-badge {
display:none;
}
Thanks! But now Iâm even more confusedâŠI assume the âhui-sensor-entity-rowâ and âhui-generic-entity-rowâ are specific to your entity types. Where do I find those variables in my card??
Itâs true for hui-sensor-entity-row. It will depend on your entity type. Hui-generic-entity-row is generic and common whatever types you use, youâll have one for each entity row.
You need to use the « Inspect element « tool over(or just next below) the entity element you want to know. It will show you the html DOM, then youâll have to drill down a bit to find the element block name.
Or just past your card here, you might get some more helpâŠ
This is part of a HA Wall Tablet setup with just a pretty simple entity card. I was hoping to remove the volume icon on the entity line and make the volume slider a little bigger for those of us with big fingers in my household who want to turn down the volume on the kids music. lol. See below:
- entities:
- entity: input_select.chromecast_radio_station
- entity: input_select.chromecast_radio_speakers
- entity: input_number.volume_radio
- action_name: Play
entity: script.play_chromecast_radio
- action_name: Stop
entity: script.stop_chromecast_radio
gridcol: 2 / 3
gridrow: 3 / 4
style: 'ha-card { height: 310px; }'
type: entities
How can I make the height smaller and remove the âProduct Groupâ title from the card?
Thx for the help
Simulating with existing input_select i already have and an input_number created, i think that would be what you want :
- type: entities
entities:
- entity: input_select.heater_mode
- entity: input_select.set_heater_room_ref
- entity: input_number.volume_radio
style:
"#states div":
hui-input-number-entity-row:
$:
hui-generic-entity-row:
$: |
.info {
flex: 0 auto !important;
}
state-badge {
display:none;
}
.flex {
margin-left:0px !important
}
".card-content div":
hui-input-number-entity-row:
$:
hui-generic-entity-row: |
.flex {
transform: scale(1.9);
}
.state {
font-size: 8px;
min-width: 0px !important;
}
The above sample is Desktop friendly but please note that changing scale size can have side effect on smaller screen devices, on my iPhone SE, scale 1.4 is a maximum.
Also if you want to change that, you might need to adapt font-size according to the scale you set. Bigger scale means smaller font-size as scaling as effect on font size size too.
I have no idea what all that jibberish meansâŠbut it WORKS! Thank you!!! @olijouve
One last questionâŠAny idea where I can sneak in the following line that was part of the original code:
style: âha-card { height: 310px; }â
The style parameter of the popup does not take CSS, as the readme will tell you.
Your question is missing a few, quite important, elements; such as
