Hi
Can you share more of your code 
I’ve made some adjustments but I’d love to have the larger code for more pages
Thanks
Thanks @piitaya for this great contribution! These cards are so much more versatile and user-friendly than the original cards.
One thing I keep struggling with is the light brightness sliders. When swiping to their lowest setting I accidentally turn the lights off most of the time. Is it possible to prevent the brightness sliders from going to 0%? Maybe restrict them from 1% to 100%? Thank you for your consideration. Looking forward to hearing from you.
1 Like
Hey Guys, I have something that has been perplexing me and I cannot find the solution. Maybe this isn’t the group to discuss this but its worth a shot. I am using some mushroom template cards to activate scenes that I have set up. Why mushroom template cards? Because I can make the button icon change colour when the scene is active.
So my scenes are as follows:
Evening Scene contains the following lights:
Night Scene:
Guest Scene:
So you can see that activating say the Night Scene from the evening scene will turn off certain lights and dim 2 lights that are common to the evening scene.
Same with the Guest scene.
However when the evening scene is on and the mushroom card colour shows its on, the Night scene is also on because of the 2 common lights.
Is there away to get the mushroom template to change colour based on something else rather than the state of light or scene?
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-chips-card
chips: null
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: alarm-control-panel
entity: alarm_control_panel.verisure_alarm
content_info: none
name: Alarm
- type: conditional
conditions:
- entity: group.lights_on_count
state: 'on'
chip:
type: template
icon: mdi:lightbulb-group
content: >-
{{ expand(states.group.lights_on_count) | selectattr( 'state',
'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: group.lights_on_count
icon_color: amber
- type: template
entity: lock.hoveddor
icon: |-
{% set state=states(entity) %}
{% if state=='locked' %}
mdi:lock
{% elif state=='unlocked' %}
mdi:lock-open-variant
{% else %}
grey
{% endif %}
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='locked' %}
green
{% elif state=='unlocked' %}
red
{% else %}
grey
{% endif %}
- type: template
entity: group.windows_open_count
content: >-
{{ expand(states.group.windows_open_count) | selectattr( 'state',
'eq', 'on') | list | count }}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:window-closed-variant
{% elif state=='on' %}
mdi:window-open-variant
{% else %}
mdi:window-closed-variant
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='off' %}
green
{% elif state=='on' %}
red
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: conditional
conditions:
- entity: group.doors_open_count
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:door-open
content: >-
{{ expand(states.group.doors_open_count) | selectattr( 'state',
'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: group.doors_open_count
- type: action
icon: mdi:dots-vertical
tap_action:
action: navigate
navigation_path: >-
https://ckpungoon7m9o0jyv969gdclrygt68x1.ui.nabu.casa/lovelace-panel/hjem?edit=1
hold_action:
action: none
double_tap_action:
action: navigate
navigation_path: /lovelace-panel/home
icon_color: white
alignment: justify
card_mod:
style: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-spacing: 2px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.lights_on_count
state: 'on'
chip:
type: template
icon: mdi:lightbulb-group
content: >-
{{ expand(states.group.lights_on_count) | selectattr( 'state',
'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: group.lights_on_count
icon_color: amber
- type: conditional
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: markdown
content: >-
{% if now().hour < 5 %} Night{% elif now().hour < 12 %}
Morning{% elif now().hour < 18 %} Afternoon{% else %}
Evening{% endif %}, Yuval !
card_mod:
style: |
ha-markdown {
padding: 0 0 0 10px !important;
font-size: 28px !important;
font-weight: normal !important;
line-height: 1.2 !important;
}
ha-card {
background-color: #111111;
color: #e1e1e1;
box-shadow: 0px 0px;
}
- type: markdown
content: Today it is **{{ now().strftime('%d %B, %Y') }}**
card_mod:
style: |
ha-markdown {
padding: 0 0 0 10px !important;
font-size: 14px !important;
font-weight: normal !important;
line-height: 1.4 !important;
}
ha-card {
background-color: #111111;
color: #9b9b9b;
box-shadow: 0px 0px;
}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.0);
color: #e1e1e1;
box-shadow: 0px 0px;
width: 350px
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.yuval
state: home
chip:
type: entity
entity: person.yuval
content_info: nam
use_entity_picture: true
square: false
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.7);
margin-top: 5px;
margin-bottom: 0px;
--chip-border-radius: 50px;
}
- type: conditional
conditions:
- entity: person.yuval
state_not: home
chip:
type: entity
entity: person.yuval
content_info: nam
use_entity_picture: true
square: false
card_mod:
style: |
ha-card {
{% if is_state('person.yuval', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.yuval', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 40px;
margin-bottom: 20px;
}
alignement: end
card_mod:
style: |
ha-card {
background-color: none;
color: #9b9b9b;
box-shadow: 0px 0px;
margin-left: 300px
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.rozi
state: home
chip:
type: entity
entity: person.rozi
content_info: male
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.7);
margin-top: 5px;
margin-bottom: 0px;
--chip-border-radius: 50px;
}
- type: conditional
conditions:
- entity: person.rozi
state_not: home
chip:
type: entity
entity: person.rozi
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.rozi', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.rozi', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 12px;
margin-bottom: 0px;
}
alignment: end
card_mod:
style: |
ha-card {
background-color: none;
color: #9b9b9b;
box-shadow: 0px 0px;
margin-right: 10px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.assaf
state: home
chip:
type: entity
entity: person.assaf
content_info: nam
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.7);
margin-top: 5px;
margin-bottom: 0px;
--chip-border-radius: 50px;
}
- type: conditional
conditions:
- entity: person.assaf
state_not: home
chip:
type: entity
entity: person.assaf
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.assaf', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.assaf', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 0px;
--chip-border-radius: 50px;
}
alignment: end
card_mod:
style: |
ha-card {
margin: -57px 75px 0 0
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.adele
state: home
chip:
type: entity
entity: person.adele
content_info: nam
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.7);
margin-top: 5px;
margin-bottom: 0px;
--chip-border-radius: 50px;
}
- type: conditional
conditions:
- entity: person.adele
state_not: home
chip:
type: entity
entity: person.adele
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.adele', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.adele', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 0px;
--chip-border-radius: 50px;
}
alignment: end
card_mod:
style: |
ha-card {
margin: -110px 95px 0 0
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Home
icon: mdi:home
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: /lovelace-panel/Home
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Light
icon: mdi:lightbulb-group
icon_color: orange
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace-panel/Light
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Alarm
icon: mdi:shield
icon_color: grey
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace-panel/alarm
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Ungene
icon: mdi:face-man
icon_color: green
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace-panel/thekids
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Rom
icon: mdi:sofa
layout: vertical
icon_color: brown
tap_action:
action: navigate
navigation_path: /lovelace-panel/rom
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.boolean_dashboard_welcome_dropdown
state: 'off'
chip:
type: weather
entity: weather.hjem
show_conditions: true
show_temperature: true
- type: conditional
conditions:
- entity: input_boolean.boolean_dashboard_welcome_dropdown
state: 'off'
chip:
type: entity
entity: sensor.moon
icon_color: yellow
- type: conditional
conditions:
- entity: input_boolean.boolean_dashboard_welcome_dropdown
state: 'off'
chip:
type: template
content: '{{state_attr(entity, ''current_temperature'')}} °F'
entity: sensor.verisure_rv_stua_fukt
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 %}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 15px;
margin-left: -6px;
margin-bottom: -12px;
width: 400px
}
alignment: start
- type: custom:mushroom-chips-card
chips:
- 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.boolean_dashboard_welcome_dropdown
icon_color: disabled
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0px;
--chip-icon-size: 40px;
margin-right: -4px;
margin-bottom: -12px;
}
alignment: end
- type: conditional
conditions:
- entity: input_boolean.boolean_dashboard_welcome_dropdown
state: 'on'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Living_room
icon: mdi:television
layout: vertical
icon_color: brown
tap_action:
action: navigate
navigation_path: /lovelace-panel/Living_room
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: -24px;
margin-bottom: 4px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Kitchen
icon: mdi:silverware-variant
layout: vertical
icon_color: purple
tap_action:
action: navigate
navigation_path: /lovelace-panel/Kitchen
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: -5px;
margin-right: auto;
margin-top: -24px;
margin-bottom: 4px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: walk
icon: mdi:menu
layout: vertical
icon_color: cyan
tap_action:
action: navigate
navigation_path: /lovelace-panel/walk
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: -10px;
margin-right: auto;
margin-top: -24px;
margin-bottom: 4px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Laundry_room
icon: mdi:washing-machine
layout: vertical
icon_color: pink
tap_action:
action: navigate
navigation_path: /lovelace-panel/Laundry_room
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: -15px;
margin-right: auto;
margin-top: -24px;
margin-bottom: 4px;
}
- type: custom:simple-weather-card
entity: ledig
name: ''
primary_info:
- wind_speed
- wind_bearing
- pressure
secondary_info:
- humidity
- precipitation_probability
- precipitation
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
padding: 0 28px 0 28px !important;
margin-left: 0px;
margin-right: 0px;
margin-top: 0;
margin-bottom: 0;
}
- type: grid
square: false
columns: 2
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Autolys
secondary: null
icon: mdi:home-lightbulb-outline
icon_color: blue
card_mod:
style: |
ha-card {
padding-bottom: 0px !important;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:party-popper
icon_color: grey
layout: vertical
secondary: Benjamin
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.party
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
- type: custom:mushroom-template-card
icon: mdi:television
icon_color: grey
layout: vertical
secondary: Sebastian
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.chill
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
- type: custom:mushroom-template-card
icon: mdi:stairs
icon_color: grey
layout: vertical
secondary: Lillestua
tap_action:
action: call-service
service: input_boolean.turn_on
service_data: {}
target:
entity_id: input_boolean.god_natt
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
card_mod:
style: |
ha-card {
box-shadow: none;
}
card_mod:
style: |
ha-card {
padding: 2px;
background: #1a1a1a;
}
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Scener
secondary: Alle
icon: mdi:home-lightbulb-outline
icon_color: blue
card_mod:
style: |
ha-card {
padding-bottom: 0px !important;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:party-popper
icon_color: grey
layout: vertical
secondary: Party
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.party
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
- type: custom:mushroom-template-card
icon: mdi:television
icon_color: grey
layout: vertical
secondary: Chill
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.chill
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
- type: custom:mushroom-template-card
icon: mdi:weather-night
icon_color: grey
layout: vertical
secondary: God Natt
tap_action:
action: call-service
service: input_boolean.turn_on
service_data: {}
target:
entity_id: input_boolean.god_natt
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
card_mod:
style: |
ha-card {
box-shadow: none;
}
card_mod:
style: |
ha-card {
padding: 2px;
background: #1a1a1a;
}
I took the code from here, thanks(I just don’t remember whose it is, but thanks)
I need assistance with the following:
- How can I increase the size of the person icons?
- How can I position them more appropriately on my phone screen?
There’s a setting on group switches that slows the switch to only be set to ‘on’ if all members are on.
all: true
@danwooller thanks but maybe i am missing something? This is my switch!
type: custom:mushroom-template-card
primary: Evening Scene
secondary: |-
{% set d ={
'on': 'Scene Active',
'off': 'Off'
} %}
{{ d.get(states('light.living_room_border')) }}
icon: mdi:lamps
entity: scene.evening_lights
tap_action:
action: call-service
service: scene.turn_on
target:
entity_id: scene.evening_lights
data: {}
icon_color: |-
{% set state=states('light.living_room_border') %}
{% if state=='on' %} orange
{% else %}
grey
{% endif %}
You need to state between a range
Every temperature is above 15 that’s why it’s always green
Or if between 15 and 20 green
Else between 20 and 25 yellow
Etc
Just started using the Mushroom Cards and they are awesome.
The only issue is I can use Custom Card Mod to color the backgrounds and make borders on individual sections within the the cards, IE I can color the Chips bubbles or a single entity but I can not add a border to the while card or background color to the whole card. Any thoughts here? Having no borders with different sections makes everything run together.
I have tried all kinds of css style formatting. I can get the individual sections to change but not a border\background color for the whole card.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: alarm-control-panel
entity: binary_sensor.guest_door_2
content_info: none
name: Alarm
- type: template
entity: lock.front_door
icon: >-
{{ 'mdi:lock' if is_state('lock.front_door', 'locked') else
'mdi:lock-open' }}
icon_color: '{{ ''green'' if is_state(''lock.front_door'', ''locked'') else ''red'' }}'
content: null
tap_action:
action: more-info
- type: conditional
conditions:
- entity: group.all_lights
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.group.all_lights) | selectattr( 'state', 'eq',
'on') | list | count }}
tap_action:
action: more-info
entity: group.all_lights
icon_color: grey
- type: conditional
conditions:
- entity: group.all_windows
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:window-open
content: >-
{{ expand(states.group.all_windows) | selectattr( 'state', 'eq',
'on') | list | count }}
tap_action:
action: more-info
entity: group.all_windows
- type: conditional
conditions:
- entity: group.external_doors
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:door-open
content: >-
{{ expand(states.group.external_doors) | selectattr( 'state',
'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: group.external_doors
- type: conditional
conditions:
- entity: group.water_leak
state: 'on'
chip:
type: template
icon_color: light-blue
icon: mdi:water-alert
tap_action:
action: more-info
entity: group.water_leak
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: group.smoke_alarm
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:fire-alert
tap_action:
action: more-info
entity: group.smoke_alarm
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
card_mod:
style: |
:host {
--ha-card-background: var(--card-background-color);
}
- square: false
columns: 2
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.rhys
state: home
chip:
type: entity
entity: person.rhys
content_info: nam
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.sarah
state: home
chip:
type: entity
entity: person.sarah
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.sinan_ibrahim
state: home
chip:
type: entity
entity: person.sinan_ibrahim
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.sinan_ibrahim
state: home
chip:
type: entity
entity: person.sinan_ibrahim
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin-top: 5px;
margin-bottom: 10px;
}
alignment: start
card_mod:
style: |
ha-card {
margin-left: 8px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.rhys
state_not: home
chip:
type: entity
entity: person.rhys
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.rhys', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.rhys', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.sarah
state_not: home
chip:
type: entity
entity: person.sarah
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.sarah', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.sarah', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.elijah
state_not: home
chip:
type: entity
entity: person.elijah
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.elijah', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.elijah', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.michaela
state_not: home
chip:
type: entity
entity: person.michaela
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.michaela', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.michaela', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 10px;
}
alignment: end
card_mod:
style: |
ha-card {
margin-right: 8px;
}
- type: custom:mushroom-title-card
title: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Good Evening, {{user}}!
{% elif (time >= 12) %}
Good Afternoon, {{user}}!
{% elif (time >= 5) %}
Good Morning, {{user}}!
{% else %}
Hello, {{user}}
{% endif %}
subtitle: ''
- type: custom:simple-weather-card
entity: weather.forecast_home
name: in Auckland
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: home
icon: mdi:home
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Lights
icon: mdi:lightbulb
icon_color: amber
layout: vertical
tap_action:
action: navigate
navigation_path: lights
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Secure
icon: mdi:shield
icon_color: green
layout: vertical
tap_action:
action: navigate
navigation_path: security
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Media
icon: mdi:speaker
layout: vertical
icon_color: red
tap_action:
action: navigate
navigation_path: media
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Net
icon: mdi:lan
layout: vertical
icon_color: cyan
tap_action:
action: navigate
navigation_path: media
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.01);
}
1 Like
Tried copying this part
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(–rgb-primary-text-color), 0.01);
}
Still only colors one of the sections with in the mushroom card. I want the back ground of the whole card to change or a border around the whole card.
Have you get a solution?
You probably are.
I suggested using groups instead so you can use all: true
- platform: group
name: "Living Room Sonos"
all: true
entities:
- switch.sonos_sub
- switch.sonos_playbar
- switch.sonos_play1_rears
You’ll need to post your code, your question is too vague otherwise. I’d also suggest reading through this thread, most answers are already here.
Anyone updated their weather on Mushroom since it now includes weather icons by state of the weather in latest update ?
This can be done via the tile card but doesnt give an example, which I found strange.
Thanks in advance
2 Likes
card_mod:
style:
mushroom-template-chip:nth-child(3)$: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-icon {
box-shadow: 0px 0px;
animation: rotation linear infinite;
animation-duration: 3s;
}
1 Like
Doesn’t seem to add anything. Here is the code Im using:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:- type: entity
entity: sensor.smartthings_motion_sensor_temperature_measurement
double_tap_action:
action: none
name: ‘Hall:’
content_info: name
icon_color: deep-orange
icon: hue:room-stairs
tap_action:
action: none
hold_action:
action: none - type: spacer
- type: entity
entity: binary_sensor.smartthings_motion_sensor_motion
content_info: state
use_entity_picture: false
alignment: start
- type: entity
- type: custom:mini-graph-card
entities:- entity: sensor.smartthings_motion_sensor_temperature_measurement
name: Hall Temp
- entity: sensor.smartthings_motion_sensor_temperature_measurement
- type: custom:mushroom-light-card
entity: light.hall
icon: mdi:lightbulb-group
fill_container: false
use_light_color: false
show_brightness_control: true
name: Hall Lights
card_mod:
style:
mushroom-template-chip:nth-child(3)$: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-icon {
box-shadow: 7px 7px;
animation: rotation linear infinite;
animation-duration: 3s;
}
Because you’re applying card_mod to a light card.
I want to apply it to the whole thing, is this possible?
To make the fan spin?