Thanks Dimitriā¦ its worked
How we know to use this configurations?
Sorry dont understand your question?
How you know do you have put muhsroom-sliders$: ?
After you have put --bg-color: and main-color:
How i can know that? Developer Tools?
Thanks
Thanks, this works.
Hello, can anyone please help me to find and address the problem in my mushroom chip card?
the problem is: everytime I go back to my main pages, my mush chip card (in the room card) is something like ābreathing/dancingā (GIF attached).
This is my code looks like:
type: custom:mushroom-chips-card
alignment: start
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 3px;
}
chips:
- type: template
entity: light.lampu_toilet
tap_action:
action: toggle
icon: |-
{% if is_state("light.lampu_toilet", 'on') %}
mdi:lightbulb-on
{% else %}
mdi:lightbulb
{% endif %}
card_mod:
style: |
{% if is_state('light.lampu_toilet', 'on') %}
.content {
animation: boing 2s ease infinite;
transform-origin: 50% 90%;
}
{% endif %}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
ha-card {
justify-content: center;
width: var(--chip-height) !important;
--chip-icon-size: 20px;
--chip-height: 10px;
padding: 8px!important;
border-radius: 100%!important;
--chip-background: {{ 'rgba(243, 182, 100, 0.5)' if is_state('light.lampu_toilet', 'on') else 'rgba(169, 169, 169, 0.5)' }}
}
- type: conditional
conditions:
- entity: binary_sensor.motion_sensor_toilet_occupancy
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
card_mod:
style: |
ha-icon {
--icon-animation: clip 2s linear infinite;
}
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
.shape {
--shape-animation: motion 2s linear infinite;
}
@keyframes motion {
0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); }
50% { --shape-color: rgba(var(--rgb-blue), 0.2); }
}
ha-card {
justify-content: center;
width: var(--chip-height) !important;
--chip-icon-size: 17px;
--chip-height: 10px;
padding: 8px!important;
border-radius: 100%!important;
--chip-background: rgba(199, 0, 57, 0.5)
}
- type: conditional
conditions:
- entity: binary_sensor.pintu_toilet_contact
state: 'on'
chip:
type: template
icon: mdi:door
card_mod:
style: |
ha-icon {
--icon-animation: open 6s ease-in-out infinite;
transform-origin: 30%;
}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
.shape {
perspective: 45px;
}
4 Likes
Common when using card mod.
You will likely need to learn to live with it.
The reason for it is that all assets are loaded. So custom cards and such (this includes card mod itself) but only then after this card mod code is applied. So this will always happen after.
How slow or quick this happens depends on a few things (in order of highest impact that i have observed).
- The speed of your connection to your local HA instance. You will very likely notice this taking longer if you are on a slow cellular connection for example.
- The processing speed your device (the viewing device, not your homeassistant device). Will take longer to load on lets say a 10 year old smartphone vs your desktop computer. This is because most CSS (what card mod modifies) is processed on the viewing device, not the server it is hosted on.
- The amount of card mod being used. Will start to get slower the more card mod is applied to cards.
1 Like
thank you so much, it really gives me another perspective about that. cheers!
1 Like
Now that the TTS field is showing up in the cards again, itās not looking as nice as it once did. Hereās a before and after:
Before
After
ā¦does anyone have an edit to make this look better? How are you handling this?
1 Like
Hello Team, I am new to HA and I am struggling to implement the following:
-
The Washing Machine will show the current state for example if it is Off or running.
-
I have got the washing machine to spin when the washing machine is running.
-
How can I can get the current state to show underneath the washing machine icon?
Here is my working code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_select.washing_machine_status_2
icon: mdi:washing-machine
entity_status: ''
friendly_name: input_select.washing_machine_status_2
value_template: |-
{% if is_state('input_select.washing_machine_status_2', 'running') -%}
running
{% elif is_state('input_select.washing_machine_status_2', 'idle') %}
idle
{%- else -%}
off
{%- endif %}
icon_color: |-
{% if is_state('input_select.washing_machine_status_2','Running') -%}
amber
{%- else -%}
red
{%- endif %}
layout: vertical
primary: Washing Machine
tap_action:
action: Dropdown
card_mod:
style: |
ha-state-icon {
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
ha-card {
border: none;
}
- type: custom:mushroom-template-card
entity: input_select.washing_machine_status_2
icon: mdi:washing-machine
icon_color: |-
{% if is_state('input_select.washing_machine_status_2','Running') -%}
orange
{%- else -%}
grey
{%- endif %}
layout: vertical
tap_action:
action: Dropdown
card_mod:
style: |
ha-state-icon {
{{ 'animation: spin 1s linear infinite;' if is_state('input_select.washing_machine_status_2','Running') }}
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
ha-card {
top: -99px;
border: none;
}
card_mod:
style: |
ha-card {
height: 100px;
}
Any help will be very much appreciated. Also, how can I make the Icons a bit bigger?
@LiQuid_cOOled please i still need help on how to make the chip have no background --chip-background: none; and at the same time for the fan animation to work.
Thank you very much for your time
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: more-info
entity: fan.chlazeni_goodwe_ventilator
icon: mdi:fan
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: rotate 2s linear infinite;' if is_state('fan.chlazeni_goodwe_ventilator', 'on') }}
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
2 ways:
Option 1. Applies to all chips in the chip card.
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: more-info
entity: fan.chlazeni_goodwe_ventilator
icon: mdi:fan
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: rotate 2s linear infinite;' if is_state('fan.chlazeni_goodwe_ventilator', 'on') }}
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
.: |
ha-card {
--chip-background: none;
}
Option 2. You can no longer use the visual editor, but background is only removed from specific chip targeted.
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: more-info
entity: fan.chlazeni_goodwe_ventilator
icon: mdi:fan
card_mod:
style: |
ha-card {
--chip-background: none;
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: rotate 2s linear infinite;' if is_state('fan.chlazeni_goodwe_ventilator', 'on') }}
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
1 Like
Would love to help you, but please post your code in code blocks. Indentation is important and with the way you have posted this is lost.
Check out this post, section 11.
1 Like
-
Seems like 2 different devices took those screenshots, whilst i am not under the illusion that this would make up the entire difference it will make a difference to how each looks of course.
-
Cant help you achieve how you want it to look if you dont post the code for what you have
Thank you. I solved it like this.
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
entity: light.wled_loznice
icon: mdi:fan
icon_color: yellow
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: rotate 2s linear infinite;' if is_state('light.wled_loznice', 'on') }}
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
style: |
ha-card {
--chip-background: none;
}
is there a way you can share your server page with the cards?
For some odd reason my sonos doesnt show volume buttons with the mushroom media cardā¦ My nvidia shield does show the buttonsā¦ Does anyone know how to solve this?
Hello,
I am new to this and I apologize for my mistake, could you please check if the code has been formatted properly?
Kwame
Ill answer each of your points separately if thats ok.
- You can do this like this:
secondary: |-
{{states(config.entity) | capitalize}}
Using config.entity is just used instead of writing the entity id again.
I also had to adjust the height of the second card a bit + the total height of the stack in card.
- You seem to already have this working? You have it so the animation will only play when input_select is
Running
{{ 'animation: spin 1s linear infinite;' if is_state('input_select.washing_machine_status_2','Running') }}
You could also do it like this (IMO a bit easier to read)
{% if is_state('input_select.washing_machine_status_2','Running') %}
animation: spin 1s linear infinite;
{% endif %}
- Same number 1
Here is the full config.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_select.washing_machine_status_2
icon: mdi:washing-machine
entity_status: ''
friendly_name: input_select.washing_machine_status_2
value_template: |-
{% if is_state('input_select.washing_machine_status_2', 'running') -%}
running
{% elif is_state('input_select.washing_machine_status_2', 'idle') %}
idle
{%- else -%}
off
{%- endif %}
icon_color: |-
{% if is_state('input_select.washing_machine_status_2','Running') -%}
amber
{%- else -%}
red
{%- endif %}
layout: vertical
primary: Washing Machine
secondary: |-
{{states(config.entity) | capitalize}}
tap_action:
action: Dropdown
card_mod:
style: |
ha-state-icon {
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
ha-card {
border: none;
}
- type: custom:mushroom-template-card
entity: input_select.washing_machine_status_2
icon: mdi:washing-machine
icon_color: |-
{% if is_state('input_select.washing_machine_status_2','Running') -%}
orange
{%- else -%}
grey
{%- endif %}
layout: vertical
tap_action:
action: Dropdown
card_mod:
style: |
ha-state-icon {
{% if is_state('input_select.washing_machine_status_2','Running') %}
animation: spin 1s linear infinite;
{% endif %}
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
ha-card {
top: -117px;
border: none;
}
card_mod:
style: |
ha-card {
height: 120px;
}
Hello Dimitri,
Thanks so much for your quick responds, used your code and is working for now.
Again, I greatly appreciate all your assistance Sir.
Does somebody know why some of my cards are looking like this?
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-title-card
title: Climate
subtitle: ''
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 14px !important;
}
primary: Thermostat
secondary: |
Currently: {{ state_attr('climate.toon_thermostat', 'hvac_action') }}
icon: |-
{% set mode = states('climate.toon_thermostat') %}
{% if mode == 'off' %}
mdi:radiator-off
{% elif mode == 'heating' %}
mdi:radiator
{% else %}
mdi:radiator-disabled
{% endif %}
icon_color: |-
{% set status = state_attr('climate.toon_thermostat','hvac_action') %}
{% if status == 'heating' %}
red
{% else %}
grey
{% endif %}
tap_action: none
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #6f6f6f;
}
entity: climate.toon_thermostat
header:
name: false
icon: false
decimals: '1'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '0.5'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
--st-mode-background: #2d2d2d;
margin-left: 12px;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.toon_thermostat
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off':
name: Power
heat:
name: Heat
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em
}
alignment: justify
chips:
- type: template
content: '{{state_attr(entity, "current_temperature")}} Ā°C'
entity: climate.toon_thermostat
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% else %}
grey
{% endif %}
style: |
ha-card {
margin-left: 6px;
}
- type: template
double_tap_action:
action: none
content: >-
{{ states(entity) }}{{ state_attr(entity, "unit_of_measurement") }}
Humidity
entity: sensor.slaapkamer_luchtvochtigheid
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: template
double_tap_action:
action: none
content: '{{ states(entity) }} {{ state_attr(entity, "unit_of_measurement") }}'
entity: sensor.temperatuur_buiten
icon: mdi:thermometer
icon_color: grey
tap_action:
action: none
hold_action:
action: none
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.thermostat_dropdown
icon_color: disabled
style: |
ha-card {
--chip-icon-size: 1em
}
- type: conditional
conditions:
- entity: input_boolean.thermostat_dropdown
state: 'on'
card:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
entity: sensor.temperatuur_woonkamer
primary: >-
{{ states(entity) }} {{ state_attr(entity,
"unit_of_measurement") }}
secondary: Binnen
icon_color: |-
{% set temp = states(entity) %}
{% if temp >= '21' %}
red
{% elif temp >= '17' and temp < '21' %}
orange
{% elif temp == 'unknown' %}
grey
{% else %}
blue
{% endif %}
icon: mdi:home-thermometer-outline
- type: custom:mushroom-template-card
entity: sensor.temperatuur_buiten
primary: >-
{{ states(entity) }} {{ state_attr(entity,
"unit_of_measurement") }}
secondary: Buiten
icon_color: |-
{% set temp = states(entity) %}
{% if temp >= '22' %}
red
{% elif temp >= '15' and temp < '22' %}
orange
{% elif temp == 'unknown' %}
grey
{% else %}
blue
{% endif %}
icon: mdi:thermometer
- type: custom:mini-graph-card
entities:
- entity: sensor.temperatuur_woonkamer
name: Inside Temperature
color: '#4caf50'
- entity: sensor.temperatuur_buiten
name: Outside Temperature
color: '#2196f3'
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade