Any idea what Iām doing wrong yet with the slider?
Is it possible to get more information by the name or create something like this? now i did used the light card. Can i use an entity bij the name: field?
Hi Can you post the code snipet pls ? newbie here having trouble integrating picture element within the mushroom chip card. thanks again.
Ok sorry to keep bugging you with this, but I have the code working. The fan speed changes as I drag the slider up and down
However if I drag it all the way to 0, it kills it, the animation code wonāt work anymore unless I redo the code . Any idea why?
1 Like
Anddd I fixed it. In case anyone has the same
Issueā¦.had to change input_number slider minimum value to 1 instead of 0. 0 broke the code you gave me.
Thanks for the help
1 Like
Yes, you can add text to both the primary and secondary info text. This should work for any Mushroom Card and you can apply separate styling to the text.
Mushroom Card - Before primary text:
type: custom:mushroom-light-card
entity: light.office_light
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.primary:before {
content: "({{ states('sensor.rhys_office_sensor_temperature') | round(1) }} Ā°C / {{ states('sensor.rhys_office_sensor_humidity') | round(1) }} %) ";
color: rgb(var(--rgb-orange));
font-weight: 400;
}
Mushroom Card - After primary text:
type: custom:mushroom-light-card
entity: light.office_light
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.primary:after {
content: " ({{ states('sensor.rhys_office_sensor_temperature') | round(1) }} Ā°C / {{ states('sensor.rhys_office_sensor_humidity') | round(1) }} %)";
color: rgb(var(--rgb-red));
font-weight: 400;
}
Mushroom Card - Before secondary text:
type: custom:mushroom-light-card
entity: light.office_light
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.secondary:before {
content: "({{ states('sensor.rhys_office_sensor_temperature') | round(1) }} Ā°C / {{ states('sensor.rhys_office_sensor_humidity') | round(1) }} %) ";
color: rgb(var(--rgb-blue));
font-weight: 400;
}
Mushroom Card - After secondary text:
type: custom:mushroom-light-card
entity: light.office_light
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.secondary:after {
content: " ({{ states('sensor.rhys_office_sensor_temperature') | round(1) }} Ā°C / {{ states('sensor.rhys_office_sensor_humidity') | round(1) }} %)";
color: rgb(var(--rgb-green));
font-weight: 400;
}
9 Likes
I think you will have to use roomcard for a feature to make this.
I have the same design and Iām also using room-card.
ok thank you for the reply
Mushrrom cards have the text below the icon, but you could try something like this:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-light-card
entity: light.lounge_light
layout: vertical
secondary_info: none
name: Lounge
- type: custom:mushroom-light-card
entity: light.lounge_cabinet_light
use_light_color: true
layout: vertical
secondary_info: none
name: Cabinet
- type: custom:mushroom-light-card
entity: light.dining_room_light
layout: vertical
secondary_info: none
name: Dining
- type: custom:mushroom-light-card
entity: light.kitchen_light
name: Kitchen
layout: vertical
secondary_info: none
- type: custom:mushroom-light-card
entity: light.kitchen_bench_light
secondary_info: none
layout: vertical
name: Bench
2 Likes
thank youā¦ I am using like this also. But I need to decrease the spacing between the cards. eg the Lounge, Cabinet, Dining, Kitchen, Bench entities and also decrease the height. Is that possible ???
Kindly guide
WOW, great, thanks a lot, i was also wondering, how or where i can find this information? trought the browser inspector?
mushroom-state-info$: |
.secondary:before {
content: "({{ s
And specialy the : mushroom-state-info$: |, .secondary:after {
What i did created yesterday is: (but this is the vertical-stack-in-card and the 2x mushroom-card)
1 Like
The spacing will decrease as the width decreases. You can fix overall width and height like this:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-light-card
entity: light.lounge_light
layout: vertical
secondary_info: none
name: Lounge
card_mod:
style: |
ha-card {
padding: 12px 0px !important;
}
- type: custom:mushroom-light-card
entity: light.lounge_cabinet_light
use_light_color: true
layout: vertical
secondary_info: none
name: Cabinet
card_mod:
style: |
ha-card {
padding: 12px 0px !important;
}
- type: custom:mushroom-light-card
entity: light.dining_room_light
layout: vertical
secondary_info: none
name: Dining
card_mod:
style: |
ha-card {
padding: 12px 0px !important;
}
- type: custom:mushroom-light-card
entity: light.kitchen_light
name: Kitchen
layout: vertical
secondary_info: none
card_mod:
style: |
ha-card {
padding: 12px 0px !important;
}
- type: custom:mushroom-light-card
entity: light.kitchen_bench_light
secondary_info: none
layout: vertical
name: Bench
card_mod:
style: |
ha-card {
padding: 12px 0px !important;
}
card_mod:
style: |
ha-card {
width: 300px;
height: 96px;
}
1 Like
thank youā¦ This is what I wantedā¦ 
1 Like
Hello,
I would like to combine the idee of the colored light card and the dropdown feature.
Unfortunately I donāt understand how to handle the color of the dropdown part.
Any ideas for me?
type: conditional
conditions:
- entity: light.shelly_child_deckenspots
state: 'on'
card:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 42px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-light-card
entity: light.child_deckenspots
name: Deckenspots
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: true
collapsible_controls: true
tap_action:
action: toggle
card_mod:
style: |
ha-card {
{% set r = state_attr('light.child_deckenspots', 'rgb_color')[0] %}
{% set g = state_attr('light.child_deckenspots', 'rgb_color')[1] %}
{% set b = state_attr('light.child_deckenspots', 'rgb_color')[2] %}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.dropdown_child_deckenspots
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else
'mdi:chevron-down' }}
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-card {
{% set r = state_attr('light.child_deckenspots', 'rgb_color')[0] %}
{% set g = state_attr('light.child_deckenspots', 'rgb_color')[1] %}
{% set b = state_attr('light.child_deckenspots', 'rgb_color')[2] %}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
align-items: flex-end;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.dropdown_child_deckenspots
state: 'on'
card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.child_decke_1
name: Spot 1
- type: custom:mushroom-light-card
entity: light.child_decke_2
name: Spot 2
- type: custom:mushroom-light-card
entity: light.child_decke_3
name: Spot 3
- type: custom:mushroom-light-card
entity: light.child_decke_4
name: Spot 4
- type: custom:mushroom-light-card
entity: light.child_decke_5
name: Spot 5
- type: custom:mushroom-light-card
entity: light.child_decke_6
name: Spot 6
1 Like
Background needs to be applied to the top stack-in-card like this:
type: conditional
conditions:
- entity: light.shelly_child_deckenspots
state: 'on'
card:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 42px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-light-card
entity: light.child_deckenspots
name: Deckenspots
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: true
collapsible_controls: true
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.dropdown_child_deckenspots
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else
'mdi:chevron-down' }}
icon_color: disabled
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.dropdown_child_deckenspots
state: 'on'
card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.child_decke_1
name: Spot 1
- type: custom:mushroom-light-card
entity: light.child_decke_2
name: Spot 2
- type: custom:mushroom-light-card
entity: light.child_decke_3
name: Spot 3
- type: custom:mushroom-light-card
entity: light.child_decke_4
name: Spot 4
- type: custom:mushroom-light-card
entity: light.child_decke_5
name: Spot 5
- type: custom:mushroom-light-card
entity: light.child_decke_6
name: Spot 6
card_mod:
style: |
ha-card {
{% set r = state_attr('light.child_deckenspots', 'rgb_color')[0] %}
{% set g = state_attr('light.child_deckenspots', 'rgb_color')[1] %}
{% set b = state_attr('light.child_deckenspots', 'rgb_color')[2] %}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
}
2 Likes
Thanks much appreciated.
Would it be possible to share the two pictures of the lamp you have within the color wheel card?
If Iām using a mushroom template card, and I want the icon to change color when I turn it on like normal, can this be achieved if the button is calling a service .
Another words itās a simple toggle on and off but but itās by calling a script, because Itās an RF remote integrated with BroadLink
EDIT - I figured it out. Couldnāt find it anywhere so in case anyone tries to do this in there isnāt an easier way that I missing.
I used input number helper with a range from 1 to 2, And then only made one card visible at a time with a conditional card being set to either 1 or 2 value.
Then the action button was a simple call service to increment the step on one card and derement the step on the other card.
Thanks you very much !
1 Like
Hi there.
If you have a second, could you give me a nudge as to how to accomplish something similar but: with either all chips in a chips card or individual chips, āpermanentlyā leaving the box-shadow red?
The use case is a card Iām working on that greys out motion sensor chips unless thereās motion and then various aspects of the chip changes (icon color, text color, etc.). Iād like a red border around the chip as well, but canāt seem to find the right place to style this. I can handle the sensor on/off condition stuff, I just canāt figure out the CSSā¦
Will save some room by not pasting the CSS attempts that didnāt work, but I was thinking itād be as simple as using box-shadow: 0 0 20px red or something similar without the animation clause from previous examples and without the active clause in this exampleā¦ butā¦ where? 
Looks like the hierarchy for an individual chip in this card is: mushroom chips card->shadow root->ha card->mushroom template chip->shadow root->mushroom chip->shadow root->ha-card->shadow root. I think Iāve tried most of the permutations as to where to put the red box-shadow but am obviously missing something 
To further illustrate, I was able to make the border for the entirety of the card change as per this pic, but Iād like to be able to do it for individual chips (or apply the same conditional logic to all). e.g. āKitchen Motionā could have the red border around it.
Anyone using the swipe card, how have you gotten around the horrible styling issue? Seems the border around the entities I want to swipe are showing up weird. The top 2 buttons are inset and not like the 3D Printer dropdown. @rhysb any idea?
