r_anand
July 5, 2024, 1:43pm
951
Have the same issue, was working as expected until the upgrade 2 days ago.
One of my cards
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
secondary: >-
{{
relative_time(states.binary_sensor.front_door_sensor_contact.last_changed)
| replace("day", "d")| replace("hour", "hr") | replace("minute",
"min") | replace("second", "sec") }} ago
entity: light.front_door
name: Front Door
icon: mdi:light-flood-down
use_light_color: true
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: /dashboard-rooms/front-porch
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 70px;
--ha-card-border-width: 0px;
height: 55px;
margin-left: -23px !important;
margin-top: -3px !important;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: binary_sensor.front_door_motion_sensor_occupancy
icon: |
{{ 'mdi:motion-sensor-off'
if is_state(entity,'unavailable')
else 'mdi:motion-sensor' }}
icon_color: |
{% if is_state('binary_sensor.front_door_motion_in_the_last_hour',
'on') %}
orange
{% endif %}
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity,'on') %}
animation: clip 2s linear infinite;
{% endif %}
}
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
ha-card {
background: transparent;
border-style: none;
--spacing:0px
}
:host {
padding: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: binary_sensor.front_door_sensor_contact
content_info: none
tap_action:
action: more-info
secondary: for {{states('sensor.front_door_open_duration') }} secs
icon: |
{% if is_state('binary_sensor.front_door_sensor_unreachable',
'on') %}
mdi:door-closed-cancel
{% elif is_state('binary_sensor.front_door_sensor_contact', 'on') %}
mdi:door-open
{% elif is_state('binary_sensor.front_door_sensor_contact', 'off') %}
mdi:door-closed
{% else %}
mdi:door-closed-cancel
{% endif %}
icon_color: |
{% if is_state('binary_sensor.front_door_opened_in_the_last_hour',
'on') %}
orange
{% endif %}
card_mod:
style: |
{% if is_state('binary_sensor.front_door_is_left_opened',
'on') %}
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
{% endif %}
ha-card {
background: transparent;
border-style: none;
--spacing: 0px;
}
:host {
padding: 0px;
margin-left: -80px !important;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: custom:mushroom-template-card
entity: light.entrance_light
tap_action:
action: more-info
hold_action:
action: toggle
icon: |
{% if is_state(entity, 'unavailable') %}
mdi:lightbulb-alert-outline
{% else %}
hue:bulb-group-candle
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
orange
{% endif %}
card_mod:
style: |
ha-card {
background: transparent;
border-style: none;
--spacing:0px
}
:host {
padding: 0px;
margin-right: -80px !important;
}
mushroom-shape-icon {
--shape-color: none !important;
}
card_mod:
style: |
ha-card {
{% if is_state('light.front_door', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
MrGrey
July 6, 2024, 3:32am
953
This probably doesnāt belong here, but I mainly use mushroom cards, soā¦
Itās common, in all of the postings above (including Part 1), to use things likeā¦
{{ states(config.entity) }}
or
{{ states(entity) }}
ā¦to show information about the entity defined in the card without referring to its original long name directly.
Iām hoping someone can show/tell me how to writeā¦
{{ states.binary_sensor.my_sensor.last_changed }}
ā¦assuming I have:
entity: binary_sensor.my_sensor
as the Entity of a Mushroom Template Card.
Is that possible?.. I have triedā¦
{{ states.entity.last_changed }}
{{ states.config.entity.last_changed }}
ā¦and wasnāt surprised to find that it didnāt work.
At some point I might find that it canāt be done, or, someone might show me how?
MrGrey.
thesmer
July 6, 2024, 7:56am
954
Same issue here. Is there any general advise?
fugley
July 6, 2024, 10:15am
955
type: custom:mushroom-template-card
entity: binary_sensor.my_sensor
primary: >
{{ states[entity].last_changed }}
1 Like
I am creating a title card, were on tap action I am calling a service which passes event_date in the format YYYY-MM-DD. I want to pass todays Date dynamically.
type: custom:mushroom-template-card
primary: Raise Event
icon: mdi:home
tap_action:
action: call-service
service: script.create_maid_event
data:
event_date: '2024-07-06'
status: maid_present
target: {}
I too had my spacing all wrong and cards got bigger after updating to 2024.7.
what i found that effected this in card-mod was:
margin-left: -18px;
i was able to play around with another way in css (using chatGPT as i have no experience in CSS haha):
poistion: relative;
left: -18px
i also had to use top: -##px to adjust stuff. --mush-spacing: 0px also effected the setup.
to sum up - as i see most of us are basing our cards on the room stack-in-card by rhys:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
...
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-background-color), 0.25);
--mush-icon-size: 70px;
--mush-spacing: 0px
height: 56px;
position: relative;
left: -20px;
top: -##px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
...
- type: conditional
...
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 92px;
}
thesmer
July 7, 2024, 12:07pm
958
Thanks for the debugging and information. I just realized, there is an update for the Mushroom card in HACS available and installed it. I see some changes in my layout now, but still not the old appearance.
Before. you just made me check haha =]
after my changes - this update actually screwed up my card-mod spacing between chips. i changed the spacing to be smaller and now it is ignored and it overflowed out of my card. damn it!
i wonder whatās the root cause for all of this
mvanlijden
July 8, 2024, 8:02am
960
I am no CSS master, but I also played around with the CSS a bit and now have this layout again (top = new, bottom = old unmodified)
Main changes in the card_mod:
Changed the adjustments from :host to ha-card and using default ha-card elements and not only mush elements (i thought this was also a recommendation by @piitaya when adjusting mushroom cards)
Adjusted the spacing as these seem to have been changed making the chips card always change to bottom
Added a width parameter in there to make sure the background covers all the way to the right. Does anybody know a smart way to make this card width + 20px?
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Woonkamer
secondary: |-
{% if has_value("sensor.rookmelder_beneden_temperature") %}
{{ states('sensor.rookmelder_beneden_temperature') | round(0) }} Ā°C
{% endif %}
icon: mdi:sofa
entity: light.lampen_woonkamer
tap_action:
action: navigate
navigation_path: woonkamer
hold_action:
action: toggle
icon_color: blue
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.3);
left: -20px;
top: -20px;
width: 500px;
--spacing: 10px 10px 0px 12px;
--icon-size: 70px;
--ha-card-border-width: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.lampen_woonkamer
icon: mdi:lightbulb-group
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% else %}
disabled
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
position: absolute;
left: 0px;
}
- type: conditional
conditions:
- entity: binary_sensor.nuki_pro_achterdeur_door_sensor
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:door-open
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: binary_sensor.everything_presence_lite_24eaf8_occupancy
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: null
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:sleep
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: media_player.home_woonkamer
state_not: 'off'
- entity: media_player.home_woonkamer
state_not: idle
- entity: media_player.home_woonkamer
state_not: unavailable
chip:
type: template
entity: media_player.home_woonkamer
icon_color: disabled
icon: |-
{% set media_type = state_attr(config.entity,
'media_content_type') %}
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-roll
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
animation: beat 1.3s ease-out infinite both;
{% else %}
{% endif %}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
@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% { opacity: 1; }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { opacity: 0.6; }
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
- type: conditional
conditions:
- entity: media_player.lg_webos_woonkamer
state_not: 'off'
- condition: state
entity: media_player.lg_webos_woonkamer
state_not: idle
- entity: media_player.lg_webos_woonkamer
state_not: unavailable
chip:
type: template
entity: media_player.lg_webos_woonkamer
icon_color: disabled
icon: |-
{% set source = state_attr(config.entity,'source') %}
{% if source == 'Live TV' %}
mdi:television-classic
{% elif source == 'Plex' %}
mdi:plex
{% elif source == 'YouTube' %}
mdi:youtube
{% elif source == 'Chromecast' %}
mdi:cast
{% elif source == 'NPO' %}
mdi:cast
{% elif source == 'RTL XL' %}
mdi:cast
{% else %}
mdi:television
{% endif %}
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: sensor.woonkamer_heating
state_not: '0.0'
- entity: sensor.woonkamer_heating
state_not: '0'
chip:
type: template
entity: climate.woonkamer
icon_color: disabled
icon: |-
{% if is_state(entity, 'auto') %}
mdi:thermometer-auto
{% elif is_state(entity, 'heat') %}
mdi:thermometer-lines
{% else %}
mdi:home-thermometer
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'heat') %}
animation: heat 2s infinite;
{% endif %}
}
@keyframes heat {
50% { opacity: 0.4; }
}
- type: conditional
conditions:
- entity: cover.woonkamer_gordijnen
state_not: unavailable
chip:
type: template
entity: cover.woonkamer_gordijnen
icon_color: disabled
icon: >-
{% if is_state(entity, 'closed') %}
mdi:curtains-closed
{% elif is_state(entity, 'open') and
state_attr(entity,'current_position') is none %}
mdi:curtains-closed
{% elif is_state(entity, 'open') and
state_attr(entity,'current_position') < 50 %}
mdi:curtains
{% else %}
mdi:curtains
{% endif %}
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-border-width: 0;
position: relative;
top: -20px;
}
card_mod:
style: |
ha-card {
height: 92px;
}
2 Likes
GTunney
July 8, 2024, 8:54am
961
Thanks for this, this brought back the background picture for me but then Iām unable to then apply styling to the mushroom state info.
mushroom-state-info$:
.primary {
text-shadow: 0px 0px 5px black;
--card-primary-font-weight: 325;
--card-primary-color: white;
--card-primary-font-size: 20px;
align-items: end;
margin-top: 175px;
inline-size: 180px;
height: 25px;
}
.secondary {
--card-secondary-font-size: 13px;
text-shadow: 0px 0px 5px black;
--card-secondary-color: white;
--card-secondary-font-weight: 350;
margin-top: -2px;
}
mvanlijden
July 8, 2024, 9:03am
962
structuring like this does the trick for me
card_mod:
style:
mushroom-state-info$: |
.primary{
....
}
.: |
ha-card {
....
}
GTunney
July 8, 2024, 9:14am
963
Ok Iām back in business, I had to change the :host entries to just be ha-card and then I also had to add !important; onto every background image settings. I just need to sort out the chips spacing issue then should be all back to how it was on 2024.6.4
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Kitchen
secondary: >-
{{ states('sensor.kitchen_temperature') | round (1) }}Ā°C - {{
states('sensor.kitchen_humidity') }}%
icon: mdi:tree
entity: light.kitchen_lights
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: /home-v2/kitchen
icon_color: '{{ "orange" if is_state("light.kitchen_lights", "on") else "disabled" }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 0px 0px 5px black;
--card-primary-font-weight: 350;
--card-primary-color: white;
--card-primary-font-size: 20px;
align-items: end;
margin-top: 175px;
margin-left: -40px;
inline-size: 180px;
height: 25px;
}
.secondary {
--card-secondary-font-size: 13px;
text-shadow: 0px 0px 5px black;
--card-secondary-color: white;
--card-secondary-font-weight: 350;
margin-top: -2px;
margin-left: -40px;
}
.: |
ha-card {
background: url('/local/images/areas/kitchen.jpg') center !important;
background-size: cover !important;
background-blend-mode: overlay !important;
height: 220px !important;
margin-left: -15px !important;
margin-top: -70px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: lock.back_door
state: unlocked
chip:
type: template
entity: lock.back_door
icon_color: red
icon: mdi:lock-open-variant
tap_action:
action: more-info
hold_action:
action: none
- type: conditional
conditions:
- entity: binary_sensor.back_door
state: 'on'
chip:
type: template
entity: binary_sensor.back_door
icon_color: red
icon: mdi:door-open
tap_action:
action: more-info
hold_action:
action: none
- type: conditional
conditions:
- entity: media_player.kitchen_echo
state: playing
chip:
type: template
entity: media_player.kitchen_echo
icon_color: grey
icon: mdi:music
tap_action:
action: more-info
- type: template
entity: light.kitchen_lights
icon: >-
{{ 'mdi:lightbulb' if expand(area_entities('Kitchen')) |
selectattr('domain','eq','light') | selectattr('state','eq','on') |
list | count > 0 else 'mdi:lightbulb-outline' }}
icon_color: >
{% set lights_in_kitchen = expand(area_entities('Kitchen')) |
selectattr('domain', 'eq', 'light') | list %} {{ 'orange' if
lights_in_kitchen | selectattr('state', 'eq', 'on') | list | count > 0
else 'grey' }}
content: >-
{{ expand(area_entities('kitchen')) |
selectattr('domain','eq','light') | selectattr('state','eq','on') |
list | count }}
tap_action:
action: call-service
service: light.toggle
target:
area_id: kitchen
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -5px;
margin-top: -10px;
}
card_mod:
style: |
ha-card {
height: 180px;
width: 180px;
margin-left: auto;
margin-right: auto;
}
Is there a way to get a āspaceā in the mushroom-template-card secondrary ?
TommyWelle
July 9, 2024, 9:25am
965
Hello
I have some issues after updating HA and Mushroom Themes.
Here is my code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Benjamin
secondary: |-
{{ states('sensor.verisure_rv_benjamin_temp') }}Ā°C |
{{ states('sensor.verisure_rv_benjamin_fukt') }} %
icon: mdi:face-man
entity: light.lysg_benja_tak
icon_color: |-
{% if is_state('light.lysg_benja_tak', 'on') %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: /lovelace-panel/benja
multiline_secondary: false
card_mod:
style: |
ha-state-icon::after {
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
}
{% if states('binary_sensor.aqara_motion_benja_1') == 'on' %}
ha-state-icon::before {
content: 'directions_walk';
position: absolute;
font-family: 'Material Icons';
top: -11%;
left: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 11px;
background: rgba(var(--rgb-disabled), 0.5);
color: rgba(var(--rgb-red), 1);
border-radius: 50%;
animation: blink 1s linear infinite;
}
{% endif %}
@keyframes blink {
50% {opacity: 0;}
}
layout: horizontal
fill_container: false
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.mill_benja
icon: |-
{% if is_state('climate.mill_benja', 'heat') %}
mdi:radiator
{% else %}
mdi:radiator-off
{% endif %}
icon_color: |-
{% if is_state('climate.mill_benja', 'heat') %}
red
{% else %}
blue
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: light.lysg_benja_tak
icon: |-
{% if is_state('light.lysg_benja_tak', 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state('light.lysg_benja_tak', 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: light
entity: light.lys_benja_led_tak_1
use_light_color: true
icon: mdi:led-strip-variant
content_info: none
tap_action:
action: toggle
card_mod:
style:
mushroom-light-chip:nth-child(1)$: |
ha-state-icon {
{% if states('light.lys_benja_led_tak_1') == 'off' %}
color: grey;
{% endif %}
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.8em
}
- type: template
entity: input_boolean.benjamin_nattlys_10
icon: |-
{% if is_state('input_boolean.benjamin_nattlys_10', 'on') %}
mdi:weather-night
{% else %}
mdi:weather-night
{% endif %}
icon_color: >-
{% if is_state('input_boolean.benjamin_nattlys_10', 'on') %} purple {%
else %} grey {% endif %}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: input_boolean.boolean_benja_tv_auto
icon: |-
{% if is_state('input_boolean.boolean_benja_tv_auto', 'on') %}
mdi:television
{% else %}
mdi:television-off
{% endif %}
icon_color: |-
{% if is_state('input_boolean.boolean_benja_tv_auto', 'on') %}
green
{% else %}
grey
{% endif %}
hold_action:
action: false
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
icon_color: blue
icon: mdi:remote-tv
hold_action:
action: false
tap_action:
action: call-service
service: script.1708632757993
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: input_boolean.benjamin_auto
icon: |-
{% if is_state('input_boolean.benjamin_auto', 'on') %}
mdi:lightbulb-auto
{% else %}
mdi:lightbulb-auto-outline
{% endif %}
icon_color: |-
{% if is_state('input_boolean.benjamin_auto', 'on') %}
green
{% else %}
grey
{% endif %}
hold_action:
action: false
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: switch.aqara_kontakt_benja_1
icon: |-
{% if is_state('switch.aqara_kontakt_benja_1', 'on') %}
mdi:power-plug
{% else %}
mdi:power-plug-off
{% endif %}
icon_color: |-
{% if is_state('switch.aqara_kontakt_benja_1', 'on') %}
green
{% else %}
grey
{% endif %}
hold_action:
action: false
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
alignment: end
card_mod:
style: |
ha-card {
background: none !important;
height: 40px;
flex-wrap: nowrap;
width: max-content;
align-items: center;
display: flex;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: 10px;
padding-bottom: 0px;
}
:host {
overflow-x: scroll;
overflow-y: hidden;
direction: ltr;
margin: 0px !important;
padding-left: 12px;
padding-bottom: 0px;
margin-top: 10px;
}
tischer.s
July 9, 2024, 7:23pm
966
Thats amazing, thanks a lot
Can you help me a bit with:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Haus
secondary: >-
{{ states('sensor.haus_temperatur_mischung') | replace (".",",")}} Ā°C ā¢ {{
states('sensor.haus_feuchtigkeit_mischung') }} %
icon: mdi:home
entity: light.zentral_haus_licht_helper
tap_action:
action: navigate
navigation_path: haus
hold_action:
action: more-info
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.3);
left: -20px;
top: -20px;
width: 500px;
--spacing: 10px 10px 0px 12px;
--icon-size: 70px;
--ha-card-border-width: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_bewegung_prasenz_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_bewegung_prasenz
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_fenster_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_fenster
icon: mdi:window-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_turen_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_turen
icon: mdi:door-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_tore_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_tore
icon: mdi:gate-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: input_boolean.briefkasten
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: input_boolean.briefkasten
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
icon: mdi:mailbox-open
- type: template
icon_color: '{{ ''#f1c232'' if is_state(entity, ''on'') else ''off'' ''#5353ec''}}'
icon: mdi:sleep-off
tap_action:
action: more-info
entity: switch.wach_schlafen
alignment: end
card_mod:
style: |
ha-card {
height: 40px;
}
1 Like
Frosty
July 9, 2024, 9:50pm
967
you can add some right margin to the icon shape
card_mod:
style:
mushroom-shape-icon$: |
.shape {
margin-right: 10px;
}
--chip-box-shadow: none;
Faecon
July 10, 2024, 4:00am
968
I have an orange line around the template card. Can this be disabled ?
type: custom:mushroom-template-card
primary: Alles uit
icon: mdi:lightbulb
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
tischer.s
July 10, 2024, 6:30am
969
You are great thanks a lot for the code snippet
Unfortunately, for me it is not working - can you quickly help me please where to place it?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Haus
secondary: >-
{{ states('sensor.haus_temperatur_mischung') | replace (".",",")}} Ā°C ā¢ {{
states('sensor.haus_feuchtigkeit_mischung') }} %
icon: mdi:home
entity: light.zentral_haus_licht_helper
tap_action:
action: navigate
navigation_path: haus
hold_action:
action: more-info
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.3);
left: -20px;
top: -20px;
width: 500px;
--spacing: 10px 10px 0px 12px;
--icon-size: 70px;
--ha-card-border-width: 0;
--chip-box-shadow: none;
}
mushroom-shape-icon$: |
.shape {
margin-right: 50px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_bewegung_prasenz_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_bewegung_prasenz
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_fenster_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_fenster
icon: mdi:window-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_turen_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_turen
icon: mdi:door-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_tore_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_tore
icon: mdi:gate-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: input_boolean.briefkasten
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: input_boolean.briefkasten
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
icon: mdi:mailbox-open
- type: template
icon_color: '{{ ''#f1c232'' if is_state(entity, ''on'') else ''off'' ''#5353ec''}}'
icon: mdi:sleep-off
tap_action:
action: more-info
entity: switch.wach_schlafen
alignment: end
card_mod:
style: |
ha-card {
height: 40px;
}
i found a post a while ago that helped me with the card-mod code blocks.
style:
mushroom-shape-icon$: |
.shape {
margin-right: 50px;
}
.: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.3);
left: -20px;
top: -20px;
width: 500px;
--spacing: 10px 10px 0px 12px;
--icon-size: 70px;
--ha-card-border-width: 0;
--chip-box-shadow: none;
}
tischer.s
July 10, 2024, 7:28am
971
Amazing, that does the trick, thanks a lot
