But the line-feed (and sop the problem) was already visible there. Therefor (always) my advice, to not only test the template, but the whole stuff you want to ingest via card_mod. Or simply the whole YAM of your card. Only then you can see what is in the html at the end.
And (as always) please dont ping/@ users here.
Hi
type: custom:horizon-card
card_mod:
style: |
ha-card {
--ha-card-background: red;
box-shadow: 5px 5px 8px red, 10px 10px 8px green, 15px 15px 8px blue;
}
I think you can avoid this piece of custom code by setting a device class for this binary sensor. You should get the translated state automatically.
Hi everyone,
I am building a new tablet dashboard now and after a while of looking around I think I went down the rabbit hole a bit too far and now have a style in my mind which is way above me skills. However I would like to get the hang of CSS and card mods anyway wherefore I hope to get a solution to what I am looking for to better understand how all of that works.
I am looking for designing this mushroom template card for the room navigation.
I am able to build the mdi:bed icon, room name and temperature and humidity at the bottom, so far so good. What I am now struggling with is to implemente the light, cover and media player icons in the upper right corner. It would be fine if the lights are lid when any of them in the room is on, same with the media player icon. The cover icon can be black if one closed and white if one open.
The tap actions I am able to implement myself.
I really hope someone can give me an idea how to build that. I think once I get the idea, I can replicate this to the whole dashboard.
Thanks very much!
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
};