it is perfect!
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.temperatura_interna
content: >-
🌡️ {{ states(entity) | float | round(1) }}°C|💧{{
states('sensor.umidita_interna') | float | round(1) }}%
icon: mdi:home
i have add the icon before the sensor! thank you very much, I tried for 6 hours before asking for help.
Hey sure, this is actually the final one. Then when I finish the navigation bar I will use the 5 buttons with the icons to launch the scenes.
I share the code later.
I came up with this animation for the “net” icon when there is a device that got disconnected.
type: custom:mushroom-template-card
secondary: Network
icon: mdi:lan
icon_color: cyan
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 1.5s infinite;
}
@keyframes ping {
0% { box-shadow: 0 0 0px 0px rgba(var(--rgb-red), 0.9); }
50% { box-shadow: 0 0 5px 15px transparent; }
100% { box-shadow: 0 0 0px 0px transparent; }
}
.: |
ha-state-icon {
animation: net steps(1) 1.5s infinite;
}
@keyframes net {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 5%, 75% 5%, 74% 40%, 25% 40%, 25% 100%, 100% 100%, 100% 0%); }
37% { clip-path: inset(0 0 0 0); }
50% { clip-path: polygon(0% 0%, 0% 100%, 10% 100%, 10% 60%, 50% 60%, 50% 95%, 10% 95%, 10% 100%, 100% 100%, 100% 0%); }
62% { clip-path: inset(0 0 0 0); }
75% { clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 60%, 90% 60%, 90% 95%, 50% 95%, 50% 100%, 100% 100%, 100% 0%); }
87% { clip-path: inset(0 0 0 0); }
}
See if that helps.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: minmax(0, 1fr)
grid-template-rows: auto
grid-template-areas: |
"a b"
cards:
- type: horizontal-stack
view_layout:
grid-area: a
cards:
- type: custom:mushroom-template-card
primary: |
{{ states("sensor.myenergi_zappi_plug_status") }}
icon: >
{% set battery_level = (states('sensor.t_616_rz_state_of_charge')
| int / 10) | round(0) | int * 10 %}
{% if is_state('sensor.myenergi_zappi_status', 'Charging' ) %}
{% if battery_level > 0 %}
mdi:battery-charging-{{ battery_level }}
{% else %}
mdi:battery-charging-outline
{% endif %}
{% else %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
{% endif %}
icon_color: |-
{% set bl = states("sensor.t_616_rz_state_of_charge") | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} orange
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
secondary: >
{{ states("sensor.myenergi_zappi_status") }} {{
states("sensor.myenergi_zappi_power_ct_internal_load") }}W
entity: sensor.myenergi_zappi_plug_status
layout: horizontal
fill_container: true
tap_action:
action: more-info
card_mod:
style: |
@keyframes blink {
50% {opacity: 0;}
}
ha-card {
padding: 0px !important;
margin: 0px !important;
border: none;
background: none;
}
ha-state-icon:after {
content: "{{states('sensor.t_616_rz_state_of_charge')}}%";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: {% if is_state('switch.ev_smart_charging_ev_connected', 'off') %}
rgb(var(--rgb-red)) {% else %} rgb(var(--rgb-green)) {% endif %};
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 18px;
height: 18px;
font-size: 8px;
}
- type: horizontal-stack
view_layout:
grid-area: b
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
fill_container: true
layout: vertical
icon: mdi:play
entity: button.ev_smart_charging_manually_start_charging
icon_color: >
{% if is_state('switch.ev_smart_charging_ev_connected', 'on') %}
{% endif %}
tap_action:
action: toggle
card_mod:
style: |-
ha-card {
padding: 0px !important;
border: none;
background: none;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
fill_container: true
layout: vertical
icon: mdi:stop
entity: button.ev_smart_charging_manually_stop_charging
icon_color: >
{% if is_state('switch.ev_smart_charging_ev_connected', 'on') %}
{% endif %}
tap_action:
action: toggle
card_mod:
style: |-
ha-card {
padding: 0px !important;
border: none;
background: none;
}
card_mod:
style: |-
ha-card {
padding: 0px !important;
border: none;
}
Is it possible increase the size font with card mod?
Yes, take a look at my guide below:
Look at text styling section of whatever card you want to change the font size of.
Hey everyone,
I am wanting to replicate something similar to the “entity-filter” in Home Assistant using Chips. I’d like to have a chip for every light that is turned on, or a fan that is on, or a door that is open. I know that I can use expand to expand a group, but how would I generate a chip for each returned entity with the correct state? Anyone have any ideas?
You can use auto entities for that. Here is a card that returns a chip for every sensor entity that has the word battery and office in the entity id.
type: custom:auto-entities
card:
type: custom:mushroom-chips-card
card_param: chips
filter:
template: >-
{%- for state in states.sensor | selectattr('entity_id','search','battery')
| selectattr('entity_id','search','office') -%}
{{
{
'type': 'entity',
'entity': state.entity_id
}
}},
{%- endfor %}
sort:
method: state
numeric: true
count: 10
Hello Guys! Anyone an idea how i can achieve this?
Post your yaml please
nothing special…
type: custom:mushroom-entity-card
entity: scene.good_night
name: Gute Nacht
icon: mdi:weather-night
icon_color: purple
secondary_info: none
icon_type: icon
tap_action:
action: call-service
service: scene.turn_on
target:
entity_id: scene.good_night
data:
transition: 2
hold_action:
action: none
double_tap_action:
action: none
fill_container: true
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 490px !important;
border-radius: 13px !important;
}
Something like this work for you?
Hard to tell as it seems like you are making it for a very different screen size to mine.
type: custom:mushroom-entity-card
entity: scene.good_night
name: Gute Nacht
icon: mdi:weather-night
icon_color: purple
secondary_info: none
icon_type: icon
tap_action:
action: call-service
service: scene.turn_on
target:
entity_id: scene.good_night
data:
transition: 2
hold_action:
action: none
double_tap_action:
action: none
fill_container: true
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
position: relative;
width: 490px !important;
border-radius: 13px !important;
}
.: |
ha-state-icon {
position: absolute;
left: 10px;
}
mushroom-state-info {
position: absolute;
top: 24px;
left: -10px;
}
thank you a lot! worked! just tweaked arround with the numbers:
On:
any idea how i change the off-color?
Off:
Dont have scenes so not sure. Does a scene entity have an on/off state? If so something like this should work:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
position: relative;
width: 490px !important;
border-radius: 13px !important;
{% if states('scene.good_night') == 'on' %}
background: rgba(var(--rgb-purple), 0.2) !important;
{% else %}
background: rgba(var(--rgb-blue), 0.2) !important;
{% endif %}
}
.: |
ha-state-icon {
position: absolute;
left: 10px;
{% if states('scene.good_night') == 'on' %}
color: rgba(var(--rgb-purple), 1) !important;
{% else %}
color: rgba(var(--rgb-blue), 1) !important;
{% endif %}
}
mushroom-state-info {
position: absolute;
top: 24px;
left: -10px;
}
For more styling info check my guide:
thank you sir! you just safed my weekend. time to redo my homescreen! haha
will definitely check out your guide
Thanks. That is much better. Scales also well on mobile. The only thing is that the background of the left card (EV disconnected etc) has a very slightly different background color vs the the rest of the card
Very nice. Please Share your Code. Thank You.
can anyone help with card-mod Pop ups. when I view them on android app, it does not fit on the screen?
What am I missing here??
tap_action:
action: fire-dom-event
browser_mod:
command: popup
service: browser_mod.popup
target:
device_id:
- 4064f034b49bd0d728645f51df0ec321
- 2615813c7af26d27771116d33cd7399a
title: Lights
data:
dismissable: true
autoclose: false
size: NORMAL
content:
type: custom:auto-entities
filter:
include:
- group: light.total_light_switch_group
state: 'on'
options:
features:
- type: light-brightness
type: tile
vertical: true
color: accent
tap_action:
action: toggle
icon_tap_action:
action: more-info
- group: light.total_light_bulb_group
state: 'on'
options:
features:
- type: light-brightness
type: tile
vertical: true
color: accent
tap_action:
action: toggle
icon_tap_action:
action: more-info
exclude: []
card:
square: false
type: grid
columns: 2
show_empty: true
card_param: cards
sort:
method: friendly_name
reverse: false
numeric: true
ignore_case: false
``TOP BAR STICKY:
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
card_mod:
style: |
ha-card {
--chip-icon-size: 23px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: custom:mushroom-template-card
primary: HOME
secondary: ''
icon: mdi:shield-home
icon_color: |-
{% set alarm_status = states(entity) %}
{% if alarm_status == 'armed_away' %}
green
{% elif alarm_status == 'disarmed' %}
disabled
{% elif alarm_status == 'arming' %}
yellow
{% elif alarm_status == 'triggered' %}
red
{% endif %}
entity: alarm_control_panel.home
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
width: 110px;
--spacing: 3px;
padding-bottom: 0px !important;
background: none;
box-shadow: none;
margin-left: auto;
margin-right: auto;
margin-top: -5px;
transition: all 0s;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_boolean.menuconsumi
icon: mdi:chart-bar
card_mod:
style: |
ha-card:after {
position: absolute;
background: rgb(var(--rgb-red));
border-radius: 50%;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
}
- type: template
entity: input_boolean.menu
icon: mdi:dots-vertical
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Impostazioni
content:
type: vertical-stack
cards:
- type: custom:mushroom-select-card
entity: input_select.tema
layout: horizontal
secondary_info: none
- type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: 'Seleziona il tema:'
secondary: ''
icon: ''
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
layout: horizontal
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:white-balance-sunny
layout: vertical
icon_color: >-
{% if is_state('input_select.chiaro_scuro',
'Scuro') %}
white
{% elif is_state('input_select.chiaro_scuro',
'Chiaro') %}
black
{% endif %}
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.chiaro_scuro
data:
option: Chiaro
entity: input_select.chiaro_scuro
card_mod:
style: |
ha-card {
width: 0px;
height: 0px !important;
--spacing: 0px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 23px;
margin-left: 160px;
transition: all 0.5s;
}
mushroom-shape-icon {
{% if is_state('input_select.chiaro_scuro', 'Scuro') %}
--shape-color: none !important;
{% endif %}
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:weather-night
layout: vertical
icon_color: >-
{% if is_state('input_select.chiaro_scuro',
'Scuro') %}
white
{% elif is_state('input_select.chiaro_scuro',
'Chiaro') %}
black
{% endif %}
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.chiaro_scuro
data:
option: Scuro
entity: input_select.chiaro_scuro
card_mod:
style: |
ha-card {
width: 0px;
height: 0px !important;
--spacing: 0px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 23px;
margin-left: 100px;
transition: all 0.5s;
}
mushroom-shape-icon {
{% if is_state('input_select.chiaro_scuro', 'Chiaro') %}
--shape-color: none !important;
{% endif %}
}
card_mod:
style: |
ha-card {
height: 50px;
padding: 0px;
}
card_mod:
style:
ha-header-bar$: |
.mdc-top-app-bar__section {
padding: 0px !important;
}
.mdc-top-app-bar__title {
--mdc-typography-headline6-font-size: 18px;
padding-left: 8px !important;
}
.mdc-top-app-bar__row {
height: var(--mdc-icon-button-size, 36px) !important;
}
.mdc-top-app-bar {
padding: 8px;
}
.: |
ha-icon-button {
position: absolute !important;
right: 0px;
background: color-mix(in srgb, var(--grey-color) 20%, transparent);
border-radius: 50%;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
:host {
--popup-min-width: 450px;
--mdc-icon-button-size: 36px;
}
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-icon-size: 22px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: conditional
conditions:
- entity: input_boolean.menuconsumi
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.cont_acqua_acqua_m3
icon_color: blue
tap_action:
action: more-info
alignment: end
card_mod: null
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: entity
entity: sensor.energia
icon: mdi:lightning-bolt
icon_color: yellow
tap_action:
action: more-info
alignment: end
card_mod: null
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: conditional
conditions:
- entity: group.luci
state: 'on'
chip:
type: template
icon: mdi:lightbulb
entity: group.luci
content: >
{{ expand(states.group.luci) | selectattr('state', 'eq', 'on') |
list | count }}
icon_color: amber
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lights On
content:
type: custom:auto-entities
filter:
include:
- group: group.luci
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
- entity_id: group.luci
state: 'on'
options:
type: custom:mushroom-light-card
layout: horizontal
secondary_info: none
tap_action:
action: toggle
card_mod:
style: |
/* Style & position All Lights button */
ha-card {
background: color-mix(in srgb, rgb(var(--rgb-state-light)) 10%, var(--card-background-color));
}
:host {
margin: 0px 0px 12px !important;
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: group.luci
state: 'on'
chip:
type: template
icon_color: blue
icon: mdi:window-open
entity: group.luci
content: >
{{ expand(states.group.luci) | selectattr('state', 'eq', 'on') |
list | count }}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Windows Open
content:
type: custom:auto-entities
filter:
include:
- group: group.luci
state: 'on'
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
tap_action:
action: none
hold_action:
action: none
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: group.luci
state: 'on'
chip:
type: template
icon_color: light-blue
icon: mdi:water-alert
tap_action:
action: more-info
entity: group.luci
card_mod:
style: |
.content {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: group.luci
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:fire-alert
tap_action:
action: more-info
entity: group.luci
card_mod:
style: |
.content {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
alignment: end
card_mod:
style: |
/* Set margins on notification chips */
ha-card {
margin: var(--chip-spacing) calc(-1 * var(--chip-spacing)) 0px;
transition: all 0s;
}
card_mod:
style: |
/* Remove styling from top card with chips */
ha-card {
/* Allow pseudo elements to display outside card */
overflow: visible !important;
/* Remove gap at top of card */
margin-top: calc(-1 * var(--mush-chip-spacing, 8px));
/* Remove styling from card */
box-shadow: none;
border: none;
background: none;
padding: var(--mush-chip-spacing, 8px);
transition: all 0s;
}
/* Make card sticky at top of page */
:host {
position: sticky;
z-index: 4;
top: 0px;
}
/* Pseudo element to hide card styling when at top */
ha-card:after {
content: "";
/* Make fixed so element scrolls up */
position: absolute;
top: 0px;
/* Adjust height when notifications visible */
height: {{ '104px' if is_state('input_boolean.menuconsumi', 'on') else '60px' }};
/* Set width to match */
width: 100%;
max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));
/* Center element on page */
left: 50%;
transform: translateX(-50%);
/* Position between chips and background pseudo elemnt */
z-index: -1;
/* Match background to main card */
background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
}
/* Pseudo element for background & other card styling */
ha-card:before {
content: "";
/* Position & size card behind chips */
position: absolute;
top: 0px;
left: 0px;
height: 100%;
/* Adjust width to account for border */
width: 100%;
/* Position card at back */
z-index: -1;
/* Blur content behind card */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* Adjust opacity of card */
background: rgba(var(--rgb-card-background-color), 0.8);
/* Set styling of card */
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
//box-shadow: var(--ha-card-box-shadow);
box-shadow: 30px;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}