Did you find out how to get rid of the opacity on --shape-color?
Could do it individually like this but it would be cool to able to set the opacity like with a --shape-color-opacity
mushroom-shape-icon {
--shape-color: red !important;
}
Here you go.
There is a pusing function in there you can just take out, use it for stopping and starting the heating on various conditions.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-title-card
title: Climate
subtitle: ''
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 14px !important;
}
primary: Thermostat
secondary: |
Currently: {{ state_attr('climate.home', 'hvac_action') }}
icon: |-
{% set mode = state_attr('climate.home', 'hvac_action') %}
{% set off = states('climate.home') %}
{% if off == 'off' %}
mdi:radiator-off
{% elif mode == 'idle' %}
mdi:radiator-disabled
{% elif mode == 'heating' %}
mdi:radiator
{% else %}
mdi:radiator-off
{% endif %}
icon_color: |-
{% set status = state_attr('climate.home','hvac_action') %}
{% if status == 'heating' %}
red
{% else %}
grey
{% endif %}
tap_action: none
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #6f6f6f;
}
entity: climate.home
header:
name: false
icon: false
decimals: '1'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '0.5'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
--st-mode-background: #2d2d2d;
margin-left: 12px;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.home
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off':
name: Power
heat:
name: Heat
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em
}
alignment: justify
chips:
- type: template
content: '{{state_attr(entity, "current_temperature")}} °C'
entity: climate.home
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% else %}
grey
{% endif %}
style: |
ha-card {
margin-left: 6px;
}
- type: template
double_tap_action:
action: none
content: >-
{{ states(entity) }} {{ state_attr(entity, "unit_of_measurement")
}}
entity: sensor.humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: template
double_tap_action:
action: none
content: >-
{{ states(entity) }} {{ state_attr(entity, "unit_of_measurement")
}}
entity: sensor.average_indoor_pressure_downstairs
icon: mdi:gauge
icon_color: grey
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: input_boolean.heating_paused
state: 'on'
chip:
type: template
content: '{{ states(entity) }}'
entity: input_text.heating_paused_by
icon: mdi:pause
icon_color: yellow
tap_action:
action: none
hold_action:
action: call-service
service: script.turn_on
target:
entity_id: script.heating_on
double_tap_action:
action: none
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.thermostat_dropdown
icon_color: disabled
style: |
ha-card {
--chip-icon-size: 1em
}
- type: conditional
conditions:
- entity: input_boolean.thermostat_dropdown
state: 'on'
card:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
entity: sensor.average_indoor_temperature_downstairs
primary: >-
{{ states(entity) }} {{ state_attr(entity,
"unit_of_measurement") }}
secondary: Inside
icon_color: |-
{% set temp = states(entity) %}
{% if temp >= '19' %}
red
{% elif temp >= '17' and temp < '19' %}
orange
{% elif temp == 'unknown' %}
grey
{% else %}
blue
{% endif %}
icon: mdi:home-thermometer-outline
- type: custom:mushroom-template-card
entity: sensor.outdoor_temperature
primary: >-
{{ states(entity) }} {{ state_attr(entity,
"unit_of_measurement") }}
secondary: Outside
icon_color: |-
{% set temp = states(entity) %}
{% if temp >= '19' %}
red
{% elif temp >= '17' and temp < '19' %}
orange
{% elif temp == 'unknown' %}
grey
{% else %}
blue
{% endif %}
icon: mdi:thermometer
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.6px;
--st-mode-background: #2d2d2d;
margin-right: 12px;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 6px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.home
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:mini-graph-card
entities:
- sensor.average_indoor_temperature_downstairs
- sensor.outdoor_temperature
color_thresholds:
- value: 18
color: '#039be5'
- value: 19
color: '#f39c12'
- value: 20
color: '#d35400'
- value: 21
color: '#c0392b'
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
labels: true
icon: false
state: false
legend: false
fill: fade
What are you trying to do? Set the preset mode?
yes, toggle between ‘boost’ and ‘none’.
Try creating a custom button instead where the value_template is whether or not preset_mode is boost and the turn_on action would be setting the preset_mode to boost and turn_off would be none
There is good examples in the doc: Template Switch - Home Assistant
Can you tell me where I’m wrong the icons have to follow the same state and I can’t resize the ka card can you help me??? Thank you
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 42px auto
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: sensor.netatmo_casa_sala_da_pranzo_ripostiglio_temperature
icon: mdi:thermometer
icon_color: |-
{% set temp = states(entity) | int %}
{% if temp > 40%}
red
{% elif temp > 33 %}
red
{% elif temp > 22 %}
green
{% elif temp > 16 %}
cyan
{% elif temp > -5 %}
white
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
############### Ripostiglio ################
entity: sensor.netatmo_casa_sala_da_pranzo_ripostiglio_temperature
height: 42px
min: '-5'
max: '50'
entity_row: true
severity:
- color: rgb(var(--mush-rgb-white))
from: -5
to: 15
- color: rgb(var(--mush-rgb-cyan))
from: 16
to: 21
- color: rgb(var(--mush-rgb-green))
from: 22
to: 32
- color: rgb(var(--mush-rgb-red))
from: 33
to: 50
positions:
icon: 'off'
indicator: 'off'
card_mod:
style: |
ha-card {
padding: 12px;
margin-left: 12px;
--bar-card-border-radius: 12px;
--mush-rgb-red: 244, 67, 54;
--mush-rgb-pink: 233, 30, 99;
--mush-rgb-purple: 156, 39, 176;
--mush-rgb-deep-purple: 103, 58, 183;
--mush-rgb-indigo: 63, 81, 181;
--mush-rgb-blue: 33, 150, 243;
--mush-rgb-light-blue: 3, 169, 244;
--mush-rgb-cyan: 0, 188, 212;
--mush-rgb-teal: 0, 150, 136;
--mush-rgb-green: 76, 175, 80;
--mush-rgb-light-green: 139, 195, 74;
--mush-rgb-lime: 205, 220, 57;
--mush-rgb-yellow: 255, 235, 59;
--mush-rgb-amber: 255, 193, 7;
--mush-rgb-orange: 255, 152, 0;
--mush-rgb-deep-orange: 255, 87, 34;
--mush-rgb-brown: 121, 85, 72;
--mush-rgb-grey: 158, 158, 158;
--mush-rgb-blue-grey: 96, 125, 139;
--mush-rgb-black: 0, 0, 0;
--mush-rgb-white: 255, 255, 255;
}
bar-card-value {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-name {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
############## Sala Da Pranzo ################
- type: custom:mushroom-template-card
entity: sensor.netatmo_casa_sala_da_pranzo_temperature
icon: mdi:thermometer
icon_color: |-
{% set temp = states(entity) | int %}
{% if temp > 40%}
red
{% elif temp > 33 %}
red
{% elif temp > 22 %}
green
{% elif temp > 16 %}
cyan
{% elif temp > -5 %}
white
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
entity: sensor.netatmo_casa_sala_da_pranzo_temperature
height: 42px
min: '-5'
max: '50'
entity_row: true
severity:
- color: rgb(var(--mush-rgb-white))
from: -5
to: 15
- color: rgb(var(--mush-rgb-cyan))
from: 16
to: 21
- color: rgb(var(--mush-rgb-green))
from: 22
to: 32
- color: rgb(var(--mush-rgb-red))
from: 33
to: 50
positions:
icon: 'off'
indicator: 'off'
card_mod:
style: |
ha-card {
padding: 12px;
margin-left: 12px;
--bar-card-border-radius: 12px;
--mush-rgb-red: 244, 67, 54;
--mush-rgb-pink: 233, 30, 99;
--mush-rgb-purple: 156, 39, 176;
--mush-rgb-deep-purple: 103, 58, 183;
--mush-rgb-indigo: 63, 81, 181;
--mush-rgb-blue: 33, 150, 243;
--mush-rgb-light-blue: 3, 169, 244;
--mush-rgb-cyan: 0, 188, 212;
--mush-rgb-teal: 0, 150, 136;
--mush-rgb-green: 76, 175, 80;
--mush-rgb-light-green: 139, 195, 74;
--mush-rgb-lime: 205, 220, 57;
--mush-rgb-yellow: 255, 235, 59;
--mush-rgb-amber: 255, 193, 7;
--mush-rgb-orange: 255, 152, 0;
--mush-rgb-deep-orange: 255, 87, 34;
--mush-rgb-brown: 121, 85, 72;
--mush-rgb-grey: 158, 158, 158;
--mush-rgb-blue-grey: 96, 125, 139;
--mush-rgb-black: 0, 0, 0;
--mush-rgb-white: 255, 255, 255;
}
bar-card-value {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-name {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
#############################
columns: '2'
title: Temperature Casa
entity_row: true
icon: mdi:thermometer
color: red
Can you explain why my message was deleted. Thanks
{% set temp = states(entity) | int %} probably rounds 22.2 down to 22, and then the if-statement {% elif temp > 22 %} is false, resulting not in green but in cyan color.
Probably because you didn’t write in English?
1 Like
Hey everyone. I’m working on a mushroom-based card for my RBGW bulbs and I’m in the process of leveraging Chips as presets for the bulbs. At present, I’m trying to determine whether it is possible to colorize the Chips (shown below) in such a way that they correlate to the temperature of the Preset. I attempted to leverage the built in icon_color: feature but that didn’t quite fit the bill. I’m specifically looking to colorize the icons using the Kelvin values of 4800, 3500, and 2700, although having the ability to configure any kelvin value would be ideal.
Is what I am suggesting possible? Perhaps with card_mod? Thanks in advance for your feedback.
chips:
- type: action
tap_action:
action: call-service
service: light.turn_on
data:
kelvin: 4800
target:
entity_id: light.all_livingroom_bulbs
icon: mdi:lightbulb
3 Likes
Thanks to all for the inspiration on this thread, thought I would share a snippet of my in-progress dashboard.
7 Likes
Where did you get those cool faces?
The faces are exported memojis from my Mac
1 Like
Hello, i have the alarmo card with the ios dark theme. My plan is to integrate in the alarmo card two buttons for the motion sensors and for the door sensors, like you in the picture. When i press one of the buttons a popup should show me the sensors. Is this possible and can you give me some tips?
Best regards
Stefan
hello, very nicely made, I have a few questions
1 would you like to share the code ?
2 how did you do the heart rate ?
Great tips as usual. Is there a way to change the color WITHIN an element like secondary:after so for example the temperature in your last example would be green while the humidity would be blue?
Is this also possible as a chip card?
I’m new to the mushroom cards. But it looks very nice!
I’m wondering if the next thing is possible:
I have now 3 chips with:
- number of covers 100% closed
- number of covers 100% opened
- number of covers partially open
type: custom:mushroom-chips-card
chips:
- type: template
content: >-
{{ expand(states.cover.covers) | selectattr('attributes.current_position', 'eq', 0) | list | count }}
icon: mdi:window-shutter
- type: template
content: >-
{{ expand(states.cover.covers) | selectattr('attributes.current_position', 'eq', 100) | list | count }}
icon: mdi:window-shutter-open
- type: template
content: >-
{{ expand(states.cover.covers) | selectattr('attributes.current_position', '<', 100) | selectattr('attributes.current_position', '>', 0) list |count}}
icon: mdi:window-shutter-alert
alignment: center
- I want to show this in one chip
- When there is no covers closed, no covers openend no partially open then I would like to have that part not visible?
Is that possible?
8 Likes
type: template
entity: sensor.wu_current_temperature
icon: |-
{% set t = states('weather.openweathermap') %}
{% if t == "clear-night" %} mdi:weather-night
{% elif t == "cloudy" %} mdi:weather-cloudy
{% elif t == "fog" %} mdi:weather-fog
{% elif t == "hail" %} mdi:weather-hail
{% elif t == "lightning" %} mdi:weather-lightning
{% elif t == "lightning-rainy" %} mdi:weather-lightning-rainy
{% elif t == "partlycloudy" %} mdi:weather-partly-cloudy
{% elif t == "pouring" %} mdi:weather-pouring
{% elif t == "rainy" %} mdi:weather-rainy
{% elif t == "snowy" %} mdi:weather-snowy
{% elif t == "snowy-rainy" %} mdi:weather-snowy-rainy
{% elif t == "sunny" %} mdi:weather-sunny
{% elif t == "windy" %} mdi:weather-windy
{% elif t == "windy-variant" %} mdi:weather-windy-variant
{% elif t == "exceptional" %} mdi:weather-sunny
{% else %} mdi:weather-cloudy
{% endif %}
icon_color: ''
content: >-
{{ states('sensor.wu_current_temperature')|int }}° / {{
states('sensor.wu_wind')|int }}mph
tap_action:
action: navigate
navigation_path: /dashboard-1/weather
Thought that I would share a template chips card that selects icon based on a weather entity’s condition (state) and return the icon. I wanted to create this template card because I wanted to include wind speed. I couldn’t find any pre-formatted code to select the weather entity’s icon if it wasn’t attributed, so here you go. 
edit: for anyone new, the main chips entity (sensor.wu_current_temperature) doesn’t matter in this case.
5 Likes
Hello, a big thank you to all for your example and sharing,
I have a multimedia card that someone shared and I would like the playlists to hide or open with a button but I can’t find how to do it
I hope to make myself understood because French and I use a translator
here is my code
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 61% 39%
grid-template-rows: auto
cards:
- type: custom:mushroom-media-player-card
entity: media_player.android_tv_192_168_1_31
name: Android Tv
layout: horizontal
tap_action:
action: toggle
hold_action:
action: more-info
use_media_artwork: true
style: |
ha-card {
box-shadow: 0px 0px;
- type: conditional
conditions:
- entity: media_player.android_tv_192_168_1_31
state_not: 'off'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:play
icon_color: '#048b9a'
show_icon: false
name: test
tap_action:
action: call-service
service: media_player.media_play
service_data:
entity_id: media_player.android_tv_192_168_1_31
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
icon: mdi:pause
icon_color: '#048b9a'
tap_action:
action: call-service
service: media_player.media_pause
service_data:
entity_id: media_player.android_tv_192_168_1_31
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
icon_color: '#048b9a'
icon: mdi:stop
tap_action:
action: call-service
service: media_player.media_stop
service_data:
entity_id: media_player.android_tv_192_168_1_31
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
icon: mdi:skip-forward
icon_color: '#048b9a'
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: media_player.android_tv_192_168_1_31
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
alignment: center
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:plus
icon_color: '#048b9a'
tap_action:
action: call-service
service: media_player.volume_up
service_data:
entity_id: media_player.android_tv_192_168_1_31
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
card_mod: null
content: >-
{{ state_attr('media_player.android_tv_192_168_1_31',
'volume_level') | round(2,default="0") }}
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
icon: mdi:minus
icon_color: '#048b9a'
tap_action:
action: call-service
service: media_player.volume_down
service_data:
entity_id: media_player.android_tv_192_168_1_31
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
alignment: center
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:playlist-music
icon_color: '#048b9a'
primary: Rap Us
vertical: true
tap_action:
action: call-service
service: script.start_playlist_tv1
- type: custom:mushroom-template-card
icon: mdi:playlist-music
icon_color: '#048b9a'
vertical: true
primary: Rock
tap_action:
action: call-service
service: script.start_playlist_tv2
- type: custom:mushroom-template-card
icon: mdi:playlist-music
vertical: true
icon_color: '#048b9a'
primary: Red Hot
tap_action:
action: call-service
service: script.start_playlist_tv3
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:playlist-music
icon_color: '#048b9a'
primary: Led Zep
vertical: true
tap_action:
action: call-service
service: script.start_playlist_tv4
- type: custom:mushroom-template-card
icon: mdi:playlist-music
icon_color: '#048b9a'
vertical: true
primary: Placebo
tap_action:
action: call-service
service: script.start_playlist_tv5
- type: custom:mushroom-template-card
icon: mdi:playlist-music
vertical: true
icon_color: '#048b9a'
primary: Nirvana
tap_action:
action: call-service
service: script.start_playlist_tv6
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 9px black;
border-radius: 0%;
}