Please refer to the correct thread
1 Like
So it seems the latest card mod update has decided to break a lot of peoples dashboards, my energy use page is pretty screwed up.
I did have some aspects that were using card: mod-card which I have now removed as it is no longer needed apparently but have lost formatting on quite a lot of stuff. Anybody else in the midst of trying to fix this mess and can offer any insight?
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-title-card
title: Yesterdays Cost
subtitle: ""
card_mod:
style:
mushroom-title-card$: |
.title {
--card-primary-color: rgb(var(--rgb-black));
--title-font-size: 15px;
--title-font-weight: 350;
text-align: center;
}
.subtitle {
--card-secondary-color: rgb(var(--rgb-red));
--subtitle-font-size: 32px;
--subtitle-font-weight: bolder;
}
.header {
--title-padding: 0px 5px 5px;
margin-top: -5px;
}
- type: custom:mushroom-template-card
primary: " Ā£{{ '%.2f'|format(states('sensor.yesterday_energy_cost')|float(default=0.0)|round(2)) }}"
icon: ""
tap_action:
action: more-info
entity: sensor.energy_total_cost
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 0px 0px 0px black;
--card-primary-font-weight: 400;
--card-primary-color:
{% set demand = states('sensor.yesterday_energy_cost') | float %}
{% if demand < 3.00 %}
green;
{% elif 3.00 <= demand <= 4.50 %}
orange;
{% else %}
red;
{% endif %};
--card-primary-font-size: 35px;
text-align: center;
margin-top: -25px;
padding-top: 5px;
padding-bottom: 5px;
}
.: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.00);
box-shadow: none;
border-radius: 15px;
background-color: white;
}
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.00);
box-shadow: 1px;
border-radius: 15px;
background-color: white;
height: 75px;
}
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-title-card
title: Todays Cost
subtitle: ""
card_mod:
style:
mushroom-title-card$: |
.title {
--card-primary-color: rgb(var(--rgb-black));
--title-font-size: 15px;
--title-font-weight: 350;
text-align: center;
}
.subtitle {
--card-secondary-color: rgb(var(--rgb-red));
--subtitle-font-size: 32px;
--subtitle-font-weight: bolder;
}
.header {
--title-padding: 0px 5px 5px;
margin-top: -5px;
}
- type: custom:mushroom-template-card
primary: " Ā£{{ '%.2f'|format(states('sensor.energy_total_cost')|float(default=0.0)|round(2)) }}"
icon: ""
tap_action:
action: more-info
entity: sensor.energy_total_cost
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 0px 0px 0px black;
--card-primary-font-weight: 400;
--card-primary-color:
{% set demand = states('sensor.energy_total_cost') | float %}
{% if demand < 3.00 %}
green;
{% elif 3.00 <= demand <= 4.50 %}
orange;
{% else %}
red;
{% endif %};
--card-primary-font-size: 35px;
text-align: center;
margin-top: -25px;
padding-top: 5px;
padding-bottom: 5px;
}
.: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.00);
box-shadow: none;
border-radius: 15px;
background-color: white;
}
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.00);
box-shadow: 1px;
border-radius: 15px;
background-color: white;
height: 75px;
}
Ah, the card_mod update is the reason why all my nice icon animations stopped working. Need to look into it.
1 Like
@GTunney Yes having problems.
The card mod applied with the @media queries for the whole custom:mushroom-chips-card is working
card_mod:
style: |
@media (orientation: portrait) and (max-width: 768px) {
ha-card {
z-index:1;
position: fixed;
bottom: 5px;
left: 5px;
width: calc(100% - 10px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px!important;
}
}
@media (orientation: portrait) and (min-width: 769px) {
ha-card {
z-index:1;
position: fixed;
bottom: 10px;
left: 50px;
width: calc(100% - 100px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
--chip-height: 60px;
--chip-border-radius: 50%;
--chip-icon-size: 30px;
}
}
@media (orientation: landscape) and (min-width: 1281px) {
ha-card {
z-index:1;
position: fixed;
bottom: 5px;
left: 100px;
width: calc(100% - 200px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
--chip-height: 55px;
--chip-border-radius: 50%;
--chip-icon-size: 30px;
}
}
@media (orientation: landscape) and (min-height: 600px) and (max-height: 800px) and
(max-width: 1280px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 5px;
left: 50px;
width: calc(100% - 100px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
--chip-height: 55px;
--chip-border-radius: 50%;
--chip-icon-size: 30px;
}
}
but the card mod for the individual chips is not.
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'off'
chip:
type: template
tap_action:
action: toggle
entity: input_boolean.chips_menu_toggle
icon: mdi:unfold-more-vertical
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,225,226,1) 100%);
}
Managed to get some colour back to my mushroom chips cards by using mushroom theme variables, details in below post
if youāre moving back to card_mod 3.4.4 you would need to re-instate those mod-card config
How do you re-instate?
just re-add them 
I have copied and pasted my sticky menu mushrooms chip card to a new dashboard and it still is not working.
STRANGE THING When opening the app on my phone the colours of the buttons are applied through card-mod. When on computer (Chrome & Edge) the colours are not applied.
could be it is still loading the previous config from cache?
I just deleted all cached images and files. Same behavior in both edge and chrome.
card-mod applied with the media queries is respected. card-mod applied to the individual chips is not respected.
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: input_boolean.kiosk_mode_toggle
state: 'on'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'off'
chip:
type: template
tap_action:
action: toggle
entity: input_boolean.kiosk_mode_toggle
icon: mdi:menu
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,194,226,1) 100%);
}
}
- type: conditional
conditions:
- condition: screen
media_query: '(min-height: 801px) and (min-width: 768px)'
- condition: state
entity: input_boolean.kiosk_mode_toggle
state: 'on'
chip:
type: back
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,194,226,1) 100%);
}
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.kiosk_mode_toggle
state: 'off'
chip:
type: template
tap_action:
action: toggle
entity: input_boolean.kiosk_mode_toggle
icon: mdi:monitor-screenshot
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,194,226,1) 100%);
}
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'off'
- condition: screen
media_query: '(min-height: 1920px)'
chip:
type: template
tap_action:
action: navigate
navigation_path: /lovelace-media/music-assistant-iframe
entity: null
icon: mdi:music
card_mod:
style: |
ha-card {
border: 2.0px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(216,226,43,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'off'
- condition: screen
media_query: '(max-height: 1919px)'
chip:
type: template
tap_action:
action: navigate
navigation_path: >-
https://ifouiz3rfiho185v4nkjxadhyfhss651.ui.nabu.casa/d5369777_music_assistant_beta/ingress
entity: null
icon: mdi:music
card_mod:
style: |
ha-card {
border: 2.0px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(216,226,43,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.kiosk_mode_toggle
state: 'on'
- condition: state
entity: switch.home_and_away_switch
state: 'on'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'off'
chip:
type: template
tap_action:
action: toggle
entity: switch.home_and_away_switch
icon: mdi:home-account
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,226,49,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: switch.home_and_away_switch
state: 'off'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'off'
chip:
type: template
tap_action:
action: toggle
entity: switch.home_and_away_switch
icon: mdi:home-export-outline
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(226,43,43,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
- condition: and
conditions:
- condition: or
conditions:
- condition: screen
media_query: '(orientation: landscape) and (min-width: 1281px)'
- condition: screen
media_query: '(orientation: portrait) and (min-width: 769px)'
chip:
type: template
tap_action:
action: navigate
navigation_path: /3d-home/3d-home
icon: mdi:floor-plan
entity: null
icon_color: white
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: '(orientation: portrait) and (max-width: 768px)'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: navigate
navigation_path: /3d-home/3d-home
icon: mdi:floor-plan
entity: null
icon_color: white
card_mod:
style: |
ha-card {
border: 1px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: >-
(orientation: landscape) and (max-height: 800px) and
(max-width: 1280px)
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: toggle
entity: script.dash_3d_home_1080
hold_action:
action: navigate
navigation_path: /3d-home/3d-home
icon: mdi:floor-plan
card_mod:
style: |
ha-card {
border: 1.0px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
- condition: and
conditions:
- condition: or
conditions:
- condition: screen
media_query: '(orientation: landscape) and (min-width: 1281px)'
- condition: screen
media_query: '(orientation: portrait) and (min-width: 769px)'
chip:
type: template
tap_action:
action: navigate
navigation_path: /lovelace-custom/weather-all-devices
icon: mdi:weather-rainy
entity: null
icon_color: white
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: '(orientation: portrait) and (max-width: 768px)'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: navigate
navigation_path: /lovelace-custom/weather-all-devices
icon: mdi:weather-lightning
entity: null
icon_color: white
card_mod:
style: |
ha-card {
border: 1px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: >-
(orientation: landscape) and (max-height: 800px) and
(max-width: 1280px)
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: toggle
entity: script.weather_page
hold_action:
action: navigate
navigation_path: /lovelace-custom/weather-all-devices
icon: mdi:weather-lightning-rainy
card_mod:
style: |
ha-card {
border: 1.0px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
- condition: and
conditions:
- condition: or
conditions:
- condition: screen
media_query: '(orientation: landscape) and (min-width: 1281px)'
- condition: screen
media_query: '(orientation: portrait) and (min-width: 769px)'
chip:
type: template
tap_action:
action: navigate
navigation_path: /garden-all-devices/garden-irrigation
icon: mdi:flower
entity: null
icon_color: white
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: '(orientation: portrait) and (max-width: 768px)'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: navigate
navigation_path: /garden-all-devices/garden-irrigation
icon: mdi:flower
entity: null
icon_color: white
card_mod:
style: |
ha-card {
border: 1px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: >-
(orientation: landscape) and (max-height: 800px) and
(max-width: 1280px)
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: toggle
entity: script.dash_garden
hold_action:
action: navigate
navigation_path: /garden-all-devices/garden-irrigation
icon: mdi:flower
card_mod:
style: |
ha-card {
border: 1.0px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
- condition: and
conditions:
- condition: or
conditions:
- condition: screen
media_query: '(orientation: landscape) and (min-width: 1281px)'
- condition: screen
media_query: '(orientation: portrait) and (min-width: 769px)'
chip:
type: template
entity: null
tap_action:
action: navigate
navigation_path: /fish-tank-panel/panel
icon: mdi:fishbowl-outline
icon_color: white
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: '(orientation: portrait) and (max-width: 768px)'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
entity: null
tap_action:
action: navigate
navigation_path: /fish-tank-panel/mobile
icon: mdi:fishbowl-outline
icon_color: white
card_mod:
style: |
ha-card {
border: 1px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: >-
(orientation: landscape) and (max-height: 800px) and
(max-width: 1280px)
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: toggle
entity: script.fish_tank_panel
hold_action:
action: navigate
navigation_path: /fish-tank-panel/panel
icon: mdi:fishbowl-outline
card_mod:
style: |
ha-card {
border: 1.0px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
- condition: and
conditions:
- condition: or
conditions:
- condition: screen
media_query: '(orientation: landscape) and (min-width: 1281px)'
- condition: screen
media_query: '(orientation: portrait) and (min-width: 769px)'
chip:
type: template
tap_action:
action: navigate
navigation_path: /lovelace-floorplan/CCTV-Aarlo-Panel
entity: null
icon_color: white
icon: mdi:cctv
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
}
- type: conditional
conditions:
- condition: screen
media_query: '(orientation: portrait) and (max-width: 768px)'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: navigate
navigation_path: /lovelace-media/all_devices
entity: null
picture: ''
icon_color: white
icon: mdi:remote-tv
card_mod:
style: |
ha-card {
border: 1px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: >-
(orientation: landscape) and (max-height: 800px) and
(max-width: 1280px)
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: toggle
icon: mdi:remote-tv
entity: script.media_page
hold_action:
action: navigate
navigation_path: /lovelace-media/all_devices
card_mod:
style: |
ha-card {
border: 1px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
- condition: and
conditions:
- condition: or
conditions:
- condition: screen
media_query: '(orientation: landscape) and (min-width: 1281px)'
- condition: screen
media_query: '(orientation: portrait) and (min-width: 769px)'
chip:
type: template
tap_action:
action: navigate
navigation_path: /dashboard-bathroom/panel
entity: null
icon: mdi:bathtub-outline
icon_color: white
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: '(orientation: portrait) and (max-width: 768px)'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: navigate
navigation_path: /dashboard-bathroom/mobile
entity: null
icon: mdi:bathtub-outline
icon_color: white
card_mod:
style: |
ha-card {
border: 1px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: >-
(orientation: landscape) and (max-height: 800px) and
(max-width: 1280px)
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: toggle
icon: mdi:bathtub-outline
entity: script.bathroom_home
hold_action:
action: navigate
navigation_path: /dashboard-bathroom/panel
card_mod:
style: |
ha-card {
border: 1px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: spacer
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: toggle
entity: input_boolean.chips_menu_toggle
icon: mdi:unfold-less-vertical
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,226,64,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'off'
chip:
type: template
tap_action:
action: toggle
entity: input_boolean.chips_menu_toggle
icon: mdi:unfold-more-vertical
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,225,226,1) 100%);
}
card_mod:
style: |
@media (orientation: portrait) and (max-width: 768px) {
ha-card {
z-index:1;
position: fixed;
bottom: 5px;
left: 5px;
width: calc(100% - 10px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px!important;
}
}
@media (orientation: portrait) and (min-width: 769px) {
ha-card {
z-index:1;
position: fixed;
bottom: 10px;
left: 50px;
width: calc(100% - 100px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
--chip-height: 60px;
--chip-border-radius: 50%;
--chip-icon-size: 30px;
}
}
@media (orientation: landscape) and (min-width: 1281px) {
ha-card {
z-index:1;
position: fixed;
bottom: 5px;
left: 100px;
width: calc(100% - 200px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
--chip-height: 55px;
--chip-border-radius: 50%;
--chip-icon-size: 30px;
}
}
@media (orientation: landscape) and (min-height: 600px) and (max-height: 800px) and
(max-width: 1280px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 5px;
left: 50px;
width: calc(100% - 100px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
--chip-height: 55px;
--chip-border-radius: 50%;
--chip-icon-size: 30px;
}
}
seems to be an issue for some users that downgrade from card_mod 3.5.0 (which was removed) to 3.4.4.
Just read a success from another user after having downgraded to 3.4.3, and then upgraded to 3.4.4
1 Like
If someone missed this, card_mod 3.5.0 was withdrawn. I downgraded to 3.4.3, then reinstalled 3.4.4, and everything works again.
EDIT: @Mariusthvdb beat me to it with a couple of seconds. 
So I can confirm that after installing 3.5.0, I had to go back to 3.4.3, and then updating to 3.4.4 worked for me!
I lost colours from my various cards but seems to be working once I reloaded 3.5 from hacs
Hi folks,
I was wondering if anyone was able to help me?
Iām using a mushroom fan card for my air purifier in my bedroom. Itās got 3 speeds. I was wondering if there was a way with mod card or something similar to get it to show buttons for low, medium, high instead of a percentage bar? Or to have the percentage bar as an indicate but also have buttons on the card also?
It currently looks like the below.
Iām very much a novie when it comes to this sort of stuff so any help would be greatly appreciated!
@Mariusthvdb and @moelito thanks it turns out I did miss the fax on this one. I have downgraded and then upgraded again. When I am back at a computer I will check if everything is working again.
Edit: All working again.
still running card_mod 3.5 (because I had spent the night embracing the new features and hope its features will soon return, now 3.4.4 is the latest and greatestā¦)
I have been playing with the view badges, and modding those successfully. However, I now needed a badge so show a dynamic name or label, and that is something we can not card_mod.
So I turned to mushroom-template and concocted these. left the core badge with card-mod, on the right the mushroom with native templating, and some card_mod to set the border and the icon size.
Turning to the community, because there are 2 odd differences:
the mushroom state is not respecting the native display of numbers. Is that a template thing, or do we have a mushroom setting to adjust that.
second, if you look closely, the icon-color on the mushroom is much browner than the others, heck even than its own border, which uses the exact same templateā¦ (the other browns are in fact purple )
would appreciate if anyone could comment on this, thanks!
core badge:
# badge netto_verbruik
type: entity
entity: sensor.netto_verbruik
show_name: true
name: Netto
icon: mdi:flash
card_mod:
style:
ha-badge:
$: |
{% set netto = states('sensor.netto_verbruik')|float(0) %}
{% set color = 'brown' if netto >= 0 else 'var(--power-color)' %}
.badge {
border: 2px solid {{color}} !important;
}
.: |
{% set netto = states(config.entity)|float(0) %}
ha-state-icon {
--mdc-icon-size: 24px;
color:
{% if netto >= 0 %} brown
{% else %} var(--power-color)
{% endif %};
--card-mod-icon:
{% if netto >= 0 %} mdi:home-import-outline
{% else %} mdi:home-export-outline
{% endif %};
}
and mushroom-template
# badge netto_verbruik template
type: custom:mushroom-template-badge
content: >
{{states(config.entity,with_unit=true)}}
icon: |-
{% set netto = states(config.entity)|float(0) >= 0 %}
mdi:home-{{'import-outline' if netto else 'export-outline'}}
color: |-
{% set netto = states(config.entity)|float(0) >= 0 %}
{{'brown' if netto else 'var(--power-color)' }}
entity: sensor.netto_verbruik
label: |-
{% set netto = states(config.entity)|float(0) >= 0 %}
{{'Verbruik' if netto else 'Levering'}}
card_mod:
style: |
.badge {
{% set netto = states(config.entity)|float(0) >= 0 %}
{% set color = 'brown' if netto else 'var(--power-color)' %}
border: 2px solid {{color}} !important;
}
ha-state-icon {
--mdc-icon-size: 24px;
}
update
I now also see that in the Dom:
is correct, and then check
it sets it to var(ābrown-color)ā¦??
EDIT: found the solution, added at the end.
Hi everyone,
I am trying to left align the state icon of a light-card with card_mod.
Unfortunately, i can only align the text āHue Wohnzimmerdeckeā (this works fine!).
But the yellow icon is unwilling to go to the left.
Iāve tried for several hours to fix this, and inspected the DOM structure.
But some small bit is obviously missingā¦
- type: custom:mushroom-light-card
entity: light.hue_wohnzimmerdecke
show_brightness_control: true
grid_options:
rows: 3
columns: 6
layout: vertical
card_mod:
style:
mushroom-state-icon$: |
.icon {
align-items: flex-start !important;
}
mushroom-state-info$: |
.primary {
text-align: left !important;
}
See result
If i use the mushroom-shape-icon i can only set a relative margin
card_mod:
style:
mushroom-shape-icon$: |
.shape {
margin-right: 200px !important;
}
But everything else seems to be failing. What am i missing?
How can i align this icon properly to the left?
Solution:
card_mod:
style:
mushroom-state-item$: |
.container {
align-items: flex-start !important;
}
Creates finally a left aligned icon!
Your automation is the same as your script here @LiQuid_cOOled ?
What post are you referring to?