Ok that is the first step. And is it possible to get no feedback ? ( it trembles when I press the icon)
Aaah thats helpful to knowā¦ at least im back up and running again now.
Does this help?
type: custom:mushroom-chips-card
chips:
- type: action
tap_action:
action: none
haptic: none
Hello Dimitri how are you?
I hope fine.
I need your precious help because I would change my automations card.
Now:
But I would only a card when if I click āPannello Automazioniā show me all automations.
I hope to explain my idea.
Thank you!
make a conditional card of it
I think you need an input boolean helper to switch on/off .
the button "āPannello Automazioniā has an action : toggle the input boolean
- type: conditional
conditions:
- entity: input boolean
state: 'on'
card:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
- type: custom:mushroom-template-card
that is what I didā¦
1 Like
I will try today.
Iām thinking to add the button of input_boolean in card āpannello automazioniā but it is a title card.
Probably should I change type?
Thank you
You can keep your Title card, but a conditional template card is the way to go. Just use a vertical stack to start.
1 Like
I know this is somewhere in here but i canāt find this code anymore. 
I have garbage remaining days card and i want to change red color when is 3 days left.
Try this with icon_color, this is my setup. If you want to change the badge, ofcourse go for the badge_color:
type: custom:mushroom-template-card
primary: |-
{% if is_state('sensor.afvalwijzer_today', 'gft') -%}
GFT
{% elif is_state('sensor.afvalwijzer_today', 'papier') -%}
Papier
{% elif is_state('sensor.afvalwijzer_today', 'restafval') -%}
Restafval
{% else %}
{{states('sensor.afvalwijzer_next_type')}}
{%- endif %}
icon: |-
{% if is_state('sensor.afvalwijzer_today', 'gft') -%}
mdi:food-apple
{% elif is_state('sensor.afvalwijzer_today', 'papier') -%}
mdi:paper-cut-vertical
{% elif is_state('sensor.afvalwijzer_today', 'Restafval') -%}
mdi: mdi:trash-can
{% else %}
mdi:recycle
{%- endif %}
icon_color: |-
{% if is_state('sensor.afvalwijzer_today', 'gft') -%}
var(--mush-rgb-green, var(--default-green))
{% elif is_state('sensor.afvalwijzer_today', 'papier') -%}
var(--mush-rgb-state-entity, var(--rgb-blue))
{% elif is_state('sensor.afvalwijzer_today', 'restafval') -%}
black
{% else %}
var(--mush-rgb-disabled, var(--default-disabled))
{%- endif %}
entity: sensor.afvalwijzer_today
badge_icon: mdi:calendar-today-outline
badge_color: green
layout: horizontal
secondary: Vandaag
where cani find that tipoe of backgrounds?
I dont understand where i can define to change color lets say 3 days before due date.
Hi,
Is it possible to have a chip in mushroom , when I click on it popsup an qrcode for the guest wifi?
Could this be done with picture entity or something like it?
Hello Iāve tried to create a conditional car. I have created an input.boolean. I donāt understand my error, because the card do not disappear if my boolean is in off state.
square: false
type: grid
cards:
- type: custom:mushroom-title-card
title: Pannello Automazioni
title_tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.menu_automazioni
card_mod:
style: |
ha-card {
border: 2.5px outset blue !important;
padding-right: 150px !important;
padding-left: 150px !important;
padding-bottom: 30px !important;
padding-top: 30px !important;
border-radius: 0px;
background-color: #002f7a !important;
animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.menu_automazioni
state: 'on'
card:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
entity: automation.notifica_connessione_internet
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Notifica Connessione Internet Ripristinata
secondary: '{{ states.automation.notifica_connessione_internet.state }}'
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.notifica_connessione_internet_caduta
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Notifica Connessione Internet Caduta
secondary: '{{ states.automation.notifica_connessione_internet_caduta.state }}'
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.ferie_apertura
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Ferie Inizio Scena
secondary: '{{ states.automation.ferie_apertura.state }}'
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.automation_10
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Ferie Fine Scena
secondary: '{{ states.automation.automation_10.state }}'
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.accendi_albero_di_natale
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Accendi o Spegni Albero di Natale
secondary: '{{ states.automation.accendi_albero_di_natale.state }}'
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.accendi_luci_di_natale_ore_17_15
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Accendi Luci di Natale al Tramonto
secondary: '{{ states.automation.accendi_luci_di_natale_ore_17_15.state }}'
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.accendi_spegni_luci_di_natalele
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Accendi o Spegni Luci di Natale
secondary: '{{ states.automation.accendi_spegni_luci_di_natalele.state }}'
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.accendi_o_spegni_addobbi_natalizi
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Accendi o Spegni Addobbi Natalizi
secondary: '{{ states.automation.accendi_o_spegni_addobbi_natalizi.state }}'
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.unavailable_entities_notification
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: EntitĆ Non Disponibili
secondary: '{{ states.automation.unavailable_entities_notification.state }}'
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.sensore_ikea_off_line
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Sensore Ikea OffLine
secondary: '{{ states.automation.sensore_ikea_off_line.state }}'
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.armadio_led_loggia
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Armadio Led Loggia
secondary: '{{ states.automation.armadio_led_loggia.state }}'
layout: horizontal
- type: custom:mushroom-title-card
title: Climatizzazione
card_mod:
style: |
ha-card {
border: 2.5px outset orange !important;
padding-right: 150px !important;
padding-left: 150px !important;
padding-bottom: 30px !important;
padding-top: 30px !important;
animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
}
- type: custom:mushroom-template-card
entity: automation.calorifero_cucina_spento
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Calorifero Cucina Spento Porta Finestra Aperta
secondary: '{{ states.automation.calorifero_cucina_spento.state }}'
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.finestra_sala_aperta_calorifero
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Calorifero Sala Spento Finestra Aperta
secondary: '{{ states.automation.finestra_sala_aperta_calorifero.state }}'
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.finestra_aperta_cameretta_calorifero
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Calorifero Cameretta Spento Finestra Aperta
secondary: '{{ states.automation.finestra_aperta_cameretta_calorifero.state }}'
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.finestra_matrimoniale_aperta_calorifero
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Calorifero Matrimoniale Spento Finestra Aperta
secondary: >-
{{ states.automation.finestra_matrimoniale_aperta_calorifero.state
}}
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.finestra_aperta_cameretta_calorifero
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Calorifero Cameretta Spento Finestra Aperta
secondary: '{{ states.automation.finestra_aperta_cameretta_calorifero.state }}'
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.porta_finestra_cucina_chiusa_calorifero
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Calorifero Cucina Acceso Porta Finestra Chiusa
secondary: >-
{{ states.automation.porta_finestra_cucina_chiusa_calorifero.state
}}
layout: horizontal
- type: custom:mushroom-template-card
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Calorifero Sala Acceso Finestra Chiusa
secondary: '{{ states.automation.finestra_sala_chiusa_calorifero_2.state }}'
layout: horizontal
entity: automation.finestra_sala_chiusa_calorifero_2
- type: custom:mushroom-template-card
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Calorifero Matrimoniale Acceso Finestra Chiusa
secondary: >-
{{ states.automation.finestra_matrimoniale_chiusa_calorifero.state
}}
layout: horizontal
entity: automation.finestra_matrimoniale_chiusa_calorifero
- type: custom:mushroom-template-card
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Calorifero Cameretta Acceso Finestra Chiusa
secondary: '{{ states.automation.finestra_chiusa_cameretta_calorifero.state }}'
layout: horizontal
entity: automation.finestra_chiusa_cameretta_calorifero
- type: custom:mushroom-template-card
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Clima Sala Spento Finestra Aperta
secondary: '{{ states.automation.finestra_sala_aperta_condizionatore.state }}'
layout: horizontal
entity: automation.finestra_sala_aperta_condizionatore
- type: custom:mushroom-template-card
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Clima Matrimoniale Spento Finestra Aperta
secondary: >-
{{
states.automation.finestra_matrimoniale_aperta_condizionatore.state
}}
layout: horizontal
entity: automation.finestra_matrimoniale_aperta_condizionatore
- type: custom:mushroom-template-card
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Clima Cameretta Spento Finestra Aperta
secondary: >-
{{ states.automation.finestra_cameretta_aperta_condizionatore.state
}}
layout: horizontal
entity: automation.finestra_cameretta_aperta_condizionatore
columns: 1
I have this to change the input boolean from on/of/on.
tap_action:
action: toggle
I recreated your first 3 cards and changed the main card to a custom:stack-in-card
Try and let me know
type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: Pannello Automazioni
title_tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.menu_automazioni
alignment: center
card_mod:
style: |
ha-card {
border: 2.5px outset blue !important;
padding-right: 150px !important;
padding-left: 150px !important;
padding-bottom: 30px !important;
padding-top: 30px !important;
border-radius: 0px;
background-color: #002f7a !important;
animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.menu_automazioni
state: 'on'
card:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
entity: automation.notifica_connessione_internet
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Notifica Connessione Internet Ripristinata
secondary: |
{{ states('automation.notifica_connessione_internet') }}
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.notifica_connessione_internet_caduta
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Notifica Connessione Internet Caduta
secondary: |
{{ states('automation.notifica_connessione_internet_caduta') }}
layout: horizontal
- type: custom:mushroom-template-card
entity: automation.ferie_apertura
icon: |
{% if is_state(config.entity, 'on') %}
mdi:robot
{% else %}
mdi:robot-off
{% endif %}
icon_color: |
{% if is_state(config.entity, 'on') %}
green
{% else %}
red
{% endif %}
primary: Ferie Inizio Scena
secondary: |
{{ states('automation.ferie_apertura') }}
layout: horizontal
It was successful for me.
I would also recommend
secondary: |
{{ states('automation.notifica_connessione_internet') }}
or this if you want to capitalize the active state.
secondary: |
{% if is_state(config.entity, 'on') %}
On
{% else %}
Off
{% endif %}
vs
secondary: '{{ states.automation.notifica_connessione_internet.state }}'
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Vaatwasblokjes
entity: counter.keuken_vaatwas_vaatwasblokjes
icon_color: >
{{ [200, 62, 77] if states("counter.keuken_vaatwas_vaatwasblokjes")| round(0) | int(0) <20 else [86,86,86] }}
icon: mdi:counter
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
primary: "{{ states('counter.keuken_vaatwas_vaatwasblokjes') | float(0) }} blokjes"
icon:
entity: counter.keuken_vaatwas_vaatwasblokjes
fill_container: true
layout: horizontal
multiline_secondary: false
alignment: end
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Verbruik vaatwas
icon: mdi:dishwasher
entity: sensor.vaatwas_verbruik
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
primary: "{{ states('sensor.keuken_vaatwas_verbruik') | float(0) }} kWh"
icon:
entity: sensor.keuken_vaatwas_verbruik
fill_container: true
layout: horizontal
multiline_secondary: false
alignment: end
The 2 columns are even. I want the first a little bigger so I can put a little more text
The second column I want aligned on the right, but I donāt manage itā¦
Iād recommend using a grid card or type: custom:layout-card
You can control the column widths grid-template-columns: 80% 20% and margins
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 80% 20%
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
primary: Vaatwasblokjes
entity: counter.keuken_vaatwas_vaatwasblokjes
icon_color: >
{{ [200, 62, 77] if states("counter.keuken_vaatwas_vaatwasblokjes")|
round(0) | int(0) <20 else [86,86,86] }}
icon: mdi:counter
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
primary: >-
{{ states('counter.keuken_vaatwas_vaatwasblokjes') | float(0) }}
blokjes
icon: null
entity: counter.keuken_vaatwas_vaatwasblokjes
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 80% 20%
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
primary: Verbruik vaatwas
icon: mdi:dishwasher
entity: sensor.vaatwas_verbruik
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
primary: '{{ states(''sensor.keuken_vaatwas_verbruik'') | float(0) }} kWh'
icon: null
entity: sensor.keuken_vaatwas_verbruik
fill_container: true
layout: horizontal
multiline_secondary: false
1 Like
- type: custom:mushroom-template-card
primary: "{{ states('counter.keuken_vaatwas_vaatwasblokjes') | round(0) | float(0) }} blokjes"
the state is 100
why do I get 100.0 and not 100 ?
try this
primary: |
{{ states('counter.keuken_vaatwas_vaatwasblokjes') | round(0) }} blokjes
or
primary: "{{ states('counter.keuken_vaatwas_vaatwasblokjes') | round(0) }} blokjes"
1 Like
Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: person.[YOUR_SENSOR_or_NAME]
primary_info: state
tap_action:
action: more-info
secondary_info: none
name: [YOUR_SENSOR_or_NAME]
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
margin-top: 0px;
background: transparent;
height: 13px;
width: 100px;
margin-left: auto;
margin-right: auto;
margin-bottom: -20px;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
z-index: 950;
}
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.[YOUR_SENSOR_or_NAME]_battery_level
color: teal
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -135
endAngle: 135
hollow:
size: 80%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 1
gradientToColors:
- mediumseagreen
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 100
legend:
show: false
chart:
height: 140
stroke:
dashArray: 10
card_mod:
style: |
ha-card {
margin-top: 0px;
background: transparent;
height: 140px; /* Adjust if necessary to fit the chart */
width: 100%;
z-index: 1000; /* Ensure this is lower than the button card's z-index */
}
- show_name: true
show_icon: true
type: custom:button-card
entity: sensor.[YOUR_SENSOR_or_NAME]_address
name: ' '
entity_picture: /local/images/[YOUR_SENSOR_or_NAME].jpg
show_entity_picture: true
show_state: true
styles:
card:
- width: 180px
- height: 100px
- background: transparent
name:
- color: orange
state:
- color: darkorange
- font-size: 12px
- font-weight: bold
card_mod:
style: |
ha-card {
margin-top: -125px;
margin-left: 51%;
width: 180px;
height: 180px;
transform: translateX(-50%);
z-index: 1001;
position: relative; /* Ensure the position is set for z-index to work */
overflow: hidden; /* This hides the parts of the image that overflow the container */
}
img {
border-radius: 50%;
width: 100%;
height: 100%; /* Set height to 100% to match the card size */
object-fit: cover; /* This will cover the area, effectively "zooming in" on the image */
object-position: center; /* Adjust the position of the image if needed */
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:baseball
icon_color: red
show_state: true
card_mod:
style: |
ha-card {
margin-top: -100px;
margin-left: 53px;
background: none!important;
border: 0px !important;
{% if not is_state('sensor.[YOUR_SENSOR_or_NAME]_battery_state', 'Charging') %}
display: none !important;
{% endif %}
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: pulse 2s linear infinite;
opacity: 1;
}
@keyframes pulse {
0% {transform:scale(5);color: #228B22; left:0px; top:0px;}
70% {transform:scale(5.8);color: rgba(var(--rgb-teal), 0.7); left:0px; top:0px;}
100% {transform:scale(5);color: #228B22; left:0px; top:0px;}
- type: custom:mushroom-entity-card
entity: sensor.[YOUR_SENSOR_or_NAME]_battery_state
primary_info: state
secondary_info: none
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -25px;
background: transparent;
height: 13px;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-right: 0px !important;
padding-left: 0px!important;
padding-bottom: 0px !important;
padding-top: 0px !important;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
z-index: 950;
border-radius: 15px !important;
{% if not is_state('sensor.[YOUR_SENSOR_or_NAME]_battery_state', 'Not Charging') %}
--primary-text-color: MediumSeaGreen; !important;
animation: ping 3s infinite;
width: 100px;
align-items: center;
{% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 2px rgba(var(--rgb-darkgreen), 0.7);}
50% {box-shadow: 0 0 0 2.5px rgba(var(--rgb-teal), 0.7);}
100% {box-shadow: 0 0 0 2px rgba(var(--rgb-darkgreen), 0.7);}
}
.info {
position: relative;
top: -5px; /* Adjust the top position to bring the text closer to the pulsing ring */
}
card_mod:
style: |
ha-card {
background: transparent;
}
Template to fetch address
# you put this in your configuration.yaml
template:
- sensor:
- name: "[PICK_YOUR_CHOICE]"
unique_id: "[PICK_YOUR_CHOICE]"
state: >
{% set full_address = state_attr('sensor.[YOUR_SENSOR]_geocoded_location', 'Name') %}
{% if full_address %}
{% set address_parts = full_address.split(' ') %}
{% set street_address = address_parts[:2] %}
{{ street_address | join(' ') }}
{% else %}
'Unknown'
{% endif %}
7 Likes