So i dont see how my original response doesnt cover this usecase.
If you need something else you will need to show me with editing a picture or something, cause i am failing to understand what it is that you want.
Sorry Dimitri, we actually don’t understand each other.
I’m trying to recreate this card:
So, with your help I created the card on the left because the climate.stufa entity automatically supports the input_number.
Now on the right, I would like to recreate the same card but to set the fan modes.
However I don’t have an input_number entity for the fan, but it is part of the attributes of the climate.stufa entity.
It should be more or less like this:
Oh i see, so you basically need fake buttons that arent assigned to an entity but for example called a script that changes the climate fan mode between 1-5.
Am i correct?
You could also create an input_number helper for the climate fan mode and then have an automation that checks if the input_number was changed and set the fan mode appropriately.
Then you could just use the card i provided already.
Okay, I thought about this solution.
But could you tell me how to update the input_number value even when it is changed directly from the stove control panel?
So you would have an automation that checks if either the input_number was changed or the climate fan mode was changed.
If input_number is changed then set climate fan mode to number of input_number.
If climate fan mode was changed set input number to number of climate fan mode.
You could make this 2 seperate automations or edit the trigger id for each change and then only execute the appropriate bit depending on what was triggered.
Hard to show you an example because i dont have an entity with the same mode as yours.
Something like this might get you closer:
description: ""
mode: single
trigger:
- platform: state
entity_id:
- input_number.fan_mode_helper
id: HELPER
- platform: state
entity_id:
- climate.bedroom_heating
id: MANUAL
condition: []
action:
- if:
- condition: trigger
id:
- HELPER
then:
- service: climate.set_fan_mode
target:
entity_id: climate.bedroom_heating
data:
fan_mode: "{{states('input_number.fan_mode_helper') | int }}"
- if:
- condition: trigger
id:
- MANUAL
then:
- service: input_number.set_value
target:
entity_id: input_number.fan_mode_helper
data:
value: "{{state_attr('climate.bedroom_heating', 'fan_mode') | int}}"
You will likely need to change the trigger for the state of the climate entity to something more specific so it doesnt trigger all the time when anything changes on the climate entity. But since mine doesnt have a fan mode i cant really help there.
1 Like
Dont think it is possible because its the background of a different element. but you could cheat and layer them together in a stack-in-card like this maybe:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Room
secondary: |-
{{ states('sensor.ble_room_temperature') | round (0, default = 0) }}°C
• {{ states('sensor.ble_room_humidity') | round (0, default = 0) }}%
icon: mdi:sofa
entity: light.wled
icon_color: null
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
background: transparent;
border-style: none;
background: rgba(var(--rgb-primary-text-color), 0.03);
}
:host {
--mush-icon-size: 60px;
}
- type: iframe
url: http://192.168.68.221/liveview
aspect_ratio: 10%
title: null
card_mod:
style: |
ha-card {
position: absolute;
z-index: 1;
border-radius: 11.5px !important;
width: calc(100% - 26px) !important;
left: 13px;
bottom: 11.2px;
}
#root {
height: 5px;
}
- type: custom:mushroom-light-card
entity: light.office_desk_light
primary_info: none
secondary_info: none
icon_type: none
show_brightness_control: true
fill_container: true
card_mod:
style: |
mushroom-light-brightness-control {
z-index: 2;
--slider-bg-color: transparent !important;
}
card_mod:
style: |
ha-card {
isolation: isolate;
}
This looks really cool - but unfortunately it seems this doesnt work when accessing HA via HTTPS… unfortunate as i would definitely use this then!
@Still_ill sorry for the tag, but you might like this for your control card if you can implement it 
1 Like
Not sure if this helps but I combined attributes to create a sensor that was based off the direction and speed. That helped pair down the if then results.
sensor:
- platform: template
sensors:
fan_direction:
friendly_name: "Fan Direction"
unique_id: fan1
value_template: "{{ state_attr('fan.bedroom_fan', 'direction') }}"
fan_direction_speed:
friendly_name: "Fan Direction Speed"
unique_id: fan2
value_template: |
{% set direction = state_attr('fan.bedroom_fan', 'direction') %}
{% set speed = state_attr('fan.bedroom_fan', 'percentage') %}
{{[direction,speed]|join("")}}
mushroom-slider support min max properties so this should be possible to add. Don’t have any workaround we can do right now and have to wait for the feature to be added. I need this feature as well so might create a PR to add this when I get the time.
Edit: actually, there’s already a pending PR that add this exact feature:
1 Like
That really looks insane!!!
Would love to create this for my (47) Hue devices, wow!
If you’re ever able to document how you achieved this, that would be awesome.
Thanks for sharing!
you are the best!!! 
its basically just this:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
{% if states(config.entity) == 'on' %}
filter: drop-shadow(rgba{{state_attr(config.entity, 'rgb_color') + (1,)}} 0px 6px 10px);
{% endif %}
}
and then some custom hue icons from HACS
looks like this section is also being used to color the inside of the custom icons. clearly handmade sizing 1 by 1. Well done on that btw, that takes some effort @LiQuid_cOOled :
{% if is_state(config.entity, 'on') %}
ha-state-icon:before {
content: "";
width: 27px;
height: 20px;
transform: rotate(13deg) skew(-10deg);
background: {{"#%02x%02x%02x" % state_attr(config.entity, "rgb_color") }};
border-radius: 0px;
border-width: 0px;
margin-top: 13.5px;
margin-left: 10.5px;
position: absolute;
}
{% endif %}
Yes indeed, this is my conclusion as well:
“clearly handmade sizing 1 by 1”
Unfortunately not a simple read, copy/paste and learn.
But when I take your example, which lines do I need to “play with”, to color inside of the custom icons (and only that)? margin-top / margin-left ?
{% if is_state(config.entity, 'on') %}
ha-state-icon:before {
content: "";
width: 27px;
height: 20px;
transform: rotate(13deg) skew(-10deg);
background: {{"#%02x%02x%02x" % state_attr(config.entity, "rgb_color") }};
border-radius: 0px;
border-width: 0px;
margin-top: 13.5px;
margin-left: 10.5px;
position: absolute;
}
{% endif %}
transform: rotate() skew()
and margin-top, margin-left
you can use negative values in all of these i believe too.
Wow, that looks really cool. Thanks for the tag, I will definitely incorporate that. I can’t wait to see how it looks. It’s just too bad for you that it doesn’t work with HTTPS again. Unfortunately, I still haven’t found another solution. I have the same problem on my companion app via HACloud, too
1 Like
Thanks.
I think I would be thankful forever, if @LiQuid_cOOled wants to share his formatted code, although I would understand it is just too much work to “just share”…
Hi again 
How i put now one card side by side, with a little space between
type: custom:stack-in-card
mode: horizontal
style: |
ha-card {
width: 370px;
height: 80px!important;
border: none;
background-color: #FAFAFA!important;
margin-left: -6px;
}
cards:
- type: custom:stack-in-card
style: |
ha-card {
width:120px;
}
cards:
- type: custom:mushroom-template-card
primary: Banca
secondary: '{{ states("binary_sensor.contact_sensor")}}'
icon: mdi:window-closed-variant
entity: binary_sensor.contact_sensor_2
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-color: red!important;
--shape-color: #FBD7D4!important;
}
.: |
ha-card {
width: 120px;
border-style: none;
background-color: #E2E2E2!important;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: JanelaFogao
secondary: '{{ states ("binary_sensor.contact_sensor_3")}}'
icon: mdi:window-closed-variant
entity: binary_sensor.contact_sensor_3
card_mod: null
Any reason you cant just use a grid with your 2 cards rather than a bunch of stack cards?
type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-template-card
primary: Banca
secondary: '{{ states("binary_sensor.contact_sensor")}}'
icon: mdi:window-closed-variant
entity: binary_sensor.contact_sensor_2
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-color: red!important;
--shape-color: #FBD7D4!important;
}
.: |
ha-card {
border-style: none;
background-color: #E2E2E2!important;
}
- type: custom:mushroom-template-card
primary: JanelaFogao
secondary: '{{ states ("binary_sensor.contact_sensor_3")}}'
icon: mdi:window-closed-variant
entity: binary_sensor.contact_sensor_3
more simple
where i can use stack card?
Why do you need a stack card here?
You had only 1 card in each stack anyway, can you try and explain your usecase better?