leventuri
December 2, 2024, 4:34pm
1053
Hi Dimitri,
About the number card. Is there a list with the available display_modes ?
At github docs we don’t have the “display_mode” as an option for number card.lovelace-mushroom/docs/cards/number.md at 3d94e92bbad748e0ec332407bb6668d74ce99502 · piitaya/lovelace-mushroom · GitHub ”
And my second question: is there an hybrid display mode for the number card: a slider with buttons and the value?
Thanks.
Faecon
December 4, 2024, 6:08am
1054
3 questions I did not get managed…
I have a mushroom template card with this code
ha-card {
{% if is_state('light.gevel','on') %}
background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
{% endif %}
}
it looks like the card is staying white, and is not getting the card color. what is wrong ?
edit: background: {% if states('light.gevel') == 'on' %} rgb({{ states("input_text.kleur_iconen_bleker")}}) !important; {% endif %}
I have a background icon I want removed from a mushroom entity card…
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
background-color: rgba({{ states("input_text.kleur_iconen")}},0.2) !important;
margin: 15px ;
width: 200px ;
border-radius: 8px !important;
margin-bottom: 30px;
}
mushroom-shape-icon$: |
.shape {
background: transparent !important;
}
this is not working for me…
edit:
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-weight: bold;
}
.: |
ha-state-icon {
--icon-symbol-size: 0px;
background-color: transparent !important;
}
.mushroom-state-icon {
background-color: transparent !important; # Ensures background of the icon itself is transparent
}
mushroom-shape-icon$: |
.shape {
background: transparent !important;
background-color: transparent !important; # Ensure no background is set on the icon's shape
}
I have a mushroom template card where I want it aligned on the right. How do I do that ?
ha-card {
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
width: 160px;
height:60px !important;
border-radius: 8px !important;
ha-card-border-radius: '8px'
right: 30px;
}
edit
- type: custom:mod-card
style: |
ha-card {
display: flex;
justify-content: flex-end; # This pushes the card to the right
}
Hello, I have finally started migrating my simple dashboard to something more functional and pleasing to the eye but I’m scratching my head with the chip cards leaving spaces between cards. I’ve googled and googled and tried suggestions but nothing has quite worked. Any guidance is appreciated.
type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: alarm_control_panel.alarm_state
content_info: []
icon: |-
{% if is_state('alarm_control_panel.alarm_state', 'armed_away') %}
mdi:shield-lock-outline
{% else %}
mdi:shield-off
{% endif %}
icon_color: |-
{% if is_state('alarm_control_panel.alarm_state', 'armed_away') %}
blue
{% else %}
red
{% endif %}
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Alarm System
content:
type: horizontal-stack
cards:
- features:
- type: custom:service-call
entries:
- type: button
entity_id: alarm_control_panel.alarm_state
tap_action:
action: call-service
service: script.ajax
label: >-
{% if states ('alarm_control_panel.alarm_state')
== 'armed_away' %}
DISARM
{% else %}
ARM
{% endif %}
type: tile
entity: alarm_control_panel.alarm_state
tap_action:
action: none
card_mod:
style: |
ha-card {
animation:
{% if states ('alarm_control_panel.alarm_state')
== 'disarmed' %}
pulse 2s ease-in-out infinite
{% else %}
{% endif %}
}
- type: horizontal-stack
cards:
- type: conditional
conditions: []
card:
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.indoor_lights_on_2
icon_color: amber
icon: mdi:lightbulb
content: "{{ states(entity) }}"
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Indoor Lights On
content:
type: custom:auto-entities
card:
type: entities
filter:
include:
- entity_id: light.*
state: "on"
exclude:
- entity_id: light.indoor_lights
- entity_id: light.outdoor_lights
- entity_id: light.b740e035_ecc9536a_screen
- entity_id: light.front_door_hue_light
- entity_id: light.garage_door_hue_east
- entity_id: light.garage_door_hue_west
- entity_id: light.ratgdo_light
- entity_id: light.mbr_ceiling_fan_light
- entity_id: light.outdoor_garage_lights
- entity_id: light.outdoor_string_lights
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.sense_daily_energy
content: "{{ states(entity) | round(0) }} kWh"
icon: mdi:home-lightning-bolt-outline
icon_color: primary
tap_action:
action: more-info
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.phyn_pp1_daily_water_usage
content: "{{ states(entity) | round(0) }} gal"
icon_color: primary
icon: mdi:water-outline
tap_action:
action: more-info
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.gas_usage
icon_color: primary
icon: mdi:meter-gas-outline
alignment: start
Juanpermon
December 22, 2024, 12:36pm
1056
Hi there.
I have tried this but I onl¡y want the icon to be animated when the entity state is on. It doesn’t work. The icon is always rotating. How can I achieve what I intend to?
Thank you.
type: custom:mushroom-template-card
primary: ""
secondary: ""
icon: mdi:fan
icon_color: |
{% if states('fan.extractor') == 'on' %}
green
{% elif states('fan.extractor') == 'off' %}
lightgrey
{% else %}
red
{% endif %}
badge_icon: |
{% if states('fan.extractor') == 'on' %}
null
{% elif states('fan.extractor') == 'off' %}
null
{% else %}
mdi:exclamation
{% endif %}
badge_color: |
{% if states('fan.extractor') == 'on' %}
lightgrey
{% elif states('fan.extractor') == 'off' %}
lightgrey
{% else %}
red
{% endif %}
tap_action:
action: perform-action
perform_action: fan.toggle
target:
entity_id: fan.extractor
hold_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if states('fan.extractor'), 'on' %}
--shape-animation: rotating 2s linear infinite;
}
@keyframes rotating {
from {transform: rotate(360deg);}
to {transform: rotate(0deg);}
}
{%elif states('fan.extractor'), 'off' %}
--shape-animation: rotating 0s linear infinite;
}
@keyframes rotating {
from {transform: rotate(360deg);}
to {transform: rotate(0deg);}
}
{% endif %}
}
Cadster
December 22, 2024, 1:04pm
1057
Can you try this:
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-state-icon {
animation: rotation linear infinite;
{% if states('fan.extractor') == 'on' %}
animation-duration: 3s;
{%- else -%}
{%- endif %}
}
1 Like
Juanpermon
December 22, 2024, 3:58pm
1058
Thank you. It rotates the full card, not only the icon.
Cadster
December 22, 2024, 4:22pm
1059
I’ve changed the code, this should work.
Juanpermon
December 23, 2024, 10:00am
1060
It worked, thank you. Also I just discovered this also works:
card_mod:
style:
mushroom-shape-icon$: |
{% if states('fan.extractor') == 'on' %}
.shape {
--shape-animation: rotating 2s linear infinite;
}
{%else %}
.shape {
--shape-animation: rotating 0s linear infinite;
}
{% endif %}
@keyframes rotating {
from {transform: rotate(360deg);}
to {transform: rotate(0deg);}
}
}
1 Like
Juanpermon
December 23, 2024, 10:49am
1061
Hi there. My badge is not even showing.
What am I doing wrong in here? The code above card_mod is working fine (it is the original code). I 'd want to add the badge.
Thank you very much.
type: custom:mushroom-chips-card
chips:
- type: template
primary: ""
secondary: ""
icon: mdi:lightbulb-group
icon_color: |2
{% if state_attr('sensor.luces_todas','recuento_luces_encendidas') > 0 %} amber {% else %} lightgrey {%endif%}
tap_action:
action: perform-action
perform_action: light.turn_off
target:
entity_id: light.grupo_luces_todas
data: {}
card_mod:
style: |
mushroom-badge-icon {
--card-mod-icon: mdi:mushroom;
--icon-color: pink;
--main-color: blue !important;
}
flyize
December 24, 2024, 5:34pm
1062
How do I get the icon color and circular background of a template card to match the default coloring of the entity card. I have an icon that I want to look like everything else, except when a sensor is below 80 where it should turn red.
