I wasnt giving you my code (as its way to long to post) and i wasnt giving you the code for the room card you posted. I just gave you an example of how it is built. You should be able to build it yourself from there. Just add more chips and if you dont want the background of the chip to be colored. Then remove the card mod code under the chip.
Here is the code for 1 room card with all of the tap actions stripped out.
Code
type: custom:stack-in-card
cards:
- type: custom:stack-in-card
entity: light.lounge_lights
cards:
- type: custom:mushroom-template-card
primary: Lounge
secondary: >-
{{ '{0:.2f}'.format( (
state_attr('climate.thermostat','current_temperature')|float))}}°C |
{{'{0:.0f}'.format((states('sensor.lounge_downstairs_humidity')
|float))}}%
icon: mdi:sofa
icon_color: |-
{% if is_state(config.entity, 'on') %}
{% if state_attr(config.entity,'rgb_color') != none %}
{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5 }}
{% else %}
#694311
{% endif %}
{% else %}
#ba03fc
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/lounge
hold_action:
action: call-service
service: light.toggle
target:
entity_id:
- light.lounge_lights
- light.lounge_tv_light
data: {}
double_tap_action:
action: none
fill_container: false
entity: light.lounge_lights
multiline_secondary: false
badge_icon: ''
badge_color: ''
card_mod:
style: |
ha-card {
padding-bottom: 0px !important;
}
mushroom-shape-icon {
position: absolute;
top: -57px;
left: -40px;
}
mushroom-state-info {
padding-left: 34px;
z-index: 1;
}
:host {
--mush-icon-size: 2.84em;
--mush-icon-symbol-size: 1em
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.lounge_lights
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: ''
icon: |-
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Lounge'))
|rejectattr('entity_id', 'search', 'master')
|map(attribute='entity_id')
|list | count > 1
%}
mdi:lightbulb-multiple
{% else %}
mdi:lightbulb
{% endif %}
icon_color: |-
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Lounge'))
|rejectattr('entity_id', 'search', 'master')
|map(attribute='entity_id')
|list | count > 0
%}
{% if state_attr(config.entity,'rgb_color') != none %}
{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5 }}
{% else %}
#694311
{% endif %}
{% else %}
none
{% endif %}
card_mod:
style: |
ha-card {
{% if states(config.entity) == 'on' %}
{% if state_attr(config.entity,'rgb_color') != none %}
background-color: rgba{{(state_attr(config.entity,'rgb_color')[0] * 0.85, state_attr(config.entity,'rgb_color')[1] * 0.85, state_attr(config.entity,'rgb_color')[2] * 0.85) + (0.6,)}} !important;
{% else %}
background-color: rgba(105, 67, 17, 0.2) !important;
{% endif %}
{% else %}
background-color: rgba(var(--rgb-disabled), 0.2) !important;
{% endif %}
box-shadow: none !important;
border: none !important;
min-width: 0px !important;
width: 32px !important;
height: 32px !important;
justify-content: center;
}
ha-card::after {
content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Lounge')) |rejectattr('entity_id', 'search', 'master') |map(attribute='entity_id') |list | count }}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
{% if states(config.entity) == 'on' %}
{% if state_attr(config.entity,'rgb_color') != none %}
background-color: rgba{{(state_attr(config.entity,'rgb_color')[0] * 0.65, state_attr(config.entity,'rgb_color')[1] * 0.65, state_attr(config.entity,'rgb_color')[2] * 0.65) + (0.6,)}} !important;
{% else %}
background-color: rgba(105, 67, 17, 0.5) !important;
{% endif %}
{% else %}
background-color: rgba(var(--rgb-disabled), 0.5) !important;
{% endif %}
border-radius: 50%;
}
- type: template
icon: mdi:thermostat
icon_color: '#e85c10'
content: ''
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
{% if states('light.lounge_lights') == 'on' %}
background-color: rgba{{(state_attr('light.lounge_lights','rgb_color')[0] * 0.85, state_attr('light.lounge_lights','rgb_color')[1] * 0.85, state_attr('light.lounge_lights','rgb_color')[2] * 0.85) + (0.6,)}} !important;
{% else %}
background-color: rgba(var(--rgb-disabled), 0.2) !important;
{% endif %}
box-shadow: none !important;
border: none !important;
min-width: 0px !important;
width: 32px !important;
height: 32px !important;
justify-content: center;
}
ha-card::after {
content: '{{state_attr('climate.thermostat','temperature') | round }}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
background: rgba(232, 92, 16, 0.5);
border-radius: 50%;
}
- type: template
icon: mdi:door-open
icon_color: '#ff6f00'
content: ''
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
{% if states('light.lounge_lights') == 'on' %}
background-color: rgba{{(state_attr('light.lounge_lights','rgb_color')[0] * 0.85, state_attr('light.lounge_lights','rgb_color')[1] * 0.85, state_attr('light.lounge_lights','rgb_color')[2] * 0.85) + (0.6,)}} !important;
{% else %}
background-color: rgba(var(--rgb-disabled), 0.2) !important;
{% endif %}
box-shadow: none !important;
border: none !important;
min-width: 0px !important;
width: 32px !important;
height: 32px !important;
justify-content: center;
}
- type: template
icon: mdi:battery-10
icon_color: '#ff0000'
content: ''
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
{% if states('light.lounge_lights') == 'on' %}
background-color: rgba{{(state_attr('light.lounge_lights','rgb_color')[0] * 0.85, state_attr('light.lounge_lights','rgb_color')[1] * 0.85, state_attr('light.lounge_lights','rgb_color')[2] * 0.85) + (0.6,)}} !important;
{% else %}
background-color: rgba(var(--rgb-disabled), 0.2) !important;
{% endif %}
box-shadow: none !important;
border: none !important;
min-width: 0px !important;
width: 32px !important;
height: 32px !important;
justify-content: center;
}
ha-card::after {
content: '{{expand(states.sensor)
|selectattr('entity_id', 'search', 'battery')
|selectattr('attributes.device_class', 'defined')
|selectattr('attributes.device_class', 'eq', 'battery')
|rejectattr('entity_id', 'in', integration_entities('mobile_app'))
|selectattr('entity_id', 'in', area_entities('Lounge'))
| map(attribute='state')
| reject('in', ['unknown', 'unavailable'])
| map('int', -1)
| select('le', 10)
| select('ge', 0)
| list
| count
}}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
background: rgba(232, 32, 16, 0.4);
border-radius: 50%;
}
alignment: end
card_mod:
style:
.: |
mushroom-template-chip:nth-child(1) {
{% if states('light.lounge_lights') == 'off' %}
margin-right: 0px;
display: none !important;
{% else %}
{% endif %}
}
mushroom-template-chip:nth-child(2) {
{% if states('input_boolean.heating') == 'off' %}
margin-right: 0px;
display: none;
{% else %}
{% endif %}
}
mushroom-template-chip:nth-child(3) {
{% if states('binary_sensor.lounge_back_door_contact') == 'off' %}
margin-right: 0px;
display: none;
{% else %}
{% endif %}
}
mushroom-template-chip:nth-child(4) {
{% if expand(states.sensor)
|selectattr('entity_id', 'search', 'battery')
|selectattr('attributes.device_class', 'defined')
|selectattr('attributes.device_class', 'eq', 'battery')
|rejectattr('entity_id', 'in', integration_entities('mobile_app'))
|selectattr('entity_id', 'in', area_entities('Lounge'))
| map(attribute='state')
| reject('in', ['unknown', 'unavailable'])
| map('int', -1)
| select('le', 10)
| select('ge', 0)
| list
| count <= 0
%}
margin-right: 0px;
display: none;
{% else %}
{% endif %}
}
ha-card {
--chip-spacing: 3px;
padding-right: 5px;
padding-bottom: 2px;
height: 35px;
}
card_mod:
style: |
ha-card {
{% if is_state(config.entity,'on') %}
--primary-text-color: #1f1f1f !important;
--secondary-text-color: #292929;
background-color: rgba{{state_attr(config.entity,'rgb_color') + (1,)}}
{% endif %};
}
If i kept the tap actions the code would be far too long 
@BMWAddict, take a look at this one for my actual room card code.
3 Likes
If the name is short this will center the name under the icon:
type: custom:mushroom-person-card
entity: person.tom
primary_info: name
secondary_info: none
icon_type: entity-picture
card_mod:
style:
mushroom-state-item$: |
.container {
display: flex;
flex-direction: column !important;
}
mushroom-state-info$: |
.container {
width: 83%;
align-items: center;
}
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
--icon-size: 72px;
width: fit-content;
}
1 Like
thanks thanks thanks
1 Like
Hi, i have a problem, can you explain me how to create other buttons for light, cover and other entities to show when i click on lightbulb for example?
Oh, I did not create it. I guess it is private to only the creator and me. I sent invite to you
How can I change the background color of a chip card?
I thought something like this. But unfortunately the background of the chip does not change
Also ich meine die Chips selber, nicht den Hintergrund der Card
type: custom:mushroom-chips-card
chips:
- type: template
card_mod:
style: |
ha-card {
--ha-card-background: #97a59c;
}
content: KÜCHE
icon_color: amber
icon: bha:thermostat
close:
type: custom:mushroom-chips-card
chips:
- type: template
card_mod:
style: |
ha-card {
background: #97a59c !important;
}
content: KÜCHE
icon_color: amber
icon: bha:thermostat
Check out my guide, think it will help you a lot 
1 Like
I need help
- to align all items within the pink area to right.
- also would like to have width of aqua and pink area to 33% and 66%.
my code:
type: horizontal-stack
cards:
- type: custom:mod-card
card_mod:
style:
layout-card$:
grid-layout$: |
:host {
padding: 0px !important;
background-color: white;
}
#root {
margin: 0px !important;
justify-content: start;
background-color: aqua;
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-entity-card
entity: person.madir
layout: vertical
primary_info: none
secondary_info: none
card_mod:
style: >
ha-card { #background: none; width: 42px; padding: 0px
!important; border-radius: 50% !important; display: block;
transform: scale(0.85); border-radius: 50% !important; grid-area:
i1; }
view_layout:
grid-area: i1
- type: custom:mushroom-entity-card
entity: person.madir
layout: vertical
primary_info: none
secondary_info: none
card_mod:
style: >
ha-card { #background: none; width: 42px; padding: 0px
!important; border-radius: 50% !important; display: block;
transform: scale(0.85); border-radius: 50% !important; grid-area:
i2; }
view_layout:
grid-area: i2
layout:
grid-template-columns: min-content min-content
grid-template-rows: auto
grid-template-areas: |
"i1 i2 "
- type: custom:mod-card
card_mod:
style:
layout-card$:
grid-layout$: |
:host {
padding: 0px !important;
background-color: white;
}
#root {
margin: 0px !important;
justify-content: start;
background-color: pink;
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-climate-card
entity: climate.thermostat_bedroom_1
icon: mdi:fire
secondary_info: none
primary_info: none
icon_type: icon
tap_action:
action: call-service
service: script.off_auto_heat
target: {}
hold_action:
action: more-info
double_tap_action:
action: none
card_mod:
style: >
ha-card { #background: none; width: 42px; padding: 0px
!important; border-radius: 50% !important; display: block;
transform: scale(0.85); border-radius: 50% !important; grid-area:
i1; }
view_layout:
grid-area: i1
- type: custom:mushroom-template-card
icon: |
{% if is_state('light.bedroom_1_all_lights', 'on') %}
mdi:lightbulb-group
{% else %}
mdi:lightbulb-group
{% endif %}
icon_color: |
{% if is_state('light.bedroom_1_all_lights','on') %}
orange
{% else %}
{% endif %}
badge_icon: |-
{% set all = expand('light.bedroom_1_all_lights') | list %}
{% set on_lights = all | selectattr('state', 'eq', 'on') | list %}
{% if on_lights %}
{{ on_lights | count }}
{% endif %}
badge_color: |
{% set all = expand('light.bedroom_1_all_lights')| list -%}
{% set open1 = all | selectattr('state','eq','on')|list|count%}
{% if open1 == 0 %}
{% else %}
orange
{% endif %}
entity: light.bedroom_1_lights
multiline_secondary: true
secondary: ''
primary: ''
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
card_mod:
style: >
{% set all_lights = expand('light.bedroom_1_all_lights') | list %}
{% set on_lights = all_lights | selectattr('state', 'eq', 'on') |
list %} {% if on_lights %}
mushroom-badge-icon:after {
content: "{{ on_lights | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
{% else %}
mushroom-badge-icon:after {
display: none;
}
{% endif %}
ha-card { #background: none; width: 42px; padding: 0px
!important; border-radius: 50% !important; display: block;
transform: scale(0.85); border-radius: 50% !important; grid-area:
i1; }
view_layout:
grid-area: i2
- type: custom:mushroom-entity-card
entity: person.madir
layout: vertical
primary_info: none
secondary_info: none
card_mod:
style: >
ha-card { #background: none; width: 42px; padding: 0px
!important; border-radius: 50% !important; display: block;
transform: scale(0.85); border-radius: 50% !important; grid-area:
i3; float: right; }
view_layout:
grid-area: i3
- type: custom:mushroom-entity-card
entity: person.madir
layout: vertical
primary_info: none
secondary_info: none
card_mod:
style: >
ha-card { #background: none; width: 42px; padding: 0px
!important; border-radius: 50% !important; display: block;
transform: scale(0.85); border-radius: 50% !important; grid-area:
i4; }
view_layout:
grid-area: i4
layout:
grid-template-columns: min-content min-content min-content min-content
grid-template-rows: auto
grid-template-areas: |
"i4 i3 i2 i1"
My opinion is that you should rework this entire thing to use the chip cards instead. it will just be easier for you to align things with it, as it natively supports aligning to end vs aligning start (or justify, or center alignment).
you could do it pretty easily something like this:
Code
type: custom:mod-card
card_mod:
style:
layout-card$:
grid-layout$: |
:host {
background-color: white;
}
#root {
margin: 0px !important;
background-color: none;
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:account
icon_color: blue
card_mod:
style: |
ha-card {
background: #d6e6f6 !important;
}
- type: template
icon: mdi:account
icon_color: blue
card_mod:
style: |
ha-card {
background: #d6e6f6 !important;
}
card_mod:
style: |
ha-card {
background: cyan !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:account
icon_color: blue
card_mod:
style: |
ha-card {
background: #d6e6f6 !important;
}
- type: template
icon: mdi:account
icon_color: blue
card_mod:
style: |
ha-card {
background: #d6e6f6 !important;
}
- type: template
icon: mdi:lightbulb-group
entity: light.office_lights_toggle
icon_color: amber
card_mod:
style: |
ha-card {
background: #f7e6d3 !important;
}
ha-card::after {
content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Office')) |rejectattr('entity_id', 'search', 'master') |map(attribute='entity_id') |list | count }}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 10px;
font-weight: 700;
{% if states(config.entity) == 'on' %}
background-color: rgba(var(--rgb-amber), 1) !important;
{% else %}
background-color: rgba(var(--rgb-disabled), 1) !important;
{% endif %}
border-radius: 50%;
}
- type: template
icon: mdi:fire
icon_color: |-
{% if state_attr(config.entity,'hvac_action') == 'idle' %}
green
{% else %}
red
{% endif %}
entity: climate.office_heating
card_mod:
style: |
ha-card {
{% if state_attr(config.entity,'hvac_action') == 'idle' %}
background: #dcead9 !important;
{% else %}
background-color: #ffb5a8 !important;
{% endif %}
}
ha-card::after {
content: '{% if state_attr(config.entity,'hvac_action') == 'idle' %} schedule {% else %} local_fire_department {% endif %}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 10px;
font-weight: 700;
font-family: 'Material Icons';
{% if state_attr(config.entity,'hvac_action') == 'idle' %}
background-color: rgba(var(--rgb-disabled), 1) !important;
{% else %}
background-color: rgba(var(--rgb-red), 1) !important;
{% endif %}
border-radius: 50%;
}
alignment: end
card_mod:
style: |
ha-card {
background: pink !important;
}
layout:
grid-template-columns: 33.3333% 66.6666%
grid-template-rows: auto
max_cols: 2
I do use the material icons font to have the icon in the climate “badge” otherwise it wont display an icon. It is just a google font that can be installed. Explained here:
1 Like
Its possible to fix bottom this card?
If you are talking about the card i posted above then yes:
Summary
type: custom:mod-card
card_mod:
style:
layout-card$:
grid-layout$: |
:host {
background-color: white;
}
#root {
margin: 0px !important;
background-color: none;
}
.: |
:host {
position: sticky !important;
z-index: 9;
bottom: 0px;
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:account
icon_color: blue
card_mod:
style: |
ha-card {
background: #d6e6f6 !important;
}
- type: template
icon: mdi:account
icon_color: blue
card_mod:
style: |
ha-card {
background: #d6e6f6 !important;
}
card_mod:
style: |
ha-card {
background: cyan !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:account
icon_color: blue
card_mod:
style: |
ha-card {
background: #d6e6f6 !important;
}
- type: template
icon: mdi:account
icon_color: blue
card_mod:
style: |
ha-card {
background: #d6e6f6 !important;
}
- type: template
icon: mdi:lightbulb-group
entity: light.office_lights_toggle
icon_color: amber
card_mod:
style: |
ha-card {
background: #f7e6d3 !important;
}
ha-card::after {
content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Office')) |rejectattr('entity_id', 'search', 'master') |map(attribute='entity_id') |list | count }}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 10px;
font-weight: 700;
{% if states(config.entity) == 'on' %}
background-color: rgba(var(--rgb-amber), 1) !important;
{% else %}
background-color: rgba(var(--rgb-disabled), 1) !important;
{% endif %}
border-radius: 50%;
}
- type: template
icon: mdi:fire
icon_color: |-
{% if state_attr(config.entity,'hvac_action') == 'idle' %}
green
{% else %}
red
{% endif %}
entity: climate.office_heating
card_mod:
style: |
ha-card {
{% if state_attr(config.entity,'hvac_action') == 'idle' %}
background: #dcead9 !important;
{% else %}
background-color: #ffb5a8 !important;
{% endif %}
}
ha-card::after {
content: '{% if state_attr(config.entity,'hvac_action') == 'idle' %} schedule {% else %} local_fire_department {% endif %}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 10px;
font-weight: 700;
font-family: 'Material Icons';
{% if state_attr(config.entity,'hvac_action') == 'idle' %}
background-color: rgba(var(--rgb-disabled), 1) !important;
{% else %}
background-color: rgba(var(--rgb-red), 1) !important;
{% endif %}
border-radius: 50%;
}
alignment: end
card_mod:
style: |
ha-card {
background: pink !important;
}
layout:
grid-template-columns: 33.3333% 66.6666%
grid-template-rows: auto
max_cols: 2
Keep in mind once you add the code you need to fully exit editing mode for it to take effect that it is stuck at the bottom.
This section is the important section:
:host {
position: sticky !important;
z-index: 9;
bottom: 0px;
}
great… thanks thanks and thanks.
last question: if i woul change background colors from pink/lightblue, or the background color of single chips from white to system auto (should be white on day and black during the night), should i change ‘background’, or delete? if i have to change in?
thank you again
You could probably just delete the section. It will then follow system default from the theme you are using.
yes, im only deleted the colour, so if im going to change idea i will set another colour.
Anyway, can you help me to set this menu? im finding to create a button to call this menù…
type: custom:local-conditional-card
default: show
id: prova
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Home
secondary: ''
icon: mdi:home
icon_color: white
fill_container: false
layout: vertical
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- rooms: toggle
card_mod:
style: |
ha-card {
width: 210px;
height: 20px;
--spacing: 0px;
padding-top: 10px !important;
//box-shadow: var(--ha-card-box-shadow) !important;
//border-radius: 10px 10px 10px 10px !important;
transition: all 0s;
--icon-size: 60px;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'white' if is_state('input_select.seleziona_stanza', 'Home') else 'none' }}), 0.4) !important;
}
- type: custom:mushroom-template-card
primary: Cucina
secondary: ''
icon: mdi:fridge
icon_color: white
fill_container: false
layout: vertical
entity: input_select.seleziona_stanza
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.seleziona_stanza
data:
option: Cucina
card_mod:
style: |
ha-card {
width: 210px;
height: 20px;
--spacing: 0px;
padding-top: 10px !important;
//box-shadow: var(--ha-card-box-shadow) !important;
//border-radius: 10px 10px 10px 10px !important;
transition: all 0s;
--icon-size: 60px;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'white' if is_state('input_select.seleziona_stanza', 'Cucina') else 'none' }}), 0.4) !important;
}
- type: custom:mushroom-template-card
primary: Salotto
secondary: ''
icon: mdi:sofa
icon_color: white
fill_container: false
layout: vertical
entity: input_select.seleziona_stanza
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.seleziona_stanza
data:
option: Salotto
card_mod:
style: |
ha-card {
width: 210px;
height: 20px;
--spacing: 0px;
padding-top: 10px !important;
//box-shadow: var(--ha-card-box-shadow) !important;
//border-radius: 10px 10px 10px 10px !important;
transition: all 0s;
--icon-size: 60px;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'white' if is_state('input_select.seleziona_stanza', 'Salotto') else 'none' }}), 0.4) !important;
}
card_mod:
style: |
ha-card {
position: fixed !important;
top: auto;
bottom: 75px;
left: 15px;
right: 0;
animation: slide-up 0.5s;
z-index: 5 !important;
width: 210px;
height: 400px !important;
padding: 0px;
overflow-y: hidden;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: 35px 35px 35px 35px !important;
}
@keyframes slide-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
persist_state: false
Thanks a lot.
the https://fonts.googleapis.com/icon?family=Material+Icons as a Stylesheet Resource seems not to work! what am I doing wrong?
I cant get the Tile-icon to change/animate, this is what I have, do anyone see any obvious errors?
features:
- type: target-temperature
- type: climate-hvac-modes
hvac_modes:
- 'off'
- heat
- dry
- cool
- fan_only
- heat_cool
type: tile
entity: climate.varmepumpe
card_mod:
style:
ha-tile-icon$: |
ha-svg-icon {
--card-mod-icon: mdi:fire;
animation: heat 2s infinite;
}
@keyframes heat {
0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
50% { --icon-color: rgba(var(--rgb-red), 0); }
}
Honestly dont know!
I went settings. Dashboard. Three dots top right menu. Resources. Add resources. Pasted in the URL. Select Style Sheet. Create.
Now I have to ask something again. sorry sorry sorry
Have now also already found in the great documentation some, which is important for styling.
How can I now still replace my mini climate card by Mush.
I’m just missing small chips above the slider, where I can show info,
so like mini-climate-card
type: custom:mushroom-climate-card
entity: climate.bad
icon: bha:thermostat
secondary_info: state
show_temperature_control: true
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container .button:nth-child(1) {
--card-mod-icon-color: rgb(255, 191, 0);
}
#container .button:nth-child(3) {
--card-mod-icon-color: rgb(255, 191, 0);
}
.: |
ha-state-icon {
color: rgb(255, 191, 0);
--icon-symbol-size: 34px;
}