jeey2k
December 30, 2023, 11:51am
9369
This pushes the chiplets far down so they are not visable anymore.
But i have created a hack that seems to work.
mushroom-shape-icon {
position: absolute;
--icon-size: 77px;
top: -38px;
right: -56px;
}
and
card_mod:
style: |
ha-card {
height: 120px;
}
This gives a bigger box so the chips are not cut off atleast.
But to do this i need to assign each position, is there any cleaner way ?
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.sofaspotter
content_info: none
use_light_color: true
icon: mdi:light-recessed
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
position: absolute;
left: 2px;
}
- type: light
entity: light.spisestue
content_info: none
icon: mdi:light-recessed
tap_action:
action: toggle
use_light_color: true
hold_action:
action: more-info
card_mod:
style: |
ha-card {
position: absolute;
left: 42px;
}
Gives this result.
Can you please post the entire card’s code with both entities? It will be easier to troubleshoot.
jeey2k
December 30, 2023, 12:19pm
9371
Shure
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Stue
secondary: >-
{{ states('sensor.sensor_stue_co2_atom_stue_temperature') | round(0)
}} °C
icon: mdi:sofa-outline
entity: light.sofaspotter
tap_action:
action: navigate
navigation_path: stue
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
card_mod:
style: |
ha-card {
transform: scalex(-1);
padding-bottom: 20px !important;
border: none !important;
}
mushroom-state-info {
transform: scalex(-1);
}
ha-state-icon {
transform: scalex(-1);
}
mushroom-shape-icon {
position: absolute;
--icon-size: 77px;
top: -38px;
right: -56px;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.sofaspotter
content_info: none
use_light_color: true
icon: mdi:light-recessed
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
position: absolute;
left: 2px;
}
- type: light
entity: light.spisestue
content_info: none
icon: mdi:light-recessed
tap_action:
action: toggle
use_light_color: true
hold_action:
action: more-info
card_mod:
style: |
ha-card {
position: absolute;
left: 42px;
}
- type: light
entity: light.flos
content_info: none
tap_action:
action: toggle
icon: mdi:lamp
use_light_color: true
hold_action:
action: more-info
card_mod:
style: |
ha-card {
position: absolute;
left: 82px;
}
- type: light
entity: light.gubi
content_info: none
icon: mdi:chandelier
use_light_color: true
card_mod:
style: |
ha-card {
position: absolute;
left: 122px;
}
- type: conditional
conditions:
- entity: binary_sensor.nest_protect_dining_room_smoke_status
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:fire-alert
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.ms6_stue_home_security_motion_detection
state: 'on'
chip:
type: template
icon_color: blue
icon: mdi:motion-sensor
state: 'on'
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
alignment: end
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 115px;
{% if is_state('light.sofaspotter', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Kjøkken
secondary: '{{ states(''sensor.motionkjokken_temperature'') | round(0) }} °C'
icon: mdi:silverware-fork-knife
entity: light.kjokkenspotter
tap_action:
action: navigate
navigation_path: kjokken
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.kjokkenspotter
content_info: none
use_light_color: true
icon: mdi:light-recessed
tap_action:
action: toggle
hold_action:
action: more-info
- type: light
entity: light.pendellampe
content_info: none
tap_action:
action: toggle
icon: mdi:ceiling-light-multiple
use_light_color: true
hold_action:
action: more-info
- type: light
entity: light.benkebelysning
content_info: none
icon: mdi:wall-sconce-flat
use_light_color: true
- type: conditional
conditions:
- entity: binary_sensor.nest_protect_kitchen_co_status
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:fire-alert
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.motionkjokken_motion
state: 'on'
chip:
type: template
icon_color: blue
icon: mdi:motion-sensor
state: 'on'
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
alignment: end
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.kjokkenspotter', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
I see a couple of issues with your card_mod settings. Definitely fixable! Im on EST time and need sleep. I’m positive @dimitri.landerloos will see the same issues and may respond. I’ll definately follow up with edits and explanations. Please research spitting card_mod adds with .: | using @dimitri.landerloos tutorial links in his profile.
digitl
December 30, 2023, 2:27pm
9373
Despite the kitchen heating being on and the study heating being off, both results are a red fire icon.
What am I doing wrong please: my actual dashboard has 13 of these and the issue persists throughout?
type: grid
cards:
- type: custom:mushroom-template-card
primary: Kitchen
entity: climate.wiser_kitchen
icon: >-
{% if state_attr('climate.wiser_kitchen', 'is_heating') == 'true'%}
mdi:fire-off
{% else %}
mdi:fire
{% endif %}
icon_color: >-
{% if state_attr('climate.wiser_living_room', 'is_heating') == 'true'%}
blue
{% else %}
red
{% endif %}
secondary: '{{ state_attr(''climate.wiser_kitchen'', ''current_temperature'') }}'
layout: vertical
- type: custom:mushroom-template-card
primary: Study
entity: climate.wiser_study
icon: |-
{% if state_attr('climate.wiser_study', 'is_heating') == 'true' %}
mdi:fire-off
{% else %}
mdi:fire
{% endif %}
icon_color: |-
{% if state_attr('climate.wiser_study', 'is_heating') == 'true' %}
blue
{% else %}
red
{% endif %}
secondary: '{{ state_attr(''climate.wiser_study'', ''current_temperature'') }}'
layout: vertical
jeffcrum
December 30, 2023, 3:05pm
9374
1 Like
digitl
December 30, 2023, 3:09pm
9375
Thanks, fixed now with your link. I had previously tried just one back-tick.
Im pretty sure your entity doesnt have a an attribute called is_heating you are probably looking for the hvac_action
So probably something like this:
icon: >-
{% if state_attr('climate.wiser_kitchen', 'hvac_action') == 'heating'%}
mdi:fire
{% else %}
mdi:fire-off
{% endif %}
digitl
December 30, 2023, 4:14pm
9377
It does and it offers just true or false.
I suspect my problem is the repeated use of the coding for each room but I don’t know enough to be able to discover why.
Hmmm, it all looks correct to me then. Have you checked that the actual attribute moves from true to false when the heating is turned off.
digitl
December 30, 2023, 4:28pm
9379
Thanks for the suggestion. Just checked and I’ve watched it change.
At the same time, I’m sure one set of icon and icon colour changes affected the other.
digitl
December 30, 2023, 4:44pm
9380
I’ve changed icons and icon_color between the two rooms. The kitchen is heating but the study is not so it appears that the results of the If statements are reversed for both rooms.
type: grid
cards:
- type: custom:mushroom-template-card
primary: Kitchen
entity: climate.wiser_kitchen
icon: >-
{% if state_attr('climate.wiser_kitchen', 'is_heating') == 'true'%}
mdi:fire
{% else %}
mdi:fire-off
{% endif %}
icon_color: >-
{% if state_attr('climate.wiser_living_room', 'is_heating') == 'true'%}
red
{% else %}
blue
{% endif %}
secondary: '{{ state_attr(''climate.wiser_kitchen'', ''current_temperature'') }}'
layout: vertical
- type: custom:mushroom-template-card
primary: Study
entity: climate.wiser_study
icon: |-
{% if state_attr('climate.wiser_study', 'is_heating') == 'true' %}
mdi:fire
{% else %}
mdi:snowflake
{% endif %}
icon_color: |-
{% if state_attr('climate.wiser_study', 'is_heating') == 'true' %}
red
{% else %}
green
{% endif %}
secondary: '{{ state_attr(''climate.wiser_study'', ''current_temperature'') }}'
layout: vertical
hazio
December 30, 2023, 5:23pm
9381
I’m trying to replicate this with just motion, light, and media player icons on the bottom right of the card, but with no light entity background.
Icons don’t seem to show for some reason, any ideas? thanks
Post the code you have right now so we can help
hazio
December 30, 2023, 7:16pm
9384
Thanks, I edited @rhysb code then butchered it somehow lol.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Lounge
secondary: '{{ states("sensor.landing_motion_temperature") | round(0) }} °C'
icon: mdi:sofa
entity: light.living_room_light
tap_action:
action: navigate
navigation_path: lounge
hold_action:
action: toggle
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.landing_motion
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: media_player.sky_q
state_not: 'off'
- entity: media_player.sky_q
state_not: unavailable
chip:
type: template
icon_color: disabled
icon: |-
{% set media_type = state_attr('media_player.sky_q',
'media_content_type') %}
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:plex
{% endif %}
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: binary_sensor.landing_motion
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-outline
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
}
:host {
background: var(--card-background-color);
border-radius: var(--ha-card-border-radius);
}
What icons arent showing? Modified the conditons with my entities and they show up just fine.
hazio
December 30, 2023, 7:25pm
9386
Light entity icon doesn’t show at all, not sure what the last icon is tbh. I think the code also needs clearing up, as I’ve only removed the light entity for the background under card_mod and nothing else.
There is no light entity icon in your code, so i would assume that is it.
The first bit of the code that refers to your light is for the main big icon at the top left of the card
Otherwise no light entity mentioned.
(Original post by rhysb doesnt have a light entity chip either, so you would need to add your own if you want it
1 Like
hazio
December 30, 2023, 7:38pm
9388
Oh wow, makes sense now lol, thanks for your help.
1 Like
