Have a look at the guide in my profile, i am sure it will help you with this 
1 Like
I used your code because it’s beautiful and i like it.
However i added some things to it, for example
- If the temperature in the kitchen is below 17 it will animate n icon (exclamation mark) color red instead of the current humidity badge icon, and it will do as well at the kitchen icon. however if the temperature is above 16 it shows the humidity again as the badge icon and shows a “ok” green checkmark t the kitchen icon.
so i can see if something is wrong, like offline lights etc… this is more like an example.
Thanks for this amazing code
I truly appreciate your code, and it served as a fantastic foundation for my project. I’ve made some additions to enhance its functionality, such as incorporating conditional animations and icon changes. For instance, when the kitchen temperature falls below 17, it triggers an animated red exclamation mark, signaling a potential issue. Concurrently, the kitchen icon adopts the same color scheme. Conversely, when the temperature exceeds 17, the humidity badge icon returns, accompanied by a reassuring blue checkmark on the kitchen icon. This modification allows me to quickly identify and address any issues, like offline lights, making your code an invaluable asset. Thank you for providing such an exceptional piece of code!
this code i posted is an working example to experiment with.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
border: none !important;
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
cards:
- type: custom:mushroom-template-card
primary: Kitchen
icon: mdi:stove
badge_icon: |
{% if states('sensor.kitchendev_temperature') | float > 16 %}
mdi:check
{% elif states('sensor.kitchendev_temperature') | float < 16 %}
mdi:exclamation-thick
{% else %}
mdi:adjust
{% endif %}
badge_color: |
{% if states('sensor.kitchendev_temperature') | float > 16 %}
green
{% elif states('sensor.kitchendev_temperature') | float < 16 %}
red
{% else %}
green
{% endif %}
tap_action:
action: navigate
navigation_path: null
icon_color: cyan
multiline_secondary: true
card_mod:
style:
style: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
z-index: 1;
}
:host {
--mush-icon-border-radius: 12px;
border: none !important;
box-shadow: none !important;
}
mushroom-shape-icon$: |
.shape:after {
content: "{{ states(config.entity, 'temperature')|replace('.', ',') }}°";
font-size: 14px;
font-weight: bolder;
color: white;
position: absolute;
border: none !important;
box-shadow: none !important;
}
.shape {
{% set mode = states(config.entity, 'temperature') %}
--shape-color: rgba(var(--rgb-
{%- if mode > '0' -%}
orange
{%- elif mode < '0' -%}
grey
{%- else -%}
grey
{% endif %}));
}
mushroom-state-info$: |
.primary:after {
content: " ";
color: rgb(var(--card-background-color));
font-style: bold;
font-size: 10px
}
.: >
{% set temperature = states('sensor.kitchendev_temperature') |
float %}
{% if temperature < 16 %}
mushroom-badge-icon {
animation: pulse 1s infinite;
}
@keyframes pulse {
50% { opacity: 0;}
}
{% endif %}
- type: custom:mini-graph-card
entities:
- entity: sensor.kitchendev_temperature
name: null
hours_to_show: 24
line_width: 3
font_size: 50
points_per_hour: 2
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
color: orange
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 25%, transparent);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.kitchendev_temperature
icon: none
badge_icon: |
{% if states('sensor.kitchendev_temperature') | float > 16 %}
mdi:check
{% elif states('sensor.kitchendev_temperature') | float < 16 %}
mdi:exclamation-thick
{% else %}
mdi:adjust
{% endif %}
badge_color: |
{% if states('sensor.kitchendev_temperature') | float > 16 %}
blue
{% elif states('sensor.kitchendev_temperature') | float < 16 %}
red
{% else %}
green
{% endif %}
primary_info: none
secondary_info: none
layout: horizontal
tap_action:
action: more-info
card_mod:
style:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
mushroom-shape-icon$: |
.shape:after {
content: "{{ states(config.entity, 'temperature')|replace('.', ',') }}°";
font-size: 14px;
font-weight: bolder;
color: white;
position: absolute;
border: none !important;
box-shadow: none !important;
}
.shape {
{% set mode = states(config.entity, 'temperature') %}
--shape-color: rgba(var(--rgb-
{%- if mode > '0' -%}
orange
{%- elif mode < '0' -%}
grey
{%- else -%}
grey
{% endif %}));
}
mushroom-state-info$: |
.primary:after {
content: "{{ states('sensor.livingroomdev_humidity') }}";
color: rgb(var(--card-background-color));
font-style: bold;
font-size: 10px
}
.: >
{% set temperature = states('sensor.kitchendev_temperature') |
float %}
{% if temperature < 16 %}
mushroom-badge-icon {
animation: pulse 1s infinite;
}
@keyframes pulse {
50% { opacity: 0;}
}
{% else %} mushroom-badge-icon:after {
content: "{{ states('sensor.livingroomdev_humidity') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: rgb(var(--rgb-white));
border-radius: 50%;
border-width: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 0.7em;
} ha-card {
border: none !important;
} {% endif %}
- type: custom:mushroom-template-card
primary: null
icon: mdi:lightbulb
icon_color: >-
{%if expand(area_entities('livingroom')) | selectattr ( 'domain' ,
'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count
> 0 %} amber {% else %} grey {% endif %}
entity: light.all_lights
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(area_entities('livingroom')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.7em;
}
ha-card {
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:window-shutter-open
icon_color: >-
{%if expand(states.cover) | selectattr( 'state', 'eq', 'open') | list
| count > 0 %} blue {% else %} grey {% endif %}
entity: light.all_lights
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(states.cover) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list | count}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
Error / to low temperature
no error / to low temperature
I did see people wanted some extra warnings in certain cards, and i did try in this code and it works.
I don’t know if there is an more easy way but i did try with my small knowledge
2 Likes
Nice! Also in the process here with his code, your footer is sticky though on the mobile screens?
I have basacly copy diffrent card and others work together to make an room card. Its ongoing work, but im stuck at lines and border around the card thats im not manage to remove.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
border: none !important;
{% if is_state('group.office_lights', 'on') %}
background: rgba(26, 26, 26, 0.67);
{% endif %}
}
cards:
- type: custom:mushroom-template-card
primary: Teknisk rom
secondary: ''
icon: mdi:flash-alert-outline
layout: horizontal
tap_action:
action: navigate
navigation_path: teknisk_rom
icon_color: blue
multiline_secondary: false
card_mod:
style: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
z-index: 1;
mushroom-shape-icon$: |
@keyframes ping {
0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-{{ config.icon_color }}), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
.: |
mushroom-shape-icon {
--icon-size: 80px;
display: flex;
margin: -21px 0px 0px -21px !important;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
}
cards: null
- type: custom:mini-graph-card
entities:
- entity: sensor.multisensor_teknisk_rom_air_temperature
name: Temperature
hours_to_show: 24
line_width: 3
font_size: 50
points_per_hour: 2
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
color_thresholds:
- value: 17
color: '#ffcd05'
- value: 19
color: '#f39c12'
- value: 21
color: '#d35400'
- value: 22.5
color: '#c0392b'
- value: 40
color: '#91f4ff'
- value: 50
color: '#2ae0f5'
- value: 58
color: '#18b3f5'
- value: 65
color: '#005bd1'
- value: 70
color: '#000399'
card_mod:
style: |
ha-card {
position: absolute !important;
top: -10px;
width: 100% !important;
height: 80% !important;
left: 40px;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
border:0
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: none
state:
- operator: default
color: grey
- value: 'on'
color: orange
icon: mdi:lightbulb-group
entity: group.office_lights
styles:
icon:
- width: 19px
grid:
- position: relative
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- left: 50%
- top: 10%
- height: 20px
- width: 20px
- font-size: 10px
- line-height: 20px
- font-weight: bold
card:
- border-radius: 50%
- width: 40px
- height: 40px
custom_fields:
notification: |
[[[
if (states['sensor.teknisk_rom_lights_of_count'].state == '0')
return ' '
return `${states['sensor.teknisk_rom_lights_of_count'].state}`
]]]
name: ' '
- type: custom:button-card
state:
- value: 'on'
icon: mdi:thermometer
entity: sensor.multisensor_teknisk_rom_air_temperature
styles:
icon:
- color: |
[[[
return `${states['sensor.tekniskrom_temp_color'].state}`
]]]
- width: 15px
- position: relative
- top: 4px
- right: 12px
card:
- border-radius: 80%
- width: 40px
- height: 40px
name:
- color: white
- font-size: 10px
- position: relative
- bottom: 10px
- left: 5px
- font-weight: bold
name: |
[[[
if (states['sensor.multisensor_teknisk_rom_air_temperature'].state == 'unknown')
return '-'
return `${states['sensor.multisensor_teknisk_rom_air_temperature'].state}°`
]]]
- type: custom:button-card
state:
- operator: default
color: yellow
- value: 'off'
color: grey
- value: 'on'
color: rgb(255, 71, 26)
styles:
card:
- border-radius: 50%
icon: mdi:motion-sensor
tap_action:
action: more-info
entity: binary_sensor.multisensor_teknisk_rom_motion_detection
styles:
icon:
- width: 18px
card:
- width: 40px
- height: 40px
name: ' '
Hey guys,
Noob here needs some help. So I’m trying to control a ceiling fan via RF, anyway I’m trying to make a card that will look good and will make sense but I’m so bad at this yaml stuff, can someone please help me make this looks good? or even if you have a completely different idea? that’s what I have now: (took me 4 hours but):
maybe even change the location of the light? maybe no words just icons? help 
code:
cards:
- type: custom:mushroom-template-card
primary: Ceiling Fan
secondary: ''
icon: mdi:ceiling-fan
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: call-service
service: esphome.esp360_default_1_send_rf_raw
target: {}
data:
protocol_number: 6
raw_data: '101110111110111100100000'
repeat_times: 3
wait_time: 0
icon: mdi:fan
icon_color: white
content: 'Off'
card_mod:
style: |
ha-card {
width: 100px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 15px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: blue !important;
}
- type: template
tap_action:
action: call-service
service: esphome.esp360_default_1_send_rf_raw
target: {}
data:
protocol_number: 6
raw_data: '101110111110111111000000'
repeat_times: 3
wait_time: 0
icon: mdi:fan
icon_color: white
content: Level 1
card_mod:
style: |
ha-card {
width: 100px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 15px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: blue !important;
}
- type: template
tap_action:
action: call-service
service: esphome.esp360_default_1_send_rf_raw
target: {}
data:
protocol_number: 6
raw_data: '101110111110111110011000'
repeat_times: 3
wait_time: 0
icon: mdi:fan
icon_color: white
content: Level 2
card_mod:
style: |
ha-card {
width: 100px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 15px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: blue !important;
}
- type: template
tap_action:
action: call-service
service: esphome.esp360_default_1_send_rf_raw
target: {}
data:
protocol_number: 6
raw_data: '101110111110111101000000'
repeat_times: 3
wait_time: 0
icon: mdi:fan
icon_color: white
content: Level 3
card_mod:
style: |
ha-card {
width: 100px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 15px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: blue !important;
}
- type: template
tap_action:
action: call-service
service: esphome.esp360_default_1_send_rf_raw
target: {}
data:
protocol_number: 6
raw_data: '101110111110111101010000'
repeat_times: 3
wait_time: 0
icon: mdi:fan
icon_color: white
content: Level 4
card_mod:
style: |
ha-card {
width: 100px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 15px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: blue !important;
}
- type: template
tap_action:
action: call-service
service: esphome.esp360_default_1_send_rf_raw
target: {}
data:
protocol_number: 6
raw_data: '101110111110111110010100'
repeat_times: 3
wait_time: 0
icon: mdi:fan
icon_color: white
content: Level 5
card_mod:
style: |
ha-card {
width: 100px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 15px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: blue !important;
}
- type: template
tap_action:
action: call-service
service: esphome.esp360_default_1_send_rf_raw
target: {}
data:
protocol_number: 6
raw_data: '101110111110111110000000'
repeat_times: 3
wait_time: 0
icon: mdi:fan
icon_color: white
content: Level 6
card_mod:
style: |
ha-card {
width: 100px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 15px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: blue !important;
}
- type: template
tap_action:
action: call-service
service: esphome.esp360_default_1_send_rf_raw
target: {}
data:
protocol_number: 6
raw_data: '101110111110111110100000'
repeat_times: 3
wait_time: 0
icon: mdi:lightbulb-on
icon_color: white
content: Toggle Light
card_mod:
style: |
ha-card {
width: 100px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 15px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: blue !important;
}
alignment: justify
card_mod:
style:
mushroom-template-chip:nth-child(1)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
mushroom-template-chip:nth-child(2)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
mushroom-template-chip:nth-child(3)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
mushroom-template-chip:nth-child(4)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
mushroom-template-chip:nth-child(5)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
mushroom-template-chip:nth-child(6)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
mushroom-template-chip:nth-child(7)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
.: |
ha-card {
padding: 0px 10px 10px 10px
}
You asked this same question 15 hours ago… i already replied to you with some ideas.
Number of problems with your code which i have fixed. A bit much to list, but please try and understand each bit that the css is doing before just adding it. For example you had an entire keyframes section without any animation being applied.
You will need to put your own entities back in as i replaced to test.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
border: none !important;
{% if is_state('group.office_lights', 'on') %}
background: rgba(26, 26, 26, 0.67);
{% endif %}
}
cards:
- type: custom:mushroom-template-card
primary: Teknisk rom
secondary: ''
icon: mdi:flash-alert-outline
layout: horizontal
tap_action:
action: navigate
navigation_path: teknisk_rom
icon_color: blue
multiline_secondary: false
card_mod:
style: |
mushroom-shape-icon {
--icon-size: 80px;
display: flex;
margin: -21px 0px 0px -21px !important;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
z-index: 1;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.bedroom_temperature_humidity_temperature
name: Temperature
hours_to_show: 24
line_width: 3
font_size: 50
points_per_hour: 2
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
color_thresholds:
- value: 17
color: '#ffcd05'
- value: 19
color: '#f39c12'
- value: 21
color: '#d35400'
- value: 22.5
color: '#c0392b'
- value: 40
color: '#91f4ff'
- value: 50
color: '#2ae0f5'
- value: 58
color: '#18b3f5'
- value: 65
color: '#005bd1'
- value: 70
color: '#000399'
card_mod:
style: |
ha-card {
position: absolute !important;
top: -10px;
width: 100% !important;
height: 80% !important;
left: 40px;
border: none !important;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: none
state:
- operator: default
color: grey
- value: 'on'
color: orange
icon: mdi:lightbulb-group
entity: light.bedroom_chest_lamp
styles:
icon:
- width: 19px
grid:
- position: relative
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- left: 50%
- top: 10%
- height: 20px
- width: 20px
- font-size: 10px
- line-height: 20px
- font-weight: bold
card:
- border-radius: 50%
- width: 40px
- height: 40px
- border: none
custom_fields:
notification: |
[[[
if (states['sensor.all_standby_power'].state == '0')
return ' '
return `${states['sensor.all_standby_energy'].state}`
]]]
name: ' '
- type: custom:button-card
state:
- value: 'on'
icon: mdi:thermometer
entity: sensor.multisensor_teknisk_rom_air_temperature
styles:
icon:
- color: |
[[[
return `${states['sensor.all_standby_energy'].state}`
]]]
- width: 15px
- position: relative
- top: 4px
- right: 12px
card:
- border-radius: 80%
- width: 40px
- height: 40px
- border: none
name:
- color: white
- font-size: 10px
- position: relative
- bottom: 10px
- left: 5px
- font-weight: bold
name: |
[[[
if (states['sensor.bedroom_temperature_humidity_temperature'].state == 'unknown')
return '-'
return `${states['sensor.bedroom_temperature_humidity_temperature'].state}°`
]]]
- type: custom:button-card
state:
- operator: default
color: yellow
- value: 'off'
color: grey
- value: 'on'
color: rgb(255, 71, 26)
styles:
card:
- border-radius: 50%
icon: mdi:motion-sensor
tap_action:
action: more-info
entity: binary_sensor.multisensor_teknisk_rom_motion_detection
styles:
icon:
- width: 18px
card:
- width: 40px
- height: 40px
- border: none
name: ' '
1 Like
Mmm the first one when i copy paste it wont work at all, do I need to install anything else for it to work?
The last one uses entities, and there is no entity for the fan so idk how to make it work.
For the last one create a input number helper. Set the min and max to the speeds your fan supports. Create an automation that triggers when input number is changed. Read what number it is and then set your fan to that speed in the automation.
My reply was meant as inspiration and not a how to.
The first one uses mushroom cards, card mod, and stack in card. So as long as you have those 3 from HACS it will work, but of course you need to create the entities and scripts i have, or replace it with something similar, hence the inspiration
Yeah but if i can see anything… then idk how to fix it. so I have no idea what to do.
also I did said im a noob
You’re absolutely right! Thank you a lot, appreciate!
First time working with css…
1 Like
This is how it looks when i copy it
Take a look through the code and see what entities you are missing. Probably a bunch. This card uses:
input_number entity = speed control of fan. Not directly, just represents the number the fan should be set to based on the scripts turning it up and down.
input_boolean entity = dropdown menu. Controls whether or not to show the extra buttons using the conditional card. And a bunch of other input_booleans that show what state the fan is currently in, vertical, horizontal, nature mode, or all of the above.
timer entity = a timer helper created to only keep the fan running for 8 hours. The 1+ h button can then add 1 hour to the timer if needed.
scripts = multiple scripts that do different things. 1 that runs the rf remote action to physically turn the fan down, and then also increments down the input_number helper. One that does the same but turns it up instead. A script that turns nature mode on with the rf action and toggles an input_boolean to let you know its on. This is just a feature my fan has. 1 that runs the rf action to turn vertical mode on and toggles an input_boolean helper. 1 that runs the rf action to turn horizontal mode on and toggles an input_boolean helper.
I did forget to tell you that i also use the material icons font style for showing an icon in the badge, wont make a big difference, could just remove the badge section if not desired:
Can be found here:
So as you can see quite a bit. I didnt say it would be an easy one to replicate, but it was for inspiration.
Thank you for your help, I’m still trying. it might just be to complicated of a template for me. I am trying to make something like this:
and it doesn’t really need to change color on the press because there is no feedback coming back to HA. do you think I can make it somehow?
I was able to get to this point:
code:
type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card:
$: |
div#root {
display: grid;
}
div#root > * {
grid-column-start: 1;
grid-row-start: 1;
margin: 0px;
}
div#root > *:nth-child(2) {
--ha-card-border-width: 0px;
--ha-card-background: rgba(0,0,0,0.0);
width: 15% !important;
min-width: calc(40px + 2 * 12px);
height: calc(40px + 2 * 12px);
justify-self: self-end;
}
.: |
ha-card {
border: none;
}
card:
type: horizontal-stack
cards:
- type: tile
entity: script.fan_light_nothing
name: Office Fan Control
tap_action:
action: none
icon_tap_action:
action: none
hide_state: true
features:
- type: fan-speed
- type: custom:mushroom-entity-card
fill_container: false
entity: script.office_fan_light
tap_action:
action: call-service
service: script.office_fan_light
target: {}
card_mod:
style:
ha-tile-info $: |
.info .secondary {
display: none !important;
}
.: |
.content {
flex-direction: row-reverse !important;
}
.content .icon-container {
margin-inline-end: 12px;
}
mwc-ripple {
display: none;
}
1 Like
Bott suggested versions have no effect on my outcome. Maybe due to vertical layout?
Use the pseudo elements that i suggested first then.
type: custom:mushroom-cover-card
entity: cover.office_blinds
name: 2nd line
show_buttons_control: true
show_position_control: false
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.primary:before {
content: '1st line';
}
.primary {
display: flex;
flex-direction: column;
}
.primary:after {
content: '3rd line';
}
1 Like
Yes on the mobile version the footer is sticky.
No effect in my case…
type: custom:mushroom-cover-card
entity: cover.rollladen_schlafen_kinder
show_buttons_control: true
show_tilt_position_control: false
show_position_control: false
icon_type: icon
fill_container: true
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
name: Schlafen Kinder
secondary_info: none
primary_info: name
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'opening') %}
--card-mod-icon: mdi:arrow-up-box
{% elif is_state(config.entity, 'closing') %}
--card-mod-icon: mdi:arrow-down-box
{% elif state_attr(config.entity, 'current_position') == 100 %}
color: rgba(255,255,255);
--card-mod-icon: fapro:shutter1;
{% elif state_attr(config.entity, 'current_position') > 50 %}
color: rgba(193,193,193);
--card-mod-icon: fapro:shutter2;
{% elif state_attr(config.entity, 'current_position') > 0 %}
color: rgba(131,131,131);
--card-mod-icon: fapro:shutter3;
{% else %}
color: rgba(100,100,100);
--card-mod-icon: fapro:shutter4;
{% endif %}
}
ha-card {
--card-primary-font-size: 18px;
--card-primary-font-weight: normal;
}
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: transparent !important;
--icon-symbol-size: 100px;
}
mushroom-state-item {
padding-top: 20px;
--spacing: 20px;
margin-bottom: 10px;
}
mushroom-state-info$: |
.primary:before {
content: '1st line';
}
.primary {
display: flex;
flex-direction: column;
}
.primary:after {
content: '3rd line';
}
Any idea?