Is it possible to display three entity “ON” states at the same time with three different colored rotating animations?
I am trying to apply the flip/value of two buttons but with no success, could you help me out please?
This is my code:
type: custom:mushroom-cover-card
name: Persiana
icon: mdi:curtains
fill_container: false
secondary_info: none
icon_type: icon
primary_info: name
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
layout: horizontal
entity: cover.persiana_escritorio_cortina
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-cover-buttons-control$:
mushroom-button:nth-child(1)$: |
.button {
rotate: 90deg;
}
mushroom-button:nth-child(3)$: |
.button {
rotate: 90deg;
}
First button should be enabled and be able to close the blind cover, and not the third one:
You can flip them by adjusting the margins
card_mod:
style:
mushroom-cover-buttons-control$:
mushroom-button:nth-child(1)$: |
.button {
rotate: 90deg;
margin-left: 104px !important;
}
mushroom-button:nth-child(3)$: |
.button {
rotate: 90deg;
margin-left: -104px !important;
}
Thank you for replying back! Sorry if I didn’t made myself clear enough, but the buttons locations is fine. Is only their value, the first one is disable but should be enabled, same as the third button. Because this way is suggesting that I need to open my covers, but in fact I need to close (which is the first button). Is that possible?
That would suggest your cover sensor is reading the state in reverse. The first one will be disabled when the curtains are open.
When you add the state to the secondary info, what info do you get?
The button state is controlled by the cover state so I am trying to work through the basics.
type: custom:mushroom-cover-card
name: Persiana
icon: mdi:curtains
fill_container: false
secondary_info: state
icon_type: icon
primary_info: name
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
layout: horizontal
entity: cover.persiana_escritorio_cortina
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-cover-buttons-control$:
mushroom-button:nth-child(1)$: |
.button {
rotate: 90deg;
}
mushroom-button:nth-child(3)$: |
.button {
rotate: 90deg;
}
Hello!
I will try again to show the phenomenon on another card.
Apparently 2 identical cards, 2 darts with the same card_mod code.
After the save button, the card_mod modification is displayed correctly.
Open after editing:
The saved setting is gone.
I experience a similar “error” on many cards, that I don’t see the card_mod lines in the code editor, but the change works.
I tried another computer, firefox, edge, chrome browsers.
What could be the cause of the phenomenon? Annoying!
type: horizontal-stack
cards:
- type: custom:mushroom-light-card
card_mod:
style: |
ha-card {
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75)
}
entity: light.gu10_group
name: Terasz világítás
tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:lightbulb-group-outline
collapsible_controls: true
- type: custom:mushroom-light-card
card_mod:
style: |
ha-card {
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75)
}
entity: light.shellyplus1pm_441793a74d20_switch_0
name: Fenyő
tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:pine-tree
collapsible_controls: true
I did some research and there is an old open issue with card_mod that looks the same as yours. looking at the comments there maybe a solution but I’ll leave that upto you.
the open issue can be found here
1 Like
Hello all
Looking for some assistance. I am using conditional cards to show lights that are on. I am trying to keep them small so i can stack them horizontally and maximize space.
How do i make the entire container smaller?
I have tried margin, but that seems to do nothing
Please help HA community!
Please post your code so we have a starting point.
type: custom:mushroom-light-card
entity: light.living_room_main_lights
name: Living room
layout: vertical
primary_info: name
secondary_info: state
show_brightness_control: false
tap_action:
action: toggle
visibility:
- condition: state
entity: light.living_room_main_lights
state: 'on'
card_mod:
style: |
ha-card {
background-color: white;
border-radius: 16px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 110px; /* Adjust the width as needed */
height: 105px !important; /* Ensure the height remains fixed */
display: inline-block; /* Use inline-block to allow alignment */
vertical-align: top; /* Align cards at the top */
padding: 0; /* Reset padding */
box-sizing: border-box; /* Include padding in the height */
margin: 2px !important; /* Minimal space between cards */
}
:host {
--primary-text-color: black !important;
}
.name, .state {
color: var(--primary-text-color) !important;
margin: 0; /* Remove any default margins */
}
I used chatgpt so it may have some useless portions.
Any help is appreciated!
Can I change the color of the icon when an update is active ?
Are you using HA Supervised?
Throw them in a horizontal stack if you are using Sections
type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.living_room_main_lights
name: Living room
layout: vertical
primary_info: name
secondary_info: state
show_brightness_control: false
tap_action:
action: toggle
visibility:
- condition: state
entity: light.living_room_main_lights
state: 'on'
card_mod:
style: |
ha-card {
background-color: white;
border-radius: 16px;
padding: 0; /* Reset padding */
--card-primary-color: black !important;
--card-secondary-color: black !important;
}
- type: custom:mushroom-light-card
entity: light.living_room_main_lights
name: Living room
layout: vertical
primary_info: name
secondary_info: state
show_brightness_control: false
tap_action:
action: toggle
visibility:
- condition: state
entity: light.living_room_main_lights
state: 'on'
card_mod:
style: |
ha-card {
background-color: white;
border-radius: 16px;
padding: 0; /* Reset padding */
--card-primary-color: black !important;
--card-secondary-color: black !important;
}
- type: custom:mushroom-light-card
entity: light.living_room_main_lights
name: Living room
layout: vertical
primary_info: name
secondary_info: state
show_brightness_control: false
tap_action:
action: toggle
visibility:
- condition: state
entity: light.living_room_main_lights
state: 'on'
card_mod:
style: |
ha-card {
background-color: white;
border-radius: 16px;
padding: 0; /* Reset padding */
--card-primary-color: black !important;
--card-secondary-color: black !important;
}
Just a heads up, I edited your card_mod code
The issue with that is that I cannot use the “conditions” feature. These set of cards are for my mobile dashboard which will show only if the lights are on for quick and easy access. Throwing them in any stack does not allow the new conditions feature to work unfortunately
Ok, I’ll rework the code. From what I remember the card width in the Sections is static, but I haven’t checked in a bit. I’ll look again.
yes I do … it’s installed anyway 
1 Like
It’s not feasible with Sections yet!
when it is updating, it is blinking blue… Can I change the blue ?
Are you talking about the card I shared via DM? If so, there is no animation so I am confused what is blinking…
Which part of the card do you want to change? Icon, badge etc…