Try like this:
{% if states('sensor.valve_opening') | float > 0 %}
content: "{{ states('sensor.valve_opening') }}";
{% endif %}
Your selector is not correct. Should be something like this:
card_mod:
style: |
mushroom-badge-icon:after {
Have a look here:
Just use the attribute media_album_name for the content.
1 Like
Iām trying to get this to work for me with no luck, Iām trying to make my chips bigger, current code is:
type: custom:mushroom-chips-card
chips:
- type: weather
entity: weather.forecast_smithhouse
show_conditions: true
show_temperature: true
- type: light
entity: light.scott_s_bedroom
name: All Lights
content_info: name
when I add in the card_mod lines, it just does nothing. Any advice @rhysb ?
This will enlarge all the Chips:
type: custom:mushroom-chips-card
chips:
- type: weather
entity: weather.forecast_smithhouse
show_conditions: true
show_temperature: true
- type: light
entity: light.scott_s_bedroom
name: All Lights
content_info: name
card_mod:
style: |
ha-card {
--chip-height: 48px;
--chip-border-radius: 20px;
}
Make sure you have card-mod installed.
1 Like
Hello, can someone help with code? My animation is not working:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
columns: 2
layout: {}
cards:
- type: custom:mushroom-template-card
primary: ā KĆ”vovar
secondary: null
icon: mdi:coffee-maker
icon_color: |
{% if is_state('switch.kavovar_power', 'on') %}
brown
{% else %}
disabled
{% endif %}
fill_container: true
multiline_secondary: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state('sensor.kavovar_operation_state', 'run') %}
ha-icon {
--icon-animation: java 2s linear infinite;
}
{% endif %}
@keyframes rotating {
0%, 80%, 100% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 0 100%); }
10% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 77%, 55% 80%, 57% 100%, 0 100%); }
15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 77%, 55% 80%, 55% 100%, 0 100%); }
20% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 76%, 55% 76%, 57% 100%, 0 100%); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 76%, 55% 76%, 56% 100%, 0 100%); }
30% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 55%, 42% 69%, 44% 73%, 55% 73%, 57% 100%, 0 100%); }
35% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 54%, 42% 69%, 44% 73%, 55% 73%, 56% 100%, 0 100%); }
40% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 57% 70%, 57% 100%, 0 100%); }
45% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 55% 70%, 56% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 57% 65%, 57% 100%, 0 100%); }
55% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 55% 65%, 56% 100%, 0 100%); }
60% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 57% 60%, 57% 100%, 0 100%); }
65% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 55% 60%, 56% 100%, 0 100%); }
70% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 57% 56%, 57% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 55% 56%, 55% 100%, 0 100%); }
}
.: |
ha-card {
--card-primary-font-size: 24px;
--card-secondary-font-size: 18px;
--icon-size: 96px;
}
Thanks @rhysb !
This removes the badge content, but there is still an idle badge icon visible. Is it possible to remove that also? So that there is no badge visible at all (for that specific condition off course)?
I have this code to show when my car is charging, but I canāt seem to remove the badge_icon when it is not charging. Any ideas?
type: custom:mushroom-template-card
primary: Tesla
secondary: '{{states(''sensor.tess_battery'')}}% '
icon: |-
{% set value = states('sensor.tess_battery')|float %}
{% if value < 10 %} mdi:battery-10
{% elif value < 20 %} mdi:battery-20
{% elif value < 30 %} mdi:battery-30
{% elif value < 40 %} mdi:battery-40
{% elif value < 50 %} mdi:battery-50
{% elif value < 60 %} mdi:battery-60
{% elif value < 70 %} mdi:battery-70
{% elif value < 80 %} mdi:battery-80
{% elif value < 90 %} mdi:battery-90
{% else %} mdi:battery-50
{% endif %}
icon_color: |-
{% set value = states('sensor.tess_battery')|float %}
{% if value < 10 %} #990000
{% elif value < 20 %} #FF0000
{% elif value < 30 %} #FF6600
{% elif value < 40 %} #FFCC00
{% elif value < 50 %} #FFFF00
{% elif value < 60 %} #99CC00
{% elif value < 70 %} #66FF33
{% elif value < 80 %} #99CC00
{% elif value < 90 %} #00CC00
{% else %} grey
{% endif %}
layout: vertical
entity: sensor.tess_battery
multiline_secondary: false
badge_icon: |-
{% if is_state('binary_sensor.tess_charging', 'on') %}
mdi:lightning-bolt
{% else %}
{% endif %}
badge_color: orange
card_mod:
style: |
ha-card {
border: 0px;
margin: 0px 0px 0px 0px;
-webkit-border-radius: 0px;
background-color: hsla(0, 0%, 0%, 0);
text-align: left;
justify-self: left;
box-shadow: none;
}
Your animation name and keyframes name do not match.
You can do it like this:
mushroom-badge-icon$: |
.badge {
{{ 'display: none !important;' if state_attr(config.entity, 'hvac_action') == 'idle' }}
}
1 Like
Check the value of binary_sensor.tess_charging because your code works fine for me.
Hero 
Working like a charm ā¦
Once again thanks for your continuous support for the community! Well appreciated!
5 Likes
Sure ā¦
type: custom:mushroom-climate-card
entity: climate.living
icon: none
show_temperature_control: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ state_attr(config.entity, 'current_temperature')|replace('.', ',') }}Ā°";
font-size: 14px;
font-weight: bolder;
color: white;
position: absolute;
}
.shape {
{% set mode = state_attr(config.entity, 'hvac_action') %}
--shape-color: rgba(var(--rgb-
{%- if mode == 'heating' -%}
orange
{%- elif mode == 'cooling' -%}
blue
{%- else -%}
grey
{% endif %}));
}
.: |
mushroom-badge-icon:after {
content: "{{ states('sensor.valve_opening') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: rgb(var(--rgb-white));
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.7em;
}
mushroom-badge-icon$: |
.badge {
{{ 'display: none !important;' if state_attr(config.entity, 'hvac_action') == 'idle' }}
}
2 Likes
Thank you, realized a few minutes after I posted that card-mod was a plugin, after I installed that I was all good.
1 Like
Hello, this my code without color control:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: group.natale
icon: mdi:pine-tree
use_light_color: false
name: 'Natale'
- type: custom:mushroom-template-card
icon: mdi:pine-tree
icon_color: green
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -133px;
}
- type: custom:mushroom-template-card
icon: mdi:grain
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {--icon-color: rgb(var(--rgb-red)); }
6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
12.5% { --icon-color: rgb(var(--rgb-orange)); }
18.75% { --icon-color: rgb(var(--rgb-amber)); }
25% { --icon-color: rgb(var(--rgb-yellow)); }
31.25% { --icon-color: rgb(var(--rgb-lime)); }
37.5% { --icon-color: rgb(var(--rgb-light-green)); }
43.75% { --icon-color: rgb(var(--rgb-green)); }
50% { --icon-color: rgb(var(--rgb-teal)); }
56.25% { --icon-color: rgb(var(--rgb-cyan)); }
62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
68.75% { --icon-color: rgb(var(--rgb-blue)); }
75% { --icon-color: rgb(var(--rgb-indigo)); }
81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
87.5% { --icon-color: rgb(var(--rgb-purple)); }
93.75% { --icon-color: rgb(var(--rgb-pink)); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -200px;
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
entity: group.natale
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -262px;
}
card_mod:
style: |
ha-card {
height: 66px;
{% set r = state_attr('group.natale', 'rgb_color')[0] %}
{% set g = state_attr('group.natale', 'rgb_color')[1] %}
{% set b = state_attr('group.natale', 'rgb_color')[2] %}
background-color: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
}
this is result for ON:
and OFF:
Can I remove colors and animation when entity is OFF?
Thank you
Hello,
is it too difficult?
I think I did something wrong. but my UI looks inconsistent.
When I first load the page everything looks great:
However when I refresh I see borders:
Nothing changes, as far as I can see. How is this possible?
I am trying to implement something that I have seen done with buttons. Basically, they have a row of buttons or chips, and each button/chip causes a different page view to load below the row of chips/buttons not navigate to another view. So you would have:
and each one would load a card below it, for instance a room card, based on the button you pushed. I have tried conditional card, but it will not load the card correctly. Then there is the scenario were you push another button and you already have a button pressed. You would need the old button to be turned off. Has anyone accomplished this and if so is anyone willing to share their code. I hope that this is clear enough.
A few weeks back I saw the great work on a minimalist inspired room card by @theandouz and had the same thoughts as @PatrickJanson for a smaller version to be able to fit more cards on the screen at once.
I re-worked things a bit to make it smaller and added a few extra āfeaturesā.
- The secondary text displays temp and humidity, color is based on the roomās climate devices hvac state (heating, cooling) as well as an icon to quickly display the state.
- The light chip is constant and supports the light entityās color or a default color if there isnāt one. Single tap brings up a quick popup to show all light entities in that room.
- Can display up to 4 conditional chips at a time (You can add as many as you like but only 4 display) with certain chips bringing up a popup including the beautiful media card from @rhysb. I personally preferred the conditional chips to just display the icon without the circle around it. I found it easier to notice.
Hereās the code. Certainly open to any additional ideas or tweaks.
Minimalist Room Card
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: group.master_bedroom
icon: mdi:bed
icon_color: |
{% if is_state(entity, 'on') %}
#03A9F4
{% else %}
grey
{% endif %}
primary: Master Bedroom
secondary: >-
{{ states('sensor.thermostat_master_bedroom_local_temperature') | round(0)
}}Ā°C | {{ states('sensor.thermostat_master_bedroom_humidity') |
round(0) }}%
layout: horizontal
tap_action:
action: navigate
navigation_path: /mobile-dashboard/master-bedroom
double_tap_action:
action: navigate
navigation_path: /mobile-dashboard/master-bedroom
hold_action:
action: toggle
badge_icon: >
{% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
'heating') %}
mdi:radiator
{% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
'cooling') %}
mdi:snowflake
{% else %} {% endif %}
badge_color: >
{% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
'heating') %}
red
{% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
'cooling') %}
#03A9F4
{% else %} {% endif %}
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -52px;
left: -155px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
--secondary-text-color:
{% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action', 'heating') %}
red
{% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action', 'cooling') %}
#03A9F4
{% else %}
#6c6c75
{% endif %}
}
style: |
mushroom-badge-icon {
left: 69px;
top: 25px;
}
- type: custom:mushroom-template-card
primary: none
icon_color: disabled
icon: mdi:lightbulb
secondary: none
entity: light.master_bedroom_light
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Lights
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.master_bedroom_light
name: Master Bedroom Light
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-light-card
entity: light.closet_light
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
hold_action:
action: toggle
double_tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, 'on') %}
{% if state_attr(config.entity, 'rgb_color') == none %}
--icon-color: rgb(255,190,137) !important;
--shape-color: rgb(255,190,137, 0.2 ) !important;
{% else %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
{% endif %}
{% endif %}
}
.: |
ha-card {
width: 66px;
margin-left: 68%;
top: -178px;
background: none;
}
:host {
--mush-icon-size: 38px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.in_bed
state: 'on'
chip:
type: entity
entity: input_boolean.in_bed
icon: mdi:bed
icon_color: blue
content_info: none
- type: conditional
conditions:
- entity: binary_sensor.motion_master_bedroom_occupancy
state: 'on'
chip:
type: entity
entity: binary_sensor.motion_master_bedroom_occupancy
icon: mdi:motion-sensor
icon_color: blue
content_info: none
- type: conditional
conditions:
- entity: fan.master_bedroom_fan
state: 'on'
chip:
type: entity
entity: fan.master_bedroom_fan
icon: mdi:fan
icon_color: blue
content_info: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Fan
content:
type: custom:mushroom-fan-card
entity: fan.master_bedroom_fan
name: Master Bedroom Fan
icon_animation: true
fill_container: false
show_percentage_control: true
show_oscillate_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: conditional
conditions:
- entity: switch.plug_master_bedroom
state: 'on'
chip:
type: entity
entity: switch.plug_master_bedroom
icon: mdi:power-plug
icon_color: blue
content_info: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Plugs
content:
type: custom:mushroom-entity-card
entity: switch.plug_master_bedroom
name: Master Bedroom Plug
icon: mdi:power-plug
icon_color: '#03A9F4'
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: conditional
conditions:
- entity: media_player.emby_bedroom
state: playing
chip:
type: entity
entity: media_player.emby_bedroom
icon: mdi:play-pause
icon_color: blue
content_info: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Media Player
content:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.emby_bedroom
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'idle') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
- type: conditional
conditions:
- entity: media_player.emby_bedroom
state_not: 'off'
- entity: media_player.emby_bedroom
state_not: idle
card:
entity: media_player.emby_bedroom
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--rgb-indigo-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state('media_player.emby_bedroom', 'idle') %}
background: url( '{{ state_attr('media_player.emby_bedroom', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 76%;
top: -186px;
background: none;
--chip-border-width: 0;
}
:host {
--mush-icon-size: 20px;
--mush-chip-spacing: -2.9px
}
card_mod:
style: |
ha-card {
height: 178px !important;
width: 178px !important;
}
35 Likes
Hi, just saw your card and i like itā¦ try to take the things i need for my setup.
I want to have it like this:
But now i wanna hide the graphs by default like you did, but it doesnāt work for me.
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:simple-thermostat
entity: climate.wohnzimmer
layout:
step: row
header: false
control: false
- type: conditional
conditions:
- entity: input_boolean.thermostat_dropdown
state: 'on'
card:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.temp_wohnzimmer
color: blue
- entity: sensor.targettemp_wohnzimmer
color: lightblue
line_color: blue
line_width: 4
font_size: 75
hours_to_show: 24
hour24: true
name: Temperatur
animate: true
icon: mdi:thermometer
unit: Ā°C
lower_bound: 12
upper_bound: 28
show:
legend: false
state: true
icon: false
name: false
fill: fade
- type: custom:mini-graph-card
entities:
- entity: sensor.valve_wohnzimmer
line_color: red
line_width: 4
font_size: 75
hours_to_show: 24
hour24: true
name: Valve
animate: true
icon: mdi:valve
unit: '%'
lower_bound: 0
upper_bound: 100
show:
legend: false
state: true
icon: false
name: false
fill: fade
I tried it like this, but as i donāt really understand the contidional type (or have not installed that type). Do you have any hint, why this doesnāt work for me.
This is the error code
end of the stream or a document separator is expected (13:1)
- type: conditional