Frosty
September 6, 2024, 8:26pm
967
maybe something like this for icon
{% if is_state("weather.xxx","clear-day") %} mdi:weather-sunny {% elif is_state("weather.xxx","sunny") %} mdi:weather-sunny {% elif is_state("weather.xxx","clear") %} mdi:weather-sunny {% elif is_state("weather.xxx","clear-night") %} mdi:weather-night {% elif is_state("weather.xxx","rainy") %} mdi:weather-rainy {% elif is_state("weather.xxx","pouring") %} mdi:weather-pouring {% elif is_state("weather.xxx","snow") %} mdi:weather-snowy {% elif is_state("weather.xxx","fog") %} mdi:weather-fog {% elif is_state("weather.xxx","sleet") %} mdi:weather-partly-snowy-rainy {% elif is_state("weather.xxx","wind") %} mdi:weather-windy {% elif is_state("weather.xxx","cloudy") %} mdi:weather-cloudy {% elif is_state("weather.xxx","partlycloudy") %} mdi:weather-partly-cloudy {% elif is_state("weather.xxx","partly-cloudy-night") %} mdi:weather-night-partly-cloudy {% elif is_state("weather.xxx","hail") %} mdi:weather-hail {% elif is_state("weather.xxx","lightning") %} mdi:weather-lightning {% elif is_state("weather.xxx","tstorm") %} mdi:weather-lightning-rainy {% endif %}
1 Like
skank
September 7, 2024, 4:15pm
968
Hi yes, i was thinking of that too, to define what it should be, but the entity already has the right icon, so was wondering if i could just use that, instead of creating it all in a template…
Now its just text
If i do it your way, the mdi icon is grey and doesnt correspond the color of the state of the mdi either, for example rainy → blue, sunny->yellow… etc etc
Frosty
September 7, 2024, 5:46pm
969
do you have an attribute for the entity picture ?
if you did you could do this
type: custom:mushroom-template-card
primary: test
secondary: test
entity: weather.forecast_home
picture: '{{ state_attr(''weather.forecast_home'', ''entity_picture'') }}'
skank
September 7, 2024, 5:50pm
970
Pity but no
Frosty
September 7, 2024, 5:52pm
971
OK well copy this code add it to icon_color in the template yaml and change the mdi:xxxxx to the correct color
sadly I don’t know how else to do it sorry
{% if is_state("weather.xxx","clear-day") %} mdi:weather-sunny {% elif is_state("weather.xxx","sunny") %} mdi:weather-sunny {% elif is_state("weather.xxx","clear") %} mdi:weather-sunny {% elif is_state("weather.xxx","clear-night") %} mdi:weather-night {% elif is_state("weather.xxx","rainy") %} mdi:weather-rainy {% elif is_state("weather.xxx","pouring") %} mdi:weather-pouring {% elif is_state("weather.xxx","snow") %} mdi:weather-snowy {% elif is_state("weather.xxx","fog") %} mdi:weather-fog {% elif is_state("weather.xxx","sleet") %} mdi:weather-partly-snowy-rainy {% elif is_state("weather.xxx","wind") %} mdi:weather-windy {% elif is_state("weather.xxx","cloudy") %} mdi:weather-cloudy {% elif is_state("weather.xxx","partlycloudy") %} mdi:weather-partly-cloudy {% elif is_state("weather.xxx","partly-cloudy-night") %} mdi:weather-night-partly-cloudy {% elif is_state("weather.xxx","hail") %} mdi:weather-hail {% elif is_state("weather.xxx","lightning") %} mdi:weather-lightning {% elif is_state("weather.xxx","tstorm") %} mdi:weather-lightning-rainy {% endif %}
skank
September 7, 2024, 5:57pm
972
mm ok thx, will look further
Frosty
September 7, 2024, 6:14pm
973
another possible solution posted above
@skank
maybe show in pictures what you want?
Something like this?
[image]
The icon changes based on condition as does the weather state text.
type: custom:mushroom-template-card
icon: |
{% set icons = {
'sunny': 'mdi:weather-sunny',
'cloudy': 'mdi:weather-cloudy',
'partlycloudy': 'mdi:weather-partly-cloudy',
'rainy': 'mdi:weather-rainy',
'fog': 'mdi:weather-fog',
'lightning-rainy': 'mdi:weather-lightning-rainy',
'clear-night': 'mdi:weather-night',
'snowy': …
skank
September 7, 2024, 6:23pm
974
wgumaa:
{% set colors = {
'sunny': '#FFA500',
'cloudy': '#778899',
'partlycloudy': '#FF8C00',
'rainy': '#4169E1',
'fog': '#2F4F4F',
'lightning-rainy': '#5A5A5A',
'clear-night': 'deep-purple',
'snowy': '#cccccc',
'snowy-rainy': 'light-blue',
'default': 'black'
} %} {{ colors[states(entity)|default('default')] }}
Overlooked that, got the colors now, thx
jolypas
September 11, 2024, 6:03am
975
Hello
Is there any restriction on themes or other to make the animations working ?
example :
type: custom:mushroom-template-card
primary: Alerte Inondation Lave-Vaisselle
icon_color: |-
{% if states(entity) == 'on' %}
red
{% elif states(entity) == 'off' %}
green
{% endif %}
layout: horizontal
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
icon: mdi:water-alert
secondary: >
{{ states [
'binary_sensor.detecteur_inondation_water_leak'].last_changed.timestamp() |
timestamp_custom('%d/%m/%y %H:%M') }}
visibility:
- condition: state
entity: binary_sensor.detecteur_inondation_water_leak
state: 'on'
entity: binary_sensor.detecteur_inondation_water_leak
multiline_secondary: true
fill_container: true
card_mod:
style: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
Frosty
September 11, 2024, 10:45am
976
your code works for me. do you have card_mod installed?
jolypas
September 11, 2024, 12:53pm
977
I reinstalled and added
frontend:
themes: !include_dir_merge_named themes
extra_module_url:
- /local/card-mod.js
And it works now.
Thanks
1 Like
Dakononov
September 13, 2024, 4:37pm
978
Please help mefix this card! When I open an application “from scratch” on my iphone or a page in the browser, everything opens perfectly. But if I refresh the page or open the application from the tray, the icons move. It turns out that the markdown section disappears for some reason.If i press refresh 5-6 times the card loading properly. Need help (
markdown section
- type: markdown
content: >
<font size=3px>Кухня <br> <font size=5px><font color=black> {{
states('sensor.0x00158d00090e5b38_temperature') | round(1) }}°C
<font size=2px><font color=grey>
{{states('sensor.0x00158d00090e5b38_humidity') | round(1) }}%
view_layout:
grid-area: template1
card_mod:
style: |
ha-markdown {
padding: 0 0 0 3px !important;
}
ha-card {
background-color: transparent;
}
FULL CODE
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 80% 20%
grid-template-rows: 4
grid-template-areas: |
"template1 zone1"
"d1 zone2"
"d1 zone3"
"icon zone4"
"icon zone5"
cards:
- type: markdown
content: >
<font size=3px>Кухня <br> <font size=5px><font color=black> {{
states('sensor.0x00158d00090e5b38_temperature') | round(1) }}°C
<font size=2px><font color=grey>
{{states('sensor.0x00158d00090e5b38_humidity') | round(1) }}%
view_layout:
grid-area: template1
card_mod:
style: |
ha-markdown {
padding: 0 0 0 3px !important;
}
ha-card {
background-color: transparent;
}
- type: custom:mushroom-template-card
entity: cover.0xa4c138096b674584
content_info: none
use_light_color: true
icon: mdi:curtains
icon_color: grey
view_layout:
grid-area: d1
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--icon-symbol-size: 17px;
--icon-size: 0px;
--ha-card-background: none;
margin-top: -20px;
margin-left: -110px;
- type: custom:mushroom-template-card
icon: ytz:soup-plate
entity: switch.0x54ef441000579805_right
primary: ''
secondary: ''
tap_action:
action: toggle
double_tap_action:
action: navigate
navigation_path: kitchen
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''#b7c3c7'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
view_layout:
grid-area: icon
card_mod:
style: |
ha-card {
--icon-symbol-size: 90px;
--icon-size: 130px;
--ha-card-background: none;
--box-shadow: none;
bottom: 55px !important;
right: 35px !important;
}
ha-state-icon {
padding-bottom: 12px;
}
- type: custom:mushroom-template-card
entity: switch.0x54ef441000579805_left
icon: mdi:ceiling-light
icon_color: |-
{% if is_state ('switch.0x54ef441000579805_left', 'on')%}
orange
{% else %}
grey
{% endif %}
fill_container: false
tap_action:
action: toggle
view_layout:
grid-area: zone1
card_mod:
style: |
ha-card {
--icon-symbol-size: 25px;
--icon-size: 30px;
--ha-card-background: none;
margin-top: -10px;
margin-left: -6px;
}
- type: custom:mushroom-template-card
entity: fan.airfresh_kitchen_150
icon: mdi:fan
icon_color: |-
{% if is_state ('fan.airfresh_kitchen_150', 'on')%}
green
{% else %}
#98a2a6
{% endif %}
tap_action:
action: toggle
hold_action:
action: none
view_layout:
grid-area: zone2
card_mod:
style: |
ha-card {
--icon-symbol-size: 23px;
--icon-size: 30px;
--ha-card-background: none;
margin-top: -45px;
margin-left: -6px;
}
ha-state-icon {
{% set s = state_attr('fan.airfresh_kitchen_150', 'percentage') %}
{% if (s == 1 ) %}
animation: spin 10s linear infinite;
{%- elif s == 67 %}
animation: spin 3s linear infinite;
{%- elif s == 89 %}
animation: spin 1s linear infinite;
{% else %}
{% endif %}
}
- type: custom:mushroom-template-card
entity: input_boolean.lyko_ballu_kitchen_switch
content_info: none
use_light_color: true
icon: mdi:snowflake
icon_color: |-
{% if is_state ('input_boolean.lyko_ballu_kitchen_switch', 'on')%}
blue
{% else %}
grey
{% endif %}
view_layout:
grid-area: zone3
card_mod:
style: |
ha-card {
--icon-symbol-size: 23px;
--icon-size: 30px;
--ha-card-background: none;
margin-top: -24px;
margin-left: -6px;
- type: custom:mushroom-template-card
entity: media_player.50pus8507_60_3
content_info: none
use_light_color: true
icon: mdi:television-classic
icon_color: |-
{% if is_state ('media_player.50pus8507_60_3', 'on')%}
blue
{% else %}
grey
{% endif %}
view_layout:
grid-area: zone4
card_mod:
style: |
ha-card {
--icon-symbol-size: 23px;
--icon-size: 30px;
--ha-card-background: none;
margin-top: -22px;
margin-left: -6px;
- type: custom:mushroom-template-card
entity: switch.0x54ef441000579805_left
icon: mdi:ceiling-light
icon_color: |-
{% if is_state ('switch.0x54ef441000579805_left', 'on')%}
orange
{% else %}
grey
{% endif %}
fill_container: false
tap_action:
action: toggle
view_layout:
grid-area: zone5
card_mod:
style: |
ha-card {
--icon-symbol-size: 25px;
--icon-size: 30px;
--ha-card-background: none;
margin-top: -77px;
margin-left: -6px;
}
card_mod:
style: |
ha-card {
background-color: rgba(224,234,237,1) !important;
height:200px !important;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Коридор
secondary: '{{ states(''sensor.0x00158d000709bf12_temperature'') | round(1) }} °C'
icon: hue:room-other
entity: switch.0x54ef4410005e68a0_left
tap_action:
action: toggle
double_tap_action:
action: navigate
navigation_path: kitchen
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''#b7c3c7'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
ha-card {
--icon-symbol-size: 50px;
--icon-size: 80px;
margin-top: -20px;
margin-left: -20px;
--card-primary-font-size: 16px;
--card-secondary-font-size: 13px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
entity: switch.0x54ef4410005e68a0_right
icon: mdi:lock
tap_action:
action: toggle
hold_action:
action: none
icon_color: |-
{% if is_state ('switch.0x54ef4410005e68a0_right', 'on')%}
orange
{% else %}
grey
{% endif %}
- type: spacer
- type: template
double_tap_action:
action: none
entity: switch.0x54ef4410005e68a0_right
icon: hue:bulb-group-recessed-ceiling
tap_action:
action: toggle
hold_action:
action: none
icon_color: |-
{% if is_state ('switch.0x54ef4410005e68a0_right', 'on')%}
orange
{% else %}
grey
{% endif %}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -7px;
--chip-icon-size: 21px;
margin-top: -23px;
}
card_mod:
style: |
ha-card {
background-color: rgba(224,234,237,1) !important;
margin-top: 0px;
height:100px !important;
}
1 Like
mrrouge
September 14, 2024, 9:10am
979
HI!
do you think I can place the secondary info all to the right without using a fixed gap?
Change Rows.here . yaml courtesy of @zanixmechanix
card_mod:
style:
mushroom-state-info$: |
.container {
flex-direction: row !important;
align-items: baseline;
gap: 10px;
}
Juanpermon
September 16, 2024, 7:41am
980
Hi there. It is not working for me. IT isd supposed to have a red slider but it is not.
Juanpermon
September 16, 2024, 10:22am
981
I have this code
type: custom:mushroom-chips-card
chips:
- type: entity
entity: light.luces_todas
content_info: none
card_mod:
style:
mushroom-entity-chip:nth-child(1) $ mushroom-chip $: |
ha-card {
color:
{% if is_state('light.luces_todas', 'on') %}
lightgreen;
{% else %}
red;
{% endif %}
}
I don’t understand the 9 line (but it surpringly works). But it only works with green color (so, when ON), but it doesn’t work with the red color (when off). I can’t find the problem. Could you help me. Thanks.
PS: The codes for chip icon color you posted didin’t work for me
Frosty
September 16, 2024, 6:46pm
982
you need to check out the guide especially the section at the bottom.
soo
September 18, 2024, 5:14pm
983
how can i totally disable shape using theme yaml
card-mod-card-yaml: |
.: |
ha-card.type-custom-mushroom-light-card
{
....
}
Or maybe there is more graceful way?
akcapak
September 18, 2024, 10:34pm
984
How can i make the mushroom-light-card a bit higher in size (more padding to make the click area bigger)? Since one of the last HA updates my card_mod code does not work anymore (i am using sections)…
card_mod:
style: |
mushroom-state-item {
padding-top: 5px;
padding-bottom: 5px;
}
when i wrap a horizontal-stack card, and inside mushroom-light-card with the same card_mod, it is working.
Without horizontal-stack (still default size, paddings do not work anymore):
Within horizontal-stack card (bigger):
Strangely enough, when i click on the light and it goes on, also the first version without horizontal stack shows the 5x paddings:
Frosty
September 18, 2024, 10:39pm
985
type: custom:mushroom-light-card
entity: light.lights_off
card_mod:
style: |
ha-card {
padding-top: 50px;
padding-bottom: 50px;
}
EDIT sorry you want a bigger click area!
type: custom:mushroom-light-card
entity: light.lights_off
card_mod:
style: |
mushroom-state-item {
padding-top: 50px;
padding-bottom: 50px;
}
this works fine for me
but doesn’t if it’s in the new sections dashboard
FINAL EDIT
type: grid
cards:
- type: custom:mushroom-light-card
entity: light.lights_off
card_mod:
style: |
mushroom-state-item {
padding-top: 50px;
padding-bottom: 50px;
}
layout_options:
grid_columns: 4
grid_rows: 2
column_span: 2
This works in sections depending on how many columns it spans
akcapak
September 19, 2024, 6:00am
986
thank you, but i already have that solution with a wrapper (horizontal-stack in my case, grid in your case).
