I’m running card-mod 3.5.0
Thank a lot! Your code works for me to move the alignment of all chips starting from the left side. My intention however is to only have the “mirror” on the left and all the other conditional ones on the right.
This is how it looks now:
This is what I want:
Any advise on how to achieve that?
Hi,
I’ve this code :
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon_color: |
{% if is_state(entity, 'on') %}
orange
{% else %}
white
{% endif %}
card_mod:
style: |
mushroom-shape-icon { animation: blink 2s linear infinite; }
@keyframes blink { 50% {opacity: 0;} }
entity: light.salon
icon: mdi:lightbulb-on
primary: Salon
secondary: >
{{ states("sensor.temperature_salon_temperature") | float | round }}°C |{{
states("sensor.temperature_salon_humidity") | float | round }}% 💧|💡{{ states("light.salon")
}} {% if is_state('light.salon', 'unavailable') %}
Indisponible
{% elif is_state('light.salon', 'off') %}
{% else %}
- {{ (states['light.salon'].attributes.brightness / 2.54) | round(0) }}%
{% endif %}
layout: horizontal
tap_action:
action: toggle
badge_icon: >
{% if
is_state('binary_sensor.magic_areas_presence_tracking_salon_area_state',
'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: >
{% if
is_state('binary_sensor.magic_areas_presence_tracking_salon_area_state',
'on') %}
orange
{% else %}
grey
{% endif %}
- type: custom:mini-graph-card
entities:
- entity: sensor.temperature_salon_temperature
name: Temperature
color: lightblue
height: 50
hours_to_show: 24
points_per_hour: 1
line_width: 2
font_size: 20
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
- type: custom:mushroom-chips-card
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
chips:
- type: template
entity: climate.radiateur_salon
icon: mdi:radiator
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
red
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
mushroom-shape-icon { animation: blink 2s linear infinite; }
@keyframes blink { 50% {opacity: 0;} }
- type: template
entity: light.salon
icon: mdi:lightbulb-group
icon_color: |-
{% if is_state(entity, 'on') %}
yellow
{% elif is_state(entity, 'off') %}
grey
{% else %}
red
{% endif %}
tap_action:
action: more-info
- type: template
entity: media_player.freebox_player_pop
icon: mdi:television-box
icon_color: |-
{% if is_state(entity, 'on') %}
yellow
{% elif is_state(entity, 'off') %}
grey
{% else %}
red
{% endif %}
tap_action:
action: more-info
alignment: end
And I try to animate icon (lightbulb, radiator, lightbulb-group and tv) depending on state, but none works.
I don’t know why.
Thanks.
Answered on your other post here
Here is a basic example with a light…
type: custom:mushroom-light-card
entity: light.tv_lights
double_tap_action:
action: perform-action
perform_action: light.turn_on
target:
entity_id:
- light.tv_lights
tap_action:
action: perform-action
perform_action: light.turn_off
target:
entity_id:
- light.tv_lights
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, 'on') %}
--shape-animation: pulse 1s ease-in-out 4;
{% else %}
animation: none;
{% endif %}
}
anyone able to help me here? I would really appreciate it!
Are you still running card_mod v3.5? That version was pulled and you should install v3.4.4.
That should fix your issue
I apologize for missing your request for help…
I just went back to 3.4.4 and yes that fixes my issue. THANKS A LOT!!!
Same for me, need to rollback.
But I’ve still issue with washing machine animation.
type: custom:mushroom-template-card
icon: mdi:tumble-dryer
icon_color: teal
primary: Dryer
card_mod:
style: >
mushroom-shape-icon { animation: bounce 1.5s ease-in-out infinite, wash 1s
ease-in-out infinite;
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
Icon is blinking.
Test this code out…
type: custom:mushroom-template-card
entity: your.entity
primary: |-
{% if is_state(config.entity, 'off') %}
Idle
{% elif is_state(config.entity, 'on') %}
On
{% else %}
Full
{% endif %}
icon: mdi:washing-machine
icon_color: |-
{% if is_state(config.entity, 'on') -%}
orange
{%- else -%}
blue
{%- endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape:before {
content: '';
z-index: 1;
position: absolute;
justify-content: center;
align-items: center;
width: 22%;
height: 11.5%;
border: 1px solid black;
border-radius: 1rem 1rem 0 0;
background: {{ 'deepskyblue' if
is_state(config.entity, 'on') else
'black' }};
animation: {{ 'circle 2s linear infinite alternate'if
is_state(config.entity, 'on') else
'animation: none;' }};
transform-origin: 50% 85%;
}
@keyframes circle {
0% {transform: rotate(0deg);}
100% {transform:rotate(360deg);}
}
.shape:after {
content: '';
position: absolute;
width: 27%;
height: 27%;
border-radius: 100%;
border: 1px solid white !important;
background:black;
top: 14px;
justify-content: center;
align-items: center;
}
Thanks for the code, it’s working.
Perhaps posted before, I would love to see Mushroom Cards support, by default, the Hover and button press effects that are present with the Home Assistant button types. I use the template card almost exclusively to display the dynamic status of various entities.
I now see how to do this by Showing Code Editor with card-mod using, for example:
card_mod:
style: |
ha-card:hover {
background-color: rgba(0,0,0, 0.01);
}
My feature request would be to enable some of the most commonly used css style items. For example, hover over and button press color highlighting would be configurable from the Visual editor for the Mushroom cards.
I can’t find a reason why the font color doesn’t switch based on the entity state in the code posted below…
Thanks for the advice
type: custom:mushroom-light-card
entity: light.svetlo_garaz_vstupna_hala_chodba_hala
name: Svetlá on/off /all
icon_color: white
secondary_info: state
show_brightness_control: false
collapsible_controls: false
tap_action:
action: toggle
grid_options:
columns: 8
rows: auto
card_mod:
style: |
ha-card {
background-color:
{% if is_state('light.svetlo_garaz_vstupna_hala_chodba_hala', 'on') %}
orange; /* active */
{% else %}
dark gray; /* non active*/
{% endif %}
color:
{% if is_state('light.svetlo_garaz_vstupna_hala_chodba_hala', 'on') %}
black; /* active*/
{% else %}
white; /* non active */
{% endif %}
border: none;
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
I replied in your other thread
Hi there!
How is it possible to set a giving Data-Value as an information for output?
{% if is_state('binary_sensor.shelly_blu_door_window_d711_window', 'open') %}
open
{% else %}
closed | Battery: *[u]HERE THE STATE OF 'sensor.shelly_blu_door_window_d711_battery'*[/u]
[u]{%[/u] endif %}
Thanks a lot.
If I understand you correctly, yes!
{% if is_state(binary_sensor.shelly_blu_door_window_d711_window', 'open') %}
Open
{% else %}
Closed | Battery: {{states('sensor.shelly_blu_door_window_d711_battery') | int(0)}} %
{% endif %}
I’m just learning to understand how those special cards work, and would like to replicate this style:
I found some card modifications where someone used the mushroom-entity-card, and apex-charts-card as well as stack-in-card. But the result is not looking like I want it (for better readability on a tablet a few meters away).
You see the main difference. The number needs to be bigger and centered in the middle, whereas the icon needs to be moved down and the sensor_name above (or below).
I shamelessly copied the code from a few thousand post before. Maybe someone is kind enough to show me what to change to get what I need. Thanks!
square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.pv_power_total
color: rgb(255, 87, 34)
max: 5000
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 500
- 1000
- 4000
legend:
show: false
chart:
height: 240
- type: custom:mushroom-entity-card
entity: sensor.pv_power_total
primary_info: state
secondary_info: name
name: Total PV Power
icon_color: deep-orange
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -90px;
width: 140px;
margin-left: auto;
margin-right: auto;
}
you could also check out: selvalt7/modern-circular-gauge: Modern circular gauge card for Home Assistant
Oh excellent. Searched for days and didn’t stumble upon that. Thanks a lot!!
Mushroom Media Card - Play only one song
I have all my media players on a dashboard but these mushroom media cards only play one song. Did I miss something as I would like them to play the whole album. Can anyone tell me how to get this card to play more than one song?