I’m hoping someone here can help. I am using stack-in-card to combine 2 cards vertically: (Entities card & Bar-card) . However, its not completly seamless. There’s a divider between the 2 cards.
Note: bar-card entities in the below screenshot are currently hidden. I configured bar-card to hide entities that are 0.0 in value:
Screenshot:
Could someone PLEASE help me with the magic card-mod code that will hide that separator?
Thanks so much in advance!
Please always:
Hi there,
Can anybody please help me create an input selection card with buttons instead of the standard dropdown?
I’m in the following stage and would like the three buttons’ width to fill the entire width of the card. Distributed evenly and centered buttons’ content.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Notify Michal
icon: mdi:message-badge
entity: input_select.doorbell_notification_away_michal
icon_color: blue
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_select.doorbell_notification_away_michal
tap_action:
action: call-service
service: input_select.select_option
data:
option: Today
target:
entity_id: input_select.doorbell_notification_away_michal
icon: null
content: Today
card_mod:
style: |
ha-card {
{% if is_state('input_select.doorbell_notification_away_michal', 'Today') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: input_select.doorbell_notification_away_michal
tap_action:
action: call-service
service: input_select.select_option
data:
option: 'On'
target:
entity_id: input_select.doorbell_notification_away_michal
icon: null
content: 'On'
card_mod:
style: |
ha-card {
{% if is_state('input_select.doorbell_notification_away_michal', 'On') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: input_select.doorbell_notification_away_michal
tap_action:
action: call-service
service: input_select.select_option
data:
option: 'Off'
target:
entity_id: input_select.doorbell_notification_away_michal
icon: null
content: 'Off'
card_mod:
style: |
ha-card {
{% if is_state('input_select.doorbell_notification_away_michal', 'Off') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
alignment: Center
card_mod:
style: |
ha-card {
margin: 0px 12px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-box-shadow: none;
--chip-border-radius: 10px;
--chip-height: 42px;
--chip-padding:10px;
}
I’m trying to achieve something similar to this.
Appreciate your help!
Is something like this what you are looking for? (Play around with the width percentage as desired).
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:ab-testing
content: tests
card_mod:
style: |
ha-card {justify-content: center;}
- type: template
icon: mdi:ab-testing
content: tests
card_mod:
style: |
ha-card {justify-content: center;}
card_mod:
style: |
mushroom-template-chip {
width: 45%;
}
div.chip-container {
justify-content: space-evenly;
}
…
That works, thanks a lot @Roderik! Would be nice to have it done in a way so it automatically determines the right width as a certain width % value that works well on one device doesn’t work on another but I can live without that.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Notify Michal when Away
icon: mdi:message-badge
entity: input_select.doorbell_notification_away_michal
icon_color: blue
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_select.doorbell_notification_away_michal
tap_action:
action: call-service
service: input_select.select_option
data:
option: Today
target:
entity_id: input_select.doorbell_notification_away_michal
icon: null
content: Today
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_select.doorbell_notification_away_michal', 'Today') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: input_select.doorbell_notification_away_michal
tap_action:
action: call-service
service: input_select.select_option
data:
option: 'On'
target:
entity_id: input_select.doorbell_notification_away_michal
icon: null
content: 'On'
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_select.doorbell_notification_away_michal', 'On') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: input_select.doorbell_notification_away_michal
tap_action:
action: call-service
service: input_select.select_option
data:
option: 'Off'
target:
entity_id: input_select.doorbell_notification_away_michal
icon: null
content: 'Off'
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_select.doorbell_notification_away_michal', 'Off') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
alignment: Center
card_mod:
style: |
mushroom-template-chip {
width: 30%;
}
div.chip-container {
justify-content: space-evenly;
}
ha-card {
margin: 0px 12px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-box-shadow: none;
--chip-border-radius: 10px;
--chip-height: 42px;
--chip-padding:10px;
}
Played around a little longer.
If you set the width to 100% and add “flex-wrap: nowrap;” to the div.chip-container it should automatically scale for you.
Can you check if this works?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Notify Michal when Away
icon: mdi:message-badge
entity: input_select.doorbell_notification_away_michal
icon_color: blue
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_select.doorbell_notification_away_michal
tap_action:
action: call-service
service: input_select.select_option
data:
option: Today
target:
entity_id: input_select.doorbell_notification_away_michal
icon: null
content: Today
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_select.doorbell_notification_away_michal', 'Today') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: input_select.doorbell_notification_away_michal
tap_action:
action: call-service
service: input_select.select_option
data:
option: 'On'
target:
entity_id: input_select.doorbell_notification_away_michal
icon: null
content: 'On'
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_select.doorbell_notification_away_michal', 'On') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: input_select.doorbell_notification_away_michal
tap_action:
action: call-service
service: input_select.select_option
data:
option: 'Off'
target:
entity_id: input_select.doorbell_notification_away_michal
icon: null
content: 'Off'
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_select.doorbell_notification_away_michal', 'Off') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
alignment: Center
card_mod:
style: |
mushroom-template-chip {
width: 100%;
}
div.chip-container {
justify-content: space-evenly;
flex-wrap: nowrap;
}
ha-card {
margin: 0px 12px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-box-shadow: none;
--chip-border-radius: 10px;
--chip-height: 42px;
--chip-padding:10px;
}
The following card_mod code should turn “
Low Batteries!” to blue and it will turn the titles of each sub card to green. Hopefully you can use it to get the desired effect (wasn’t sure what title you wanted changed, the top one, or the individual ones).
type: custom:mod-card
card_mod:
style:
hui-grid-card:
$: |
.card-header {
color: white !important;
}
$: |
:host {
--ha-card-header-color: blue;
--primary-text-color: green;
}
Awesome, thanks @Roderik! Looks only slightly better but it is much safer in terms of the reusability of the card.
Buttons now adjust the width % automatically!
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Notify Michal when Away
icon: mdi:message-badge
entity: input_select.doorbell_notification_away_michal
icon_color: blue
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_select.doorbell_notification_away_michal
tap_action:
action: call-service
service: input_select.select_option
data:
option: Today
target:
entity_id: input_select.doorbell_notification_away_michal
icon: null
content: Today
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_select.doorbell_notification_away_michal', 'Today') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: input_select.doorbell_notification_away_michal
tap_action:
action: call-service
service: input_select.select_option
data:
option: 'On'
target:
entity_id: input_select.doorbell_notification_away_michal
icon: null
content: 'On'
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_select.doorbell_notification_away_michal', 'On') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: input_select.doorbell_notification_away_michal
tap_action:
action: call-service
service: input_select.select_option
data:
option: 'Off'
target:
entity_id: input_select.doorbell_notification_away_michal
icon: null
content: 'Off'
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_select.doorbell_notification_away_michal', 'Off') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
alignment: Center
card_mod:
style: |
mushroom-template-chip {
width: 100%;
}
div.chip-container {
justify-content: space-evenly;
flex-wrap: nowrap;
}
ha-card {
margin: 0px 12px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-box-shadow: none;
--chip-border-radius: 10px;
--chip-height: 42px;
--chip-padding:10px;
}
Here it is. Thank you in advance.
Answered you in GitHub.
In short:
– download & replace js-file (if it is not done yet);
– in case of issues - use card-mod.
Answering your question about bar-card:
type: custom:stack-in-card
keep:
background: true
cards:
- type: entities
entities:
- entity: input_number.test_level_1
- entity: input_number.test_level_2
- entity: input_number.test_level_3
card_mod:
style: |
ha-card {background: red}
- type: custom:bar-card
severity:
- from: '0'
to: '0'
hide: true
- from: '1'
to: '40'
color: '#007A00'
- from: '41'
to: '90'
color: '#EA9000'
- from: '91'
to: '100'
color: '#C41400'
entities:
- entity: input_number.test_level_1
- entity: input_number.test_level_2
- entity: input_number.test_level_3
card_mod:
style: |
ha-card {
{% if states('input_number.test_level_1')|int == 0 and
states('input_number.test_level_2')|int == 0 and
states('input_number.test_level_3')|int == 0 %}
display: none;
{% endif %}
}
This mod hides the whole bar-card if none of bars is displayed (to avoid undesired space).
Hi @Ildar_Gabdullin thank you. I was able to get rid of the separator by using the updated version of Stack-in-card. However, now there’s a big empty space when the bottom card doesn’t have any items visible. How do I use card-mod to remove that extra space at the bottom?
Below, is what my current code looks like:
type: custom:stack-in-card
mode: vertical
cards:
- type: entities
title: iGPU
entities:
- entity: sensor.cpu_gt_core_temperature
name: Core Temperature
- entity: sensor.gpu_d3d_memory_dynamic_memory
name: Dynamic RAM
- type: custom:bar-card
severity:
- from: '0'
to: '0'
hide: true
- from: '1'
to: '40'
color: '#007A00'
- from: '41'
to: '90'
color: '#EA9000'
- from: '91'
to: '100'
color: '#C41400'
entities:
- entity: sensor.gpu_d3d_usage
name: iGPU Usage
- entity: sensor.gpu_video_decode_0_usage
name: Video Decoder 0
- entity: sensor.gpu_video_decode_1_usage
name: Video Decoder 1
- entity: sensor.gpu_video_processing_0_usage
name: Video Encoder 0
- entity: sensor.gpu_video_processing_1_usage
name: Video Encoder 1
Thanks so much in advance!
mmmmmm, I used a Time machine & posted an answer earlier))
Seems you have not read my longread in your github post yet))
Thank you!! This was such a clever way to hide the card. I really appreciate it! It worked like a charm.
Now THAT’s how it should look out of the box. Brilliantly done.
hello, trying to reduce the size of the header image of the plant-card. was able to get it to work on my browser, but any change to the image does not go through on lenovo smart display which just displays the dashboard via a webpage. inspecting the element of the lenovo display using chrome shows that the size isnt changing. any suggestion on how to fix this?
- type: custom:flower-card
entity: plant.snake_plant
show_bars:
- illuminance
- moisture
- conductivity
- temperature
battery_sensor: sensor.plant_sensor_63a3_battery
style: |
ha-card {
.header {
height: 72px
};
.header > img {
width: 25px; !important
height: 25px; !important
margin-top: 10px
};
margin-top: 0px !important
};
Hi there,
I’m having this card with conditional switches in it and I just cannot get the icons colored:
type: entities
title: Schlafzimmer
entities:
- type: conditional
conditions:
- entity: switch.drucker
state: 'off'
row:
entity: switch.drucker
type: button
icon: mdi:printer-off
name: Drucker aus
action_name: Einschalten
card_mod:
style: |
:host {
--paper-item-icon-color: red;
}
- type: conditional
conditions:
- entity: switch.drucker
state: 'on'
row:
entity: switch.drucker
type: button
icon: mdi:printer
name: Drucker an
action_name: Ausschalten
style:
hui-simple-entity-row$: |
hui-generic-entity-row {
--paper-item-icon-color: orange;
}
- type: conditional
conditions:
- entity: input_boolean.fernsehereg
state: 'off'
row:
entity: sun.sun
icon: mdi:desk-lamp
name: Test entity
style:
hui-simple-entity-row$: |
hui-generic-entity-row {
--paper-item-icon-color: red;
}
The icon in the last entry, conditional too, is colored red, just as wanted, but none of the above two work! Is it because they are switches?
Please help,
zavjah
No idea, getting some weird results…
I am trying to change stack-in-card’s header “padding-bottom” to 0px globally to all my stack-in-card’s via my theme.yaml.
The only way I can change the CSS style is via a single stack-in-card via Developer Tools (in the screenshot example below). I’ve already spent hours on this trying to figure this out on my own without any luck. I am hoping someone will be able to help; as I’ve tried everything I possibly could.
I tried applying card-mod custom CSS via stack-in-card code below without any luck.
Things I’ve tried…
cards:
- entities:
- entity: sensor.titan_download_speed
icon: mdi:speedometer
name: Download Speed
- entity: sensor.titan_upload_speed
icon: mdi:speedometer
name: Upload Speed
type: entities
- aspect_ratio: 56%
camera_view: live
entity: camera.desktop
show_state: false
type: picture-entity
title: Server
type: custom:stack-in-card
card_mod:
style: |
.card-header, :host ::slotted(.card-header) {
padding-bottom: 0px !important;
}
I also tried:
card_mod:
style: |
ha-card.card-header, h1.card-header {
padding-bottom: 0 !important;
}
and…
card_mod: |
style: |
ha-card.type-custom-stack-in-card, h1.card-header {
padding-bottom: 0px !important;
}
Not a single thing I tried works, unfortunately.
Don’t you see that the “card-header” is inside shadowRoot?
type: custom:stack-in-card
title: xxxxxxxxxxxxxxxxxxx
cards:
- type: entities
entities:
- entity: sun.sun
- show_state: false
show_name: true
type: picture-entity
entity: sun.sun
image: /local/images/test/ishimura.png
card_mod:
style:
$: |
.card-header {
background: cyan;
}