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!
What post are you referring to?
Thanks for pointing that out. Must have been a copy and paste error. Iād have to dig for the Pi Hole version, but here is a sprinkler version.
Automation
alias: Sprinkler Timer
description: ""
trigger:
- platform: state
entity_id:
- input_boolean.sprinklers_on
to: "on"
condition: []
action:
- service: timer.start
data:
duration: "{{ states('input_number.sprinkler_number') | int*60 }}"
target:
entity_id: timer.sprinkler_timer
- service: switch.turn_on
target:
entity_id:
- switch.back_yard_main
data: {}
- service: homeassistant.update_entity
target:
entity_id: switch.back_yard_main
data: {}
- delay:
hours: 0
minutes: 0
seconds: "{{ states('input_number.sprinkler_number') | int*60}}"
milliseconds: 0
- service: switch.turn_off
target:
entity_id:
- switch.back_yard_main
data: {}
- service: input_boolean.turn_off
data: {}
target:
entity_id:
- input_boolean.sprinklers_on
mode: single
Script
alias: Sprinkler Timer Finish
sequence:
- service: timer.finish
metadata: {}
data: {}
target:
entity_id: timer.sprinkler_timer
- service: switch.turn_off
data: {}
target:
device_id: bb9a5ee6cfed42eecfcf9ba0f166e19c
entity_id: switch.back_yard_main
- service: input_boolean.turn_off
data: {}
target:
entity_id: input_boolean.sprinklers_on
mode: single
icon: mdi:timer-off-outline
Card Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: Sprinklers
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 15% 15% 70%
margin: '-10px 0px 0px 0px'
cards:
- type: custom:mushroom-template-card
entity: input_boolean.sprinklers_on
icon: mdi:sprinkler-variant
tap_action:
action: toggle
confirmation:
text: Are you sure you want to start the timer?
hold_action:
action: call-service
confirmation:
text: Are you sure you want cancel the timer?
service: script.sprinkler_timer_finish
icon_color: transparent
card_mod:
style: >
ha-card {
border: none !important;
--icon-symbol-size: 40px;
background:none;
}
ha-state-icon { {% if is_state('input_boolean.sprinklers_on', 'on')
%}color: lime !important;
animation: sprinkle 4s ease-in-out infinite
{%else%}
color: red !important;
{% endif %}
}
@keyframes sprinkle {
0%, 10%, 20%, 30%, 40%, 60%, 70%, 80%, 90%, 100% { clip-path:
inset(0 40% 0 40%); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform:
rotate(0deg); }
}
- type: custom:button-card
entity: timer.sprinkler_timer
name: Time Left
show_name: true
show_state: true
show_label: false
show_icon: false
height: 40px
styles:
img_cell:
- background-color: rgba(var(--color-theme),0,05)
- border-radius: 50%
- place-self: center
- width: 20px
- height: 20px
card:
- background-color: '#3d5afe02'
- border: none
- border-radius: 14px
- font-size: 12px
- font-weight: normal
- height: 70px
- color: |
[[[
if(states['input_boolean.sprinklers_on'].state == 'off') return 'red'
else return 'lime';
]]]
- align_self: middle
name:
- font-size: 12px
- padding-bottom: 2px
- color: |
grey
- font-weight: normal
- type: custom:mushroom-number-card
entity: input_number.sprinkler_number
tap_action:
action: toggle
layout: horizontal
display_mode: slider
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
--shape-color:none;
}
mushroom-number-value-control$:
mushroom-slider$: |
.slider {
position: absolute !important;
width: 96% !important;
left: 12px;
height: 44px !important;
margin-top:2px;
--bg-color: rgba(169, 169, 169, 0.2);
--main-color: {{ 'rgba(0, 255, 0, .42)' if is_state(switch.back_yard_main', 'on') else 'rgba(255, 0, 0, .2)' }} ;
}
.: |
ha-state-icon {
color: transparent;
}
ha-card {
border: none !important;
background: none;
}
mushroom-state-info$: |
.container {
flex-direction: row !important;
position: absolute !important;
width: 79%;
top: 17px;
align-items: baseline;
}
.primary {
color: transparent !important;
position: relative;
flex-shrink: 1;
flex-grow: 1;
}
.primary:after {
content: "{{states('input_number.sprinkler_number')| int(0)}} Min ";
position: absolute;
color: {{ 'lime' if is_state('switch.back_yard_main', 'on') else 'red' }} ;
left: -1px;
font-weight: 400;
top: 3px;
width: max-content;
z-index: 2
}
.secondary {
color: transparent !important;
position: relative;
flex-shrink: 1;
flex-grow: 0;
}
.secondary:after {
content: "{{ 'ON' if is_state('switch.back_yard_main', 'on') else 'OFF' }} ";
position: relative ;
color: {{ 'lime' if is_state('switch.back_yard_main', 'on') else 'red' }} ;
font-weight: 400;
top: 2px;
right: 10px;
padding-right: 10px;
z-index: 2;
}
card_mod:
style: |
ha-card {
background-image: url("/local/pics/wood.png");
border: none;
}
2 Likes
Iām trying to modify simple-weather-card:
in the way to put some custom text (marked red) basically translation weather info, and also is it possible somehow to change individual small icons (marked blue). If I put the card_mod option (below) all small icons are the same.
type: custom:simple-weather-card
entity: weather.home
name: CITY
primary_info:
- wind_bearing
- wind_speed
secondary_info:
- humidity
- precipitation_probability
card_mod:
style: |
.weather__icon {
{% set condition = states(config.entity) %}
{% if condition == 'partlycloudy' and is_state('sun.sun', 'below_horizon') %}
{% set condition = condition + '-night' %}
{% endif %}
background-image: url("/local/weather_icons/{{ condition }}.svg") !important;
}
.weather__icon--small {
background-image: url("/local/weather_icons/windy.svg") !important;
}
This modification (with animated weather icons) was made by the user: rhysb so all the credits to himā¦
This thread is for Mushroom Card related issues. Iād look for a simple-weather-card thread or post here
1 Like
How can i move the Badge? Thanks
card_mod
mushroom-badge-icon {
margin-top: 38px !important;
margin-right: 16px !important;
}
1 Like