it is possible, unfortunately I don’t have the ability for developer tools in chrome to see what element it is to change. I am sure someone else can help with finding the correct name to change.
I wanted to check out the Mushroom Card Mod and Style a little bit.
I have a shutter/cover dashboard for all of my Shutters. I configured them the following but wanted to add the some more syling.
Where should the card_mode code go in this example?
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Erdgeschoss
subtitle: ''
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.hwr
show_position_control: true
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.flur
show_position_control: true
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.gastebad
show_tilt_position_control: false
show_position_control: true
show_buttons_control: true
Thanks a lot for little guidance
Card Mod should go at the very end of the code and be at the top level
- type: custom:mushroom-cover-card
entity: cover.gastebad
show_tilt_position_control: false
show_position_control: true
show_buttons_control: true
card_mod:
style: |
ha-card {
1 Like
personally I always put it at the top of the card I am modding, just easier to read imo
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Erdgeschoss
subtitle: ''
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-cover-card
card_mod:
style: |
entity: cover.hwr
show_position_control: true
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.flur
show_position_control: true
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.gastebad
show_tilt_position_control: false
show_position_control: true
show_buttons_control: true
so this card mod will edit the cover card
1 Like
Anyone an idea?
maybe show in pictures what you want?
Something like this?
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': 'mdi:weather-snowy',
'snowy-rainy': 'mdi:weather-snowy-rainy'
} %} {{ icons[states(entity)|default('weather-cloudy-alert')] }}
icon_color: |
{% 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')] }}
primary: |
{% set descriptions = {
'sunny': 'Sunny',
'partlycloudy': 'Partly Cloudy',
'cloudy': 'Cloudy',
'clear-night': 'Clear Night',
'fog': 'Foggy',
'snowy': 'Snow',
'lightning-rainy': 'Thunderstorms',
'rainy': 'Rainy',
'snowy-rainy': 'Snowy Rainy'
} %} {{ descriptions[states(entity)] }}
secondary: '{{ states(''sensor.current_outdoor_temperature_bt1_30002'') | round(1) }}°C'
tap_action:
action: navigate
navigation_path: /panel-backend/weather_panel
hold_action:
action: none
double_tap_action:
action: none
fill_container: false
multiline_secondary: false
entity: weather.forecast_home
1 Like
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
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
The normal state of the entity has that
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'') }}'
Pity but no
Weather.home has no attribute containing the icon
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 %}
mm ok thx, will look further
another possible solution posted above
Overlooked that, got the colors now, thx
Hello
Is there any restriction on themes or other to make the animations working ?
I tried many examples but nothing move …
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);}
}
your code works for me. do you have card_mod installed?
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
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
HI!
do you think I can place the secondary info all to the right without using a fixed gap?
Thanks!!
Change Rows.
Gap will need to be adjusted depending on your primary text length. you can find the different types of flex direction here . yaml courtesy of @zanixmechanix
card_mod:
style:
mushroom-state-info$: |
.container {
flex-direction: row !important;
align-items: baseline;
gap: 10px;
}
