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.
remmob
January 1, 2025, 8:49pm
1063
Hi,
Need some help, I try to style a mushroom light card so far I have this
- type: custom:mushroom-light-card
icon: mdi:outdoor-lamp
entity: light.wandlamp_bank
name: Wandlamp bank
use_light_color: fase
show_brightness_control: true
collapsible_controls: true
card_mod:
style:
mushroom-light-brightness-control$:
mushroom-slider$: |
.slider-track-background {background-color: rgba(150, 21, 219, 0.2) !important;}
.slider-track-active {background-color: rgb(150, 21, 219) !important;}
.:
mushroom-shape-icon$: |
.shape {
--icon-color: rgb(150, 21, 219) !important;
--shape-color: rgba(150, 21, 219, 0.2) !important;
}
The slider color and background work fine, but the icon color does not change. I have tried without the slider part, but that makes no difference.
remmob:
light.wandlamp_bank
Please use this as an example
type: custom:mushroom-light-card
icon: mdi:outdoor-lamp
entity: light.wandlamp_bank
use_light_color: false
show_brightness_control: true
collapsible_controls: true
show_color_control: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: blue !important;
}
mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: red !important;
--bg-color: grey !important;
}
.: |
ha-state-icon {
color: yellow;
}
1 Like
remmob
January 5, 2025, 1:00pm
1065
Thank you, ended up with this:
- type: custom:mushroom-light-card
icon: mdi:outdoor-lamp
entity: light.wandlamp_bank
name: Wandlamp bank
use_light_color: false
show_brightness_control: true
collapsible_controls: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: rgba(150, 21, 219, 0.2) !important;
--icon-color: rgb(150, 21, 219) !important;
}
mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: rgb(150, 21, 219) !important;
--bg-color: rgba(150, 21, 219, 0.2) !important;
}
Is there a way to make this default?
Can someone please help me???
I have a simple Mushroom Entity Card that shows the temperature of the “Belly” area of my RV. If it gets below freezing I’m in trouble. So I wanted to make the normally BLUE temp icon BLINK red if it gets below… say 35 degrees. I just don’t know how to code that to make it work. Seems simple. Anyone please???
Here’s my code to display this card:
- type: custom:mushroom-entity-card
name: Belly Temp
entity: sensor.belly_temp_temperature
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-font-size: 21px;
--card-secondary-font-size: 33px;
gap: 2px; align-items: center;
height: 55px !important;}
.primary { padding-top: 0px;
line-height: 27px !important;
margin-left: -4px;
margin-top: -3px !important;
}
.secondary {
line-height: 35px !important;
font-weight: bold !important; }
mushroom-shape-icon$: |
.shape {
padding-left: 20px;
padding-top: 1px;
--shape-color: "#777777" !important;
--icon-symbol-size: 0px;
--icon-size: 0px;}
style: |
ha-state-icon {
color: blue ;
--icon-symbol-size: 62px; }
This most likely needs more work… I am bit rusty and need to play catchup with all the changes…
type: custom:mushroom-template-card
icon: mdi:thermometer
entity: sensor.belly_temp_temperature
primary: Belly Temp
secondary: |
{{states('sensor.belly_temp_temperature') }} °F
icon_color: |
{% if states('sensor.belly_temp_temperature') | int (0)<= 32 %}
red
{% else %}
blue
{% endif %}
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-font-size: 21px;
--card-secondary-font-size: 33px;
gap: 2px; align-items: center;
height: 55px !important;}
.primary { padding-top: 0px;
line-height: 27px !important;
margin-left: -4px;
margin-top: -3px !important;
}
.secondary {
line-height: 35px !important;
font-weight: bold !important; }
mushroom-shape-icon$: |
.shape {
padding-left: 20px;
padding-top: 1px;
--shape-color: "#777777" !important;
--icon-symbol-size: 0px;
--icon-size: 0px;}
.: |
ha-state-icon {
--icon-symbol-size: 62px;
{% if states('sensor.belly_temp_temperature') | int (0) <= 32 %}
animation: pulse 2s ease-in-out infinite;
{% endif %}
}
1 Like
Unless something has changed, Chips do not have badges.
chreble
January 9, 2025, 4:14am
1069
I’ve been looking to see if anyone else has asked this question but I haven’t seen it yet.
I’m just trying to modify the text color and the background color but am not sure how to format it:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
name: Livestream
icon: ""
styles: |-
h4.bubble-name{
font-size: 20px
}
div.bubble-line{
background-color: var(--primary-text-color);
opacity: 0;
}
sub_button:
- icon: mdi:power
card_layout: large
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
icon: mdi:power-socket-us
fill_container: false
entity: switch.george
icon_color: amber
card_mod:
style: |
ha-card {
background: white;
;
}
ha-state-icon {
color: amber;
}
- type: custom:mushroom-entity-card
icon: mdi:power-socket-us
entity: switch.martin
icon_color: amber
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: blue;
--card-secondary-color: orange;
}
You can see for my two mushroom entity cards I have different “things” written for the style so I can address that. The text color and the background color work individually but I can’t figure out how to have both at the same time on the same card.
chreble:
switch.george
One method is to use the template card…
type: vertical-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:power-socket-us
entity: switch.george
primary: Primary
secondary: Secondary
icon_color: red
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: blue;
--card-secondary-color: orange;
}
.: |
ha-card {
background: white;
}
- type: custom:mushroom-template-card
icon: mdi:power-socket-us
entity: switch.george
primary: Primary
secondary: Secondary
icon_color: amber
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: blue;
--card-secondary-color: orange;
}
1 Like
chreble
January 9, 2025, 5:37am
1071
This worked for me thank you!
Hey! Thank you so much!!! I had to tweak it just a little, so here is the final code. It was also not following my one decimal point rule, so I had to tweak that line with the rounded true option, and now everything works perfectly!
- type: custom:mushroom-template-card
icon: mdi:thermometer
entity: sensor.belly_temp_temperature
primary: Belly Temp
secondary: |
{{states('sensor.belly_temp_temperature', rounded=True, with_unit=True) }}
icon_color: |
{% if states('sensor.belly_temp_temperature') | int (0)<= 32 %}
red
{% else %}
blue
{% endif %}
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-font-size: 21px;
--card-secondary-font-size: 33px;
gap: 2px; align-items: center;
height: 55px !important;}
.primary { padding-top: 0px;
line-height: 27px !important;
margin-left: -4px;
margin-top: -3px !important;
}
.secondary {
line-height: 35px !important;
font-weight: bold !important; }
mushroom-shape-icon$: |
.shape {
padding-left: 20px;
padding-top: 1px;
--shape-color: "#777777" !important;
--icon-symbol-size: 0px;
--icon-size: 0px;}
style: |
ha-state-icon {
--icon-symbol-size: 62px;
{% if states('sensor.belly_temp_temperature') | int (0) <= 32 %}
animation: pulse 1s ease-in-out infinite;
{% endif %}
}
1 Like
