Take a look at the guide in my profile.
Here is another simple solution:
mushroom-state-info$: |
.primary:after {
content: 'Test';
display: flex;
flex-direction: column;
}
You can then write whatever you want where it says 'Test'
If you want it under secondary instead just replace .primary { with .secondary {
For my education, is there a benefit to this method vs white-space/word-break method?
Small benefit is that you can use it on the secondary of any card. Not just the template card where you can write text.
The white-space word-break solution doesnt work if you cant change the text.
.+ learning how to use pseudo elements (:after, :before) is a useful skill to have as you can use it for more than just text (as you know from your Hue colored icons).
That makes sense. Mostly you have to use the template card for total customization, but on occasion I do use the standard cards and that would help. Definitely an intriguing subject for me. You have a ton of knowledge!
and yes :after & :before is extremely useful. Just started some new styling with :after & :before in .shape and ha-state-icon based off some of your older posts.
Hello,
Which card do you use for temperature?
Thanks
if you are talking about mushroom cards only. the one most applicable would probably just be the standard entity card.
Thank you very much @dimitri.landerloos for another solution for the issue I was facing. I appreciate your time and your efforts. Thank you!
Can āTestā be in different color even if it s in the same section primary?
Sure. Just add color:
mushroom-state-info$: |
.primary:after {
content: 'Test';
display: flex;
flex-direction: column;
color: red;
}
Of course you can use any color you want.
yes of course. I can send you the whole code of my chips at the top of my dashboard
views:
- theme: Backend-selected
title: Dashboard
path: dashboard
icon: mdi:home
type: custom:layout-card
layout_type: custom:horizontal-layout
layout:
width: 360
max_cols: 2
badges: []
cards:
- type: custom:layout-card
layout_type: custom:vertical-layout
layout: null
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: weather
entity: weather.casa_ventura
show_conditions: false
show_temperature: true
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
- type: template
entity: sensor.assorbimento_casa
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: energia
hold_action:
action: none
icon: mdi:home-lightning-bolt-outline
icon_color: ''
content: '{{ int(states("sensor.assorbimento_casa")) }} W'
- type: conditional
conditions:
- entity: cover.gruppo_cover_all
state: open
chip:
type: template
double_tap_action:
action: none
icon: mdi:window-shutter-alert
icon_color: ''
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: tapparelle
content: '{{ states("sensor.number_cover_open") }}'
entity: cover.gruppo_cover_all
- type: conditional
conditions:
- entity: binary_sensor.contact_cancelletto_contact
state: 'on'
chip:
type: template
icon: mdi:door-open
icon_color: '#D70D0D'
tap_action:
action: navigate
navigation_path: telecamere
hold_action:
action: none
double_tap_action:
action: none
entity: binary_sensor.contact_cancelletto_contact
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
animation: {% if is_state('binary_sensor.contact_cancelletto_contact', 'on') %} blink 1s linear infinite;
{% else %} none
{% endif %}
}
@keyframes blink {
50% {opacity: 0.2;}
}
- type: conditional
conditions:
- entity: binary_sensor.contact_portone_contact
state: 'on'
chip:
type: template
icon: mdi:gate-alert
icon_color: '#D70D0D'
tap_action:
action: navigate
navigation_path: telecamere
hold_action:
action: none
double_tap_action:
action: none
entity: binary_sensor.contact_portone_contact
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
animation: {% if is_state('binary_sensor.contact_portone_contact', 'on') %} blink 1s linear infinite;
{% else %} none
{% endif %}
}
@keyframes blink {
50% {opacity: 0.2;}
}
- type: conditional
conditions:
- entity: light.gruppo_luci_interno
state: 'on'
chip:
type: template
entity: light.gruppo_luci_interno
icon: mdi:lightbulb
icon_color: amber
content: '{{ states("sensor.number_indoor_lights_on") }}'
tap_action:
action: navigate
navigation_path: luci-interne
hold_action:
action: toggle
double_tap_action:
action: none
- type: conditional
conditions:
- entity: light.gruppo_luci_esterno
state: 'on'
chip:
type: template
entity: light.gruppo_luci_esterno
icon_color: amber
icon: mdi:coach-lamp-variant
tap_action:
action: navigate
navigation_path: luci-esterne
hold_action:
action: toggle
content: '{{ states("sensor.number_outdoor_lights_on") }}'
double_tap_action:
action: none
- type: conditional
conditions:
- entity: switch.gruppo_termosifoni_all
state: 'on'
chip:
type: template
entity: switch.gruppo_termosifoni_all
icon_color: red
icon: mdi:radiator
tap_action:
action: toggle
hold_action:
action: none
content: '{{ states("sensor.number_heater_on") }}'
double_tap_action:
action: none
- type: conditional
conditions:
- entity: climate.group_all
state_not: 'off'
chip:
type: template
entity: climate.group_all
tap_action:
action: navigate
navigation_path: condizionatori
hold_action:
action: toggle
double_tap_action:
action: none
icon: mdi:fan
icon_color: blue-grey
content: '{{ states("sensor.number_climate_on") }}'
card_mod:
style:
mushroom-conditional-chip:nth-child(11):
mushroom-template-chip$: |
ha-state-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-spacing: 2px;
--ha-card-border-width: 0;
}
Fantastic! Thank you very much!
Its set to nth-child(11) but there are only 10 chips total.
So change to reflect the chip that you want to apply it to.
type: custom:layout-card
layout_type: custom:vertical-layout
layout: null
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: weather
entity: weather.casa_ventura
show_conditions: false
show_temperature: true
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
- type: template
entity: sensor.assorbimento_casa
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: energia
hold_action:
action: none
icon: mdi:home-lightning-bolt-outline
icon_color: ''
content: '{{ int(states("sensor.assorbimento_casa")) }} W'
- type: conditional
conditions:
- entity: cover.gruppo_cover_all
state: open
chip:
type: template
double_tap_action:
action: none
icon: mdi:window-shutter-alert
icon_color: ''
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: tapparelle
content: '{{ states("sensor.number_cover_open") }}'
entity: cover.gruppo_cover_all
- type: conditional
conditions:
- entity: binary_sensor.contact_cancelletto_contact
state: 'on'
chip:
type: template
icon: mdi:door-open
icon_color: '#D70D0D'
tap_action:
action: navigate
navigation_path: telecamere
hold_action:
action: none
double_tap_action:
action: none
entity: binary_sensor.contact_cancelletto_contact
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
animation: {% if is_state('binary_sensor.contact_cancelletto_contact', 'on') %} blink 1s linear infinite;
{% else %} none
{% endif %}
}
@keyframes blink {
50% {opacity: 0.2;}
}
- type: conditional
conditions:
- entity: binary_sensor.contact_portone_contact
state: 'on'
chip:
type: template
icon: mdi:gate-alert
icon_color: '#D70D0D'
tap_action:
action: navigate
navigation_path: telecamere
hold_action:
action: none
double_tap_action:
action: none
entity: binary_sensor.contact_portone_contact
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
animation: {% if is_state('binary_sensor.contact_portone_contact', 'on') %} blink 1s linear infinite;
{% else %} none
{% endif %}
}
@keyframes blink {
50% {opacity: 0.2;}
}
- type: conditional
conditions:
- entity: light.gruppo_luci_interno
state: 'on'
chip:
type: template
entity: light.gruppo_luci_interno
icon: mdi:lightbulb
icon_color: amber
content: '{{ states("sensor.number_indoor_lights_on") }}'
tap_action:
action: navigate
navigation_path: luci-interne
hold_action:
action: toggle
double_tap_action:
action: none
- type: conditional
conditions:
- entity: light.gruppo_luci_esterno
state: 'on'
chip:
type: template
entity: light.gruppo_luci_esterno
icon_color: amber
icon: mdi:coach-lamp-variant
tap_action:
action: navigate
navigation_path: luci-esterne
hold_action:
action: toggle
content: '{{ states("sensor.number_outdoor_lights_on") }}'
double_tap_action:
action: none
- type: conditional
conditions:
- entity: switch.gruppo_termosifoni_all
state: 'on'
chip:
type: template
entity: switch.gruppo_termosifoni_all
icon_color: red
icon: mdi:radiator
tap_action:
action: toggle
hold_action:
action: none
content: '{{ states("sensor.number_heater_on") }}'
double_tap_action:
action: none
- type: conditional
conditions:
- entity: climate.group_all
state_not: 'off'
chip:
type: template
entity: climate.group_all
tap_action:
action: navigate
navigation_path: condizionatori
hold_action:
action: toggle
double_tap_action:
action: none
icon: mdi:fan
icon_color: blue-grey
content: '{{ states("sensor.number_climate_on") }}'
card_mod:
style:
mushroom-conditional-chip:nth-child(10):
mushroom-template-chip$: |
ha-state-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-spacing: 2px;
--ha-card-border-width: 0;
}
iācant understand why but it doesnāt work in my dashboardā¦ I can attach more code if it can helpā¦
views:
- theme: Backend-selected
title: Dashboard
path: dashboard
icon: mdi:home
type: custom:layout-card
layout_type: custom:horizontal-layout
layout:
width: 360
max_cols: 2
badges: []
cards:
- type: custom:layout-card
layout_type: custom:vertical-layout
layout: null
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: weather
entity: weather.casa_ventura
show_conditions: false
show_temperature: true
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
- type: template
entity: sensor.assorbimento_casa
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: energia
hold_action:
action: none
icon: mdi:home-lightning-bolt-outline
icon_color: ''
content: '{{ int(states("sensor.assorbimento_casa")) }} W'
- type: conditional
conditions:
- entity: cover.gruppo_cover_all
state: open
chip:
type: template
double_tap_action:
action: none
icon: mdi:window-shutter-alert
icon_color: ''
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: tapparelle
content: '{{ states("sensor.number_cover_open") }}'
entity: cover.gruppo_cover_all
- type: conditional
conditions:
- entity: binary_sensor.contact_cancelletto_contact
state: 'on'
chip:
type: template
icon: mdi:door-open
icon_color: '#D70D0D'
tap_action:
action: navigate
navigation_path: telecamere
hold_action:
action: none
double_tap_action:
action: none
entity: binary_sensor.contact_cancelletto_contact
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
animation: {% if is_state('binary_sensor.contact_cancelletto_contact', 'on') %} blink 1s linear infinite;
{% else %} none
{% endif %}
}
@keyframes blink {
50% {opacity: 0.2;}
}
- type: conditional
conditions:
- entity: binary_sensor.contact_portone_contact
state: 'on'
chip:
type: template
icon: mdi:gate-alert
icon_color: '#D70D0D'
tap_action:
action: navigate
navigation_path: telecamere
hold_action:
action: none
double_tap_action:
action: none
entity: binary_sensor.contact_portone_contact
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
animation: {% if is_state('binary_sensor.contact_portone_contact', 'on') %} blink 1s linear infinite;
{% else %} none
{% endif %}
}
@keyframes blink {
50% {opacity: 0.2;}
}
- type: conditional
conditions:
- entity: light.gruppo_luci_interno
state: 'on'
chip:
type: template
entity: light.gruppo_luci_interno
icon: mdi:lightbulb
icon_color: amber
content: '{{ states("sensor.number_indoor_lights_on") }}'
tap_action:
action: navigate
navigation_path: luci-interne
hold_action:
action: toggle
double_tap_action:
action: none
- type: conditional
conditions:
- entity: light.gruppo_luci_esterno
state: 'on'
chip:
type: template
entity: light.gruppo_luci_esterno
icon_color: amber
icon: mdi:coach-lamp-variant
tap_action:
action: navigate
navigation_path: luci-esterne
hold_action:
action: toggle
content: '{{ states("sensor.number_outdoor_lights_on") }}'
double_tap_action:
action: none
- type: conditional
conditions:
- entity: switch.gruppo_termosifoni_all
state: 'on'
chip:
type: template
entity: switch.gruppo_termosifoni_all
icon_color: red
icon: mdi:radiator
tap_action:
action: toggle
hold_action:
action: none
content: '{{ states("sensor.number_heater_on") }}'
double_tap_action:
action: none
- type: conditional
conditions:
- entity: climate.group_all
state_not: 'off'
chip:
type: template
entity: climate.group_all
tap_action:
action: navigate
navigation_path: condizionatori
hold_action:
action: toggle
double_tap_action:
action: none
icon: mdi:fan
icon_color: blue-grey
content: '{{ states("sensor.number_climate_on") }}'
card_mod:
style:
mushroom-conditional-chip:nth-child(10):
mushroom-template-chip$: |
ha-state-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-spacing: 2px;
--ha-card-border-width: 0;
}
- type: conditional
conditions:
- entity: input_boolean.qualcuno_ha_suonato
state: 'on'
card:
type: custom:mushroom-template-card
primary: Qualcuno ha suonato al citofono!
secondary: Clicca per vedere le telecamere!
icon: mdi:bell-alert
icon_color: white
tap_action:
action: navigate
navigation_path: camere-citofono
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
card_mod:
style: |
mushroom-shape-icon { --shape-color: none !important; }
ha-card {
--card-primary-font-weight: bold;
--card-secondary-font-weight: bold;
--card-primary-font-size: 19px;
--card-secondary-font-size: 14px;
}
ha-card {
--primary-text-color: rgba(254,249,244,255)
}
ha-card {
--secondary-text-color: rgba(254,249,244,255)
}
ha-card {
background: rgba(233,14,20,255);
--chip-box-shadow: none;
}
:host {
--mush-icon-size: 60px;
}
- type: custom:mushroom-title-card
title: |
{% if now().hour < 5 %}
Buona notte
{% elif now().hour < 12 %}
Buongiorno
{% elif now().hour < 18 %}
Buon pomeriggio
{% else %}
Buonasera
{% endif %}
subtitle: |-
benvenuto a casa, sono le {{
states('sensor.time') }}
alignment: start
Have you tried a different browser to see if it works?
Can you try the same code not applied to a conditional chip? Some browsers have issues with animations in conditional chips. For example can you try this:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: climate.group_all
state_not: 'off'
chip:
type: template
entity: climate.group_all
icon: mdi:fan
icon_color: blue-grey
content: '{{ states("sensor.number_climate_on") }}'
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-spacing: 2px;
--ha-card-border-width: 0;
}
VS this:
type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.group_all
icon: mdi:fan
icon_color: blue-grey
content: '{{ states("sensor.number_climate_on") }}'
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-spacing: 2px;
--ha-card-border-width: 0;
}
Do both work or only one, or do neither work?
Here is the code
type: custom:stack-in-card
cards:
- type: picture-entity
image: local/images/Livingroom.jpg
entity: light.living_room
show_state: false
show_name: false
camera_view: auto
aspect_ratio: '3'
tap_action:
action: navigate
navigation_path: /home-living-room
hold_action:
action: toggle
theme: Mushroom
- type: custom:gap-card
height: 2
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
primary: Family Room
secondary: null
icon: mdi:lightbulb-group
entity: light.living_room
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
tap_action:
action: none
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.mushroom_familyroom_card
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
}}
icon_color: black
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.mushroom_familyroom_card
state: 'on'
card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Ceiling Fan Lights
secondary: null
entity: light.wiz_lights
icon: mdi:ceiling-fan-light
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
tap_action:
action: toggle
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
font-size: 14px !important;
font-weight: bold !important;
color: var(--primary-text-color) !important;
}
.: |
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px;
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
primary: Floor Accents
secondary: null
entity: light.accent_lights
icon: mdi:light-flood-up
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
tap_action:
action: toggle
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
font-size: 14px !important;
font-weight: bold !important;
color: var(--primary-text-color) !important;
}
.: |
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px;
}
- type: custom:mushroom-template-card
primary: Porch Light
secondary: null
entity: light.front_outside_light
icon: mdi:lightbulb
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
tap_action:
action: toggle
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
font-size: 14px !important;
font-weight: bold !important;
color: var(--primary-text-color) !important;
}
.: |
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
Something like this? (Swap entities for your own.)
type: custom:stack-in-card
cards:
- type: picture-entity
image: local/images/Livingroom.jpg
entity: light.lounge_lights
show_state: false
show_name: false
camera_view: auto
aspect_ratio: '3'
tap_action:
action: navigate
navigation_path: /home-living-room
hold_action:
action: toggle
theme: Mushroom
- type: custom:gap-card
height: 2
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto auto
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
primary: Family Room
secondary: null
icon: mdi:lightbulb-group
entity: light.lounge_lights
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
tap_action:
action: none
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-chips-card
alignment: end
chips:
- type: conditional
conditions:
- entity: light.lounge_corner_lamp
state_not: 'off'
chip:
type: light
entity: light.lounge_corner_lamp
- type: conditional
conditions:
- entity: light.lounge_main_light
state_not: 'off'
chip:
type: light
entity: light.lounge_main_light
card_mod:
style: |
ha-card {
position: relative;
top: 20%;
}
i fix it!! both worked, but the problem was not there. the problem was these line at the top of my code.
- type: custom:layout-card
layout_type: custom:vertical-layout
layout: null
cards:
removing these line chips worked, but I have to edit all my dashboard, because there are many elements under this layout cardā¦
No need to apologize. Can you post the full code formatted correctly please?
Check out this post (section 11) to see how to do that 
# An example of what correctly formatted code blocks will look like.
type: custom:example
entity: switch.example
cards:
- type: custom:test
entity: light.test
icon: mdi:test-tube
icon_color: green
card_mod:
style: |
ha-card {
test: 1px red solid;
}
Means you are using the custom layout card. Cant tell you much more than that the layout card is used to achieve more complex layouts.