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;
}
I dont see how you would have space for it on a mobile dashboard, but like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.bedroom_heating
hvac_modes: []
show_temperature_control: true
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:thermometer
entity: climate.bedroom_heating
content: '{{state_attr(config.entity,''current_temperature'')}}'
- type: template
icon: mdi:water
entity: sensor.bedroom_temperature_humidity_humidity
content: '{{states(config.entity)}}'
- type: template
icon: mdi:thermometer
entity: climate.bedroom_heating
content: '{{state_attr(config.entity,''current_temperature'')}}'
- type: template
icon: mdi:thermometer
entity: climate.bedroom_heating
content: '{{state_attr(config.entity,''current_temperature'')}}'
alignment: end
card_mod:
style: |
ha-card {
position: absolute;
top: 12px;
right: 12px;
--chip-spacing: 0px !important;
}
You could maybe have the chips overlap slightly by changing the --chip-spacing to a negative number. Just to make it fit.
type: custom:stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.bedroom_heating
hvac_modes: []
show_temperature_control: true
name: Heating
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:thermometer
entity: climate.bedroom_heating
content: '{{state_attr(config.entity,''current_temperature'')}}'
- type: template
icon: mdi:water
entity: sensor.bedroom_temperature_humidity_humidity
content: '{{states(config.entity)}}'
- type: template
icon: mdi:thermometer
entity: climate.bedroom_heating
content: '{{state_attr(config.entity,''current_temperature'')}}'
- type: template
icon: mdi:thermometer
entity: climate.bedroom_heating
content: '{{state_attr(config.entity,''current_temperature'')}}'
alignment: end
card_mod:
style: |
ha-card {
position: absolute;
top: 12px;
right: 12px;
--chip-spacing: -8px !important;
}
2 Likes
THANKS! I am thrilled every time what you can conjure up here.
Since yesterday I am so taken by the Mushroom Cards that I want to convert as much as possible.
The Mush-Climate looks now already really great and ales important what I need to see.
Inn this area is now only the top navigation menu and the info buttons below no Mushroom.
