Good. Thanks
Any way to reduce the size of the conditional chip icons and the space between them?
Yes, this is an example
alignment: end
card_mod:
style: |
ha-card {
border: none;
--chip-height: 30px;
--chip-spacing: 0px;
}
I already try thatā¦ but it still have a lot of spaceā¦
Please point out what you consider lots of space. Are you talking about the space inside the chip?
Yesā¦ because i remove the bordersā¦ and the all the āinsideā space remains
Hi all. I have inserted those conditional cards couple of years ago for my homeassistant dashboard. Got my self a new computer and did backup copy of frontend
But having problem with animation of chips like this one down below no matter what i do it dont work, the icon
Does not appear on the card.
Thanks in advance
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Half Bath
secondary: Bathroom
icon: mdi:toilet
fill_container: true
layout: horizontal
multiline_secondary: false
tap_action:
action: navigate
navigation_path: half-bath
icon_color: teal
hold_action:
action: none
double_tap_action:
action: none
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: 76px;
height: 56px;
margin-left: -2px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
- type: conditional
conditions:
- entity: light.vanity_light
state: 'on'
chip:
type: entity
entity: light.vanity_light
icon_color: amber
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.vanity_light
content_info: none
icon: mdi:lightbulb
- type: conditional
conditions:
- entity: fan.exhaust_fan
state: 'on'
chip:
type: entity
entity: fan.exhaust_fan
icon_color: green
card_mod: null
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation linear infinite;
{% if states('fan.exhaust_fan') == 'on' %}
animation-duration: 1s;
{%- else -%}
{%- endif %}
}
tap_action:
action: call-service
service: fan.turn_off
service_data: {}
target:
entity_id: fan.exhaust_fan
content_info: none
icon: mdi:fan
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-right: 6px;
}
card_mod:
style: |
ha-card {
height: 92px;
{% if is_state('light.vanity_light', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
An exampleā¦
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.suite_motion
state_not: "off"
chip:
type: template
icon_color: |-
{% set state=states(entity) %}
{% if state=='open' or state=='on' %}
yellow
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:motion-sensor
entity: binary_sensor.suite_motion
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
padding: 20px;
}
You can set the padding:
to zero, but you can also shift the chips closer together if you are removing the border.
Your indention for style:
is off, thus the null value
It is
card_mod:
style: |
Could any one help me get the animation working?
A bit unsure how to target the chip.
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: switch.coffeemaker
state: "on"
chip:
type: entity
entity: switch.coffeemaker
icon_color: brown
content_info: none
icon: mdi:coffee-maker
card_mod:
style: |
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
animation: java 4s linear infinite;
}
@keyframes java {
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 {
background: var(--card-background-color);
#width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
Like thisā¦
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: switch.coffeemaker
state: "on"
chip:
type: entity
entity: switch.coffeemaker
icon_color: brown
content_info: none
icon: mdi:coffee-maker
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-entity-chip$: |
ha-state-icon {
animation: java 4s linear infinite;
}
@keyframes java {
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%); }
}
Is this correct?
chip:
type: entity
entity: fan.sonoff_1000a82389
icon_color: green
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation linear infinite;
{% if states('fan.sonoff_1000a82389') == 'on' %}
animation-duration: 1s;
{%- else -%}
{%- endif %}
}
No, please compare your code to the post before yoursā¦
EDIT: ADDED CODE
Sticky
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: template
content: "{{ now().strftime(\"%A, %-d %B\") }}"
card_mod:
style: |
/* Style date & time */
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-border-width: 0;
}
- type: template
entity: input_boolean.notifications
icon: mdi:bell
tap_action:
action: toggle
hold_action:
action: none
card_mod:
style: |
/* Notification indicator */
ha-card:after {
/* Turn on indicator if there is a notification */
{% set notifications = (expand(states.group.all_lights) | selectattr('state', 'eq', 'on') | list | count)
+ (expand(states.group.all_windows) | selectattr( 'state', 'eq', 'on') | list | count)
+ (expand(states.group.external_doors) | selectattr( 'state', 'eq', 'on') | list | count)
+ states('sensor.devices_with_low_battery') | int %}
{% if notifications > 0 %}
content: "";
{% endif %}
/* Position & style notification */
position: absolute;
background: rgb(var(--rgb-red));
border-radius: 50%;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
}
alignment: justify
- type: conditional
conditions:
- entity: input_boolean.notifications
state: "on"
card:
type: custom:mushroom-chips-card
chips:
- type: template
entity: alarm_control_panel.home_alarm
icon: mdi:shield-home
icon_color: |-
{% set alarm_status = states(entity) %}
{% if alarm_status == 'armed_home' %}
green
{% elif alarm_status == 'disarmed' %}
blue
{% elif alarm_status == 'arming' %}
yellow
{% elif alarm_status == 'triggered' %}
red
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Alarm
content:
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.home_alarm
states:
- armed_home
- armed_away
hold_action:
action: none
- type: template
entity: lock.front_door
icon: "{{ 'mdi:lock' if is_state(entity, 'locked') else 'mdi:lock-open' }}"
icon_color: "{{ 'green' if is_state(entity, 'locked') else 'red' }}"
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Front Door
content:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:frigate-card
cameras:
- camera_entity: camera.doorbell
live_provider: webrtc-card
webrtc_card:
url: rtsp://10.10.90.10/Streaming/Channels/501/
dimensions:
aspect_ratio_mode: dynamic
- type: custom:mushroom-lock-card
entity: lock.front_door
card_mod:
style: |
.content {
}
- type: conditional
conditions:
- entity: group.all_lights
state: "on"
chip:
type: template
icon: mdi:lightbulb
entity: group.all_lights
content: >
{{ expand(states.group.all_lights) | 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.all_lights
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.all_lights
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.all_windows
state: "on"
chip:
type: template
icon_color: blue
icon: mdi:window-open
entity: group.all_windows
content: >
{{ expand(states.group.all_windows) | 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.all_windows
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.external_doors
state: "on"
chip:
type: template
entity: group.external_doors
content: >
{{ expand(states.group.external_doors) | selectattr('state', 'eq',
'on') | list | count }}
icon_color: brown
icon: mdi:door-open
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.external_doors
state: "on"
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
icon_color: brown
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: sensor.devices_with_low_battery
state_not: "0"
chip:
type: template
entity: sensor.devices_with_low_battery
content: |
{{ states(config.entity) | int }}
icon_color: red
icon: mdi:battery-alert
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Low Batteries
content:
type: custom:auto-entities
filter:
include:
- attributes:
device_class: battery
state: < 30
options:
type: custom:mushroom-template-card
primary: "{{ states(entity) }}%"
secondary: "{{ state_attr(entity, 'friendly_name') | title }}"
icon: >
{% set battery_level = (states(entity) | int / 10)
| round(0) | int * 10 %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-outline
{% endif %}
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
layout: horizontal
tap_action:
action: none
badge_icon: >-
{{ 'mdi:exclamation-thick' if states(entity) | int
< 10 }}
badge_color: red
exclude: null
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.water_leak
state: "on"
chip:
type: template
icon_color: light-blue
icon: mdi:water-alert
tap_action:
action: more-info
entity: group.water_leak
card_mod:
style: |
.content {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: group.smoke_alarm
state: "on"
chip:
type: template
icon_color: red
icon: mdi:fire-alert
tap_action:
action: more-info
entity: group.smoke_alarm
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: 9;
top: 0px;
}
/* Pseudo element to hide card styling when at top */
ha-card:after {
content: "";
/* Make fixed so element scrolls up */
position: fixed;
top: 0px;
/* Adjust height when notifications visible */
height: {{ '104px' if is_state('input_boolean.notifications', 'on') else '60px' }};
/* Set width to match */
width: calc(100% - var(--mush-chip-spacing, 8px));
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: calc(100% - 2 * var(--ha-card-border-width, 1px));
/* 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);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
Welcome
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto auto
margin: 8px 4px 4px 4px;
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.derrick
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Derrick
content:
type: vertical-stack
cards:
- type: custom:mushroom-person-card
entity: person.derrick
icon_type: entity-picture
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: entity
entity: person.papa
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Papa
content:
type: vertical-stack
cards:
- type: custom:mushroom-person-card
entity: person.papa
icon_type: entity-picture
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
alignment: end
card_mod:
style: |
ha-card {
/* Overlap avatar Chips */
--chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));
/* Set size of border around Chips */
--chip-avatar-padding: 2px;
/* Reduce width to fit Chips & allow max space for weather */
width: fit-content;
transition: all 0s;
}
- type: custom:mushroom-template-card
primary: "{{ state_attr(entity, 'temperature') | int}} Ā°F"
secondary: >-
{% set condition = state_attr(entity, 'weather.home')[0]['conditions']
%} {% set intensity = states('weather.home') %}
{% if intensity != 'None' %}
{% set condition = intensity + ' Rain' %}
{% endif %}
{{ condition }}
icon: " "
entity: weather.home
picture: >-
{% set condition = states(entity) %}
{% set intensity = states('weather.home') | replace(" ", "-") | lower
%}
{% if condition == 'partlycloudy' and is_state('sun.sun',
'below_horizon') %}
{% set condition = condition + '-night' %}
{% endif %}
{% if intensity != 'none' and condition != 'lightning' %}
{% set condition = intensity %}
{% endif %}
/local/weather_icons/{{ condition }}.svg
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Weather
content:
type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:weather-card
entity: weather.home
number_of_forecasts: "5"
card_mod:
style:
mushroom-state-info$: |
/* Align text on the right */
.container {
transform: scaleX(-1);
text-align: right;
width: fit-content;
}
.: |
ha-card {
/* Move icon to the right */
transform: scaleX(-1);
/* Enlarge icon & remove circular shape */
--icon-size: 42px;
--icon-border-radius: 0;
/* Style secondary text */
--card-secondary-font-weight: normal;
/* Remove styling from card */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
padding: 0px !important;
transition: all 0s;
}
- type: horizontal-stack
cards:
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Good Evening,
{% elif (time >= 12) %}
Good Afternoon,
{% elif (time >= 5) %}
Good Morning,
{% else %}
Welcome,
{% endif %}
subtitle: |
{{ user }}!
alignment: start
card_mod:
style:
mushroom-title-card$: |
/* Style greeting */
.title {
--title-font-size: var(--mush-title-font-size, 16px);
--title-font-weight: var(--mush-subtitle-font-weight, light);
color: var(--secondary-text-color) !important;
}
/* Style name */
.subtitle {
--subtitle-font-size: var(--mush-title-font-size, 24px);
--subtitle-font-weight: var(--mush-title-font-weight, bold);
color: var(--primary-text-color) !important;
padding-left: 12px;
}
/* Set spacing around greeting */
.header {
--title-padding: 0px 12px 24px;
--title-spacing: 8px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
secondary: House
icon: mdi:home
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 58px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
/* Styling of button */
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;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
}
- type: custom:mushroom-template-card
primary: ""
secondary: Lights
icon: mdi:lightbulb
icon_color: amber
layout: vertical
tap_action:
action: navigate
navigation_path: lights
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 58px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
/* Styling of button */
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;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
}
- type: custom:mushroom-template-card
secondary: Secure
icon: mdi:shield
icon_color: green
layout: vertical
tap_action:
action: navigate
navigation_path: security
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 58px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
/* Styling of button */
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;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
}
- type: custom:mushroom-template-card
secondary: Media
icon: mdi:speaker
layout: vertical
icon_color: red
tap_action:
action: navigate
navigation_path: media
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 58px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
/* Styling of button */
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;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
}
- type: custom:mushroom-template-card
secondary: Net
icon: mdi:lan
layout: vertical
icon_color: cyan
tap_action:
action: navigate
navigation_path: net
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 58px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
/* Styling of button */
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;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
}
card_mod:
style: |
ha-card {
/* Set padding of card */
padding: 8px 8px 12px;
/* Move card up to match header card */
margin-top: -20px;
/* Styling of card background */
background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color)) !important;
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
transition: all 0s;
}
Has anyone figured the solution? I am also stuck with the sticky bar not working properly.
Also, for the weather I was able to get the icons I want and temp but it doesnāt show the conditions text line.
Any help is appreciated!
Iām able to put the sticky to work!
Confirm that all the card are in the same āvertical cardā and you have mansonry active, not sections
when you say āsame vertical cardā what exactly does that mean? Sorry Just started HA journey a week or so ago. This is where iām at after changing to masonry.
He means this portion of your code
type: custom:stack-in-card
cards:
- type:
custom:stack-in-card
is considered a vertical card
You can only have one āeditā optionā¦ in your image you have twoā¦ one before the person icon and other in the bottom, you only can have one in the bottom
Thank you, I figured that portion out yesterday after posting but Iām still having trouble getting the sticky to stay.
Share the code you haveā¦ again only one card
Position of chip card is not working anymore. Please help to fix.
I read through part1+2 of the mushroom cards thread, but did not find a solution yet.
The icon of the mirror was used to be positioned on the left side (where the arrow points to), as it is a button for the light of the mirror. Additonal chips based on state of other devices will apprear on the right side. Unfortunately the positioning is not working anymore. I guess is has something to do with this snipped:
card_mod:
style: |
ha-card {
position: absolute;
left: 0px;
}
And here is all the code of my card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Ellen
secondary: >-
{{ states('sensor.heizkoerperthermostat_ellen_actual_temperature') |
round(1, default=20) }}Ā°C
icon: mdi:handball
entity: light.lichtschalter_ellen
tap_action:
action: navigate
navigation_path: /ellens-dashboard/0
double_tap_action:
action: toggle
icon_color: "{{ 'orange' if is_state('light.glichter_ellen', 'on') else 'disabled' }}"
fill_container: true
layout: horizontal
multiline_secondary: false
badge_icon: >
{% if is_state_attr('climate.heizkoerperthermostat_ellen', 'hvac_action',
'heating') %}
mdi:radiator
{% elif is_state_attr('climate.heizkoerperthermostat_ellen',
'hvac_action', 'cooling') %}
mdi:snowflake
{% else %} mdi:radiator-disabled {% endif %}
badge_color: >
{% if is_state_attr('climate.heizkoerperthermostat_ellen', 'hvac_action',
'heating') %}
red
{% elif is_state_attr('climate.heizkoerperthermostat_ellen',
'hvac_action', 'cooling') %}
#03A9F4
{% else %} {% endif %}
card_mod:
style: |
ha-card([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
--icon-size: 76px;
margin-top: -20px !important;
margin-left: -18px !important;
margin-bottom: -11px !important;
--ha-card-border-width: 0;
}
mushroom-badge-icon {
left: 138px;
top: 40px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.licht_schminktisch_smart_plug_switch
icon_color: "{{ 'orange' if is_state(entity, 'on') else 'disabled' }}"
icon: mdi:mirror-rectangle
content_info: none
card_mod:
style: |
ha-card {
position: absolute;
left: 0px;
}
- type: conditional
conditions:
- entity: binary_sensor.fensterkontakt_ellen_state
state: "on"
chip:
type: template
icon_color: disabled
icon: mdi:window-open
- type: conditional
conditions:
- entity: switch.klima_ellen_power
state: "on"
chip:
type: template
icon_color: disabled
icon: mdi:air-conditioner
alignment: end
card_mod:
style: |
ha-card {
--chip-icon-size: 25px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-border-width: 0;
margin-top:-10px;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.glichter_ellen', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
Any help is greatly appreciated!