Have you tried a different browser to see if it works?
Can you try the same code not applied to a conditional chip? Some browsers have issues with animations in conditional chips. For example can you try this:
Conditional Chip
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: climate.group_all
state_not: 'off'
chip:
type: template
entity: climate.group_all
icon: mdi:fan
icon_color: blue-grey
content: '{{ states("sensor.number_climate_on") }}'
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-spacing: 2px;
--ha-card-border-width: 0;
}
VS this:
Template Chip
type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.group_all
icon: mdi:fan
icon_color: blue-grey
content: '{{ states("sensor.number_climate_on") }}'
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-spacing: 2px;
--ha-card-border-width: 0;
}
Do both work or only one, or do neither work?
Graves01
December 16, 2023, 10:23pm
9225
How do i get rid of the drop down chevron and add hidden chip that only show when on? Needing some help.
Here is the code
type: custom:stack-in-card
cards:
- type: picture-entity
image: local/images/Livingroom.jpg
entity: light.living_room
show_state: false
show_name: false
camera_view: auto
aspect_ratio: '3'
tap_action:
action: navigate
navigation_path: /home-living-room
hold_action:
action: toggle
theme: Mushroom
- type: custom:gap-card
height: 2
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
primary: Family Room
secondary: null
icon: mdi:lightbulb-group
entity: light.living_room
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
tap_action:
action: none
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.mushroom_familyroom_card
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
}}
icon_color: black
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.mushroom_familyroom_card
state: 'on'
card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Ceiling Fan Lights
secondary: null
entity: light.wiz_lights
icon: mdi:ceiling-fan-light
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
tap_action:
action: toggle
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
font-size: 14px !important;
font-weight: bold !important;
color: var(--primary-text-color) !important;
}
.: |
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px;
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
primary: Floor Accents
secondary: null
entity: light.accent_lights
icon: mdi:light-flood-up
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
tap_action:
action: toggle
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
font-size: 14px !important;
font-weight: bold !important;
color: var(--primary-text-color) !important;
}
.: |
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px;
}
- type: custom:mushroom-template-card
primary: Porch Light
secondary: null
entity: light.front_outside_light
icon: mdi:lightbulb
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
tap_action:
action: toggle
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
font-size: 14px !important;
font-weight: bold !important;
color: var(--primary-text-color) !important;
}
.: |
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
Something like this? (Swap entities for your own.)
type: custom:stack-in-card
cards:
- type: picture-entity
image: local/images/Livingroom.jpg
entity: light.lounge_lights
show_state: false
show_name: false
camera_view: auto
aspect_ratio: '3'
tap_action:
action: navigate
navigation_path: /home-living-room
hold_action:
action: toggle
theme: Mushroom
- type: custom:gap-card
height: 2
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto auto
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
primary: Family Room
secondary: null
icon: mdi:lightbulb-group
entity: light.lounge_lights
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
tap_action:
action: none
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-chips-card
alignment: end
chips:
- type: conditional
conditions:
- entity: light.lounge_corner_lamp
state_not: 'off'
chip:
type: light
entity: light.lounge_corner_lamp
- type: conditional
conditions:
- entity: light.lounge_main_light
state_not: 'off'
chip:
type: light
entity: light.lounge_main_light
card_mod:
style: |
ha-card {
position: relative;
top: 20%;
}
1 Like
i fix it!! both worked, but the problem was not there. the problem was these line at the top of my code.
- type: custom:layout-card
layout_type: custom:vertical-layout
layout: null
cards:
removing these line chips worked, but I have to edit all my dashboard, because there are many elements under this layout card…
changeqsq
December 17, 2023, 10:50am
9228
I’m sorry, may I ask why my card_mod cannot be used in Mushroom?
No need to apologize. Can you post the full code formatted correctly please?
Check out this post (section 11) to see how to do that
# An example of what correctly formatted code blocks will look like.
type: custom:example
entity: switch.example
cards:
- type: custom:test
entity: light.test
icon: mdi:test-tube
icon_color: green
card_mod:
style: |
ha-card {
test: 1px red solid;
}
Means you are using the custom layout card. Cant tell you much more than that the layout card is used to achieve more complex layouts.
1 Like
Hello
Why doesn’t change the color of letters when it reaches 100%?
ha-card {
--primary-text-color:
{% set nivelbateria = states('sensor.quinquelhas_battery_level')%}
{% if nivelbateria > '0' and nivelbateria < '20' %} red
{% elif nivelbateria > '21' and nivelbateria < '80' %} orange
{% else %} green
{% endif %}
}
it works red and orange, also green but when it reaches 100, doesn’t work…
changeqsq
December 17, 2023, 1:58pm
9233
I cannot get card_mod to work in Mushroom and Button Card, but the examples using card_mod are effective. How can I resolve this issue?
type: custom:mushroom-person-card
entity: person.qsq
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: orange !important;
}
Try the same thing with background instead.
--shape-color only applies the color when the entity is considered on (so for person entity when home).
type: custom:mushroom-person-card
entity: person.qsq
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: orange !important;
}
Does this work?
You are comparing a float to a string.float. But your values you are comparing against are string because you have wrapped them in '100' if you try without the ' ' it will probably work.
Strings and floats are comparable, but not the way you would expect, so your result is going to be strange.
changeqsq
December 17, 2023, 2:05pm
9236
This is effective, thank you very much. Because I’m just starting to learn and don’t understand many things, may I ask where you recommend starting to learn Mushroom?
If you are talking about card mod and mushroom together you can look through the guide in my profile for examples. If you are talking about just mushroom the github would probably be best.
If i try without ’ ’ doesn’t work
Clearly your sensor isnt a float automatically.
This should work:
{% set nivelbateria = states('sensor.office_blinds_battery') | float%}
{% if nivelbateria >= 0 and nivelbateria < 20 %}
red;
{% elif nivelbateria >= 21 and nivelbateria < 80 %}
orange;
{% else %}
green;
{% endif %}
Ok i will change that…
I take advantage of you being here
I put round in the end?
Mattia2399
December 17, 2023, 6:51pm
9243
Do you know how to create a media player card that uses Spotify as a music service and with a drop-down menu where you can select the source to play the music?
For the card I would have no problem creating it, but what about the services/scripts to manage the sources?
Sorry i am going to have to say outside of my experience - but i would also say that the question is probably not for the Mushroom thread
, how i do to make round the nambers?
