hi all,
On my PC (Edge) everything looks fine
But on my iPhone not so good
The code for i looks like that:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 60% auto
grid-template-rows: auto
cards:
- type: custom:mushroom-template-card
primary: Whats-Up-Docker
secondary: '{{ states(''sensor.docker_whats_up_docker_status'') }}'
icon: mdi:docker
entity: sensor.docker_whats_up_docker_status
icon_color: blue
tap_action:
action: more-info
fill_container: true
card_mod:
style: |
:host {
--mush-icon-size: 76px;
height: 50px;
margin-left: -25px !important;
}
ha-card {
box-shadow: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: '{{ states(''sensor.docker_whats_up_docker_cpu'') }} %'
icon: mdi:chip
entity: sensor.docker_whats_up_docker_cpu
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
margin-top: 5px;
--chip-height: 40px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: template
content: '{{ states(''sensor.docker_whats_up_docker_memory_percent'') }} %'
icon: mdi:memory
entity: sensor.docker_whats_up_docker_memory_percent
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
margin-top: 5px;
--chip-height: 40px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
alignment: end
when i modify the code like that - (change grid-template-columns from 60% to 50%)
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 50% auto
grid-template-rows: auto
cards:
- type: custom:mushroom-template-card
primary: Whats-Up-Docker
secondary: '{{ states(''sensor.docker_whats_up_docker_status'') }}'
icon: mdi:docker
entity: sensor.docker_whats_up_docker_status
icon_color: blue
tap_action:
action: more-info
fill_container: true
card_mod:
style: |
:host {
--mush-icon-size: 76px;
height: 50px;
margin-left: -25px !important;
}
ha-card {
box-shadow: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: '{{ states(''sensor.docker_whats_up_docker_cpu'') }} %'
icon: mdi:chip
entity: sensor.docker_whats_up_docker_cpu
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
margin-top: 5px;
--chip-height: 40px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: template
content: '{{ states(''sensor.docker_whats_up_docker_memory_percent'') }} %'
icon: mdi:memory
entity: sensor.docker_whats_up_docker_memory_percent
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
margin-top: 5px;
--chip-height: 40px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
alignment: end
Then the Problem is, that the primary-text is not shown completely
I hope anybody of you can help me to get it solved
Does this work for you? Changed some of the sensors when testing so just change them back
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: auto
grid-template-rows: auto
cards:
- type: custom:mushroom-template-card
primary: Whats-Up-Docker
secondary: '{{ states(''sensor.docker_whats_up_docker_status'') | int }}'
icon: mdi:docker
entity: sensor.docker_whats_up_docker_status
icon_color: blue
tap_action:
action: more-info
fill_container: true
card_mod:
style: |
:host {
--mush-icon-size: 76px;
height: 50px;
margin-left: -25px !important;
}
ha-card {
box-shadow: none;
width: 232px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: '{{ states(''sensor.processor_use'') }}%'
icon: mdi:chip
entity: sensor.processor_use
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
margin-top: 5px;
--chip-height: 40px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
width: 65px !important;
}
- type: template
content: '{{ states(''sensor.disk_use_percent'') }}%'
icon: mdi:memory
entity: sensor.disk_use_percent
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
margin-top: 5px;
--chip-height: 40px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
width: 65px !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute;
top: 10px;
right: 20px;
--chip-spacing: 1px;
}
If you put any value behind your current template it will work. I think it is because your template is evaluating to a number so the template card is treating it as such. Put like this for example and it will work.
{{ states('sensor.processor_use') | round(1, 'floor') }}%
Bit of a workaround rather than solution. But it works.
Below where it says alignment, try this.
alignment: end
card_mod:
style: |
ha-card {
--chip-spacing: 1px;
}
Let me know if this works. Otherwise we will need to reduce the size of the chips themselves
1 Like
hi dimitri,
danwooller
August 6, 2023, 4:05pm
7594
Negative chip spacing gets them closer together
I’m using
--chip-spacing: -12px !important;
to get chips close enough together for my cards
1 Like
danwooller
August 6, 2023, 4:08pm
7595
For the icon colour try using elif instead of a number of different if statements.
ffm777
August 6, 2023, 4:34pm
7596
MrGrey:
Disclaimer: I’m a beginner. I’ve been using this “card” for a few weeks, on different platforms, without any issues, but I’ve likely made some rookie mistakes.
The card is very nice. Thank you! However, the input_datetime keeps disappearing on my system. I fixed it by replacing the vertical-stack-in-card by the stack-in-card in horizontal mode. Works perfectly now.
Azrael79
August 6, 2023, 5:16pm
7597
Great man - sometimes its so easy
siwilson
August 6, 2023, 6:44pm
7598
I haven’t but I am happy to do so if I knew where and how.
darko1515
August 6, 2023, 7:53pm
7599
Thanks. It worked flawlessly.
darko1515
August 6, 2023, 8:01pm
7600
Thanks for the suggestion. Not sure if I’m not doing something right but doesn’t seem to work.
2 lights on:
icon_color: |-
{% if is_state('light.candelabru_living', 'on') %} orange {% endif %}
{% if is_state('light.instalatie_wifi', 'on') %} orange {% endif %}
{% if is_state('light.veioza', 'on') %} orange {% endif %}
tap_action:
1 Like
Like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Living Room
secondary: |-
{{ states('sensor.bedroom_temperature_humidity_temperature') }}°C |
{{ states('sensor.bedroom_temperature_humidity_humidity') }} %
icon: mdi:sofa
entity: light.bedroom_lights
icon_color: |-
{% if is_state('light.bedroom_main_light', 'on') %}
orange
{% elif is_state('light.wled_segment_1', 'on') %}
orange
{% elif is_state('light.wled_segment_1', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: /mushroom-one/living
hold_action:
action: none
multiline_secondary: false
layout: horizontal
fill_container: false
double_tap_action:
action: none
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
}
:host {
--mush-icon-size: 77px;
height: 66px;
margin-left: -17px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.bedroom_main_light
double_tap_action:
action: none
content_info: none
icon: mdi:string-lights
tap_action:
action: more-info
hold_action:
action: none
use_light_color: true
card_mod: null
style: |
ha-card
{background: transparent;
border-style: none;
}
- type: entity
entity: light.wled_segment_1
double_tap_action:
action: none
icon: mdi:television-classic
icon_color: primary
use_entity_picture: false
tap_action:
action: more-info
hold_action:
action: none
content_info: none
card_mod: null
style: |
ha-card
{background: transparent;
border-style: none;
}
- type: light
entity: light.wled_segment_2
double_tap_action:
action: none
icon: mdi:floor-lamp
use_light_color: true
content_info: none
tap_action:
action: more-info
hold_action:
action: none
card_mod: null
style: |
ha-card
{background: transparent;
border-style: none;
}
- type: entity
entity: climate.bedroom_heating
double_tap_action:
action: none
icon: mdi:air-conditioner
icon_color: primary
content_info: none
use_entity_picture: false
tap_action:
action: more-info
hold_action:
action: none
card_mod: null
style: |
ha-card
{background: transparent;
border-style: none;
}
alignment: end
2 Likes
MrGrey
August 7, 2023, 1:21am
7602
Too funny… I chose to use vertical-stack-in-card because it appeared newer and stack-in-card is no longer updated. Shortly after reading your note, I had a small problem with vertical-stack-in-card clipping some corners so I decided to try stack-in-card and it worked perfectly.
I guess newer isn’t always better.
MrGrey.
darko1515
August 7, 2023, 5:19am
7603
Thanks Dimitri. Apreciat it.
Proud of my dashboard. Took a while to read this mushroom thread but worth it.
3 Likes
j.otte
August 7, 2023, 6:17am
7604
do more people have this problem? that the mushroom animation cards don’t do the animation?
Almost anywhere in your card mod yaml you have “ha-icon” it should now be “ha-state-icon” there are a few exceptions. But unless you are animating the icons on like buttons it should fix that aspect.
Then anywhere you have “–icon-animation” it should now be just “animation”
But if you have “–shape-animation” you should leave that.
Also if you have anywhere where your structure looks like this:
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: rotation 1s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
It will now need to be simplified down to this:
card_mod:
style: |
ha-state-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
100% {transform: rotate(360deg);}
}
2 Likes
j.otte
August 7, 2023, 9:05am
7606
thanks we are going to try
danwooller
August 7, 2023, 10:11am
7607
darko1515:
icon_color: |-
{% if is_state('light.candelabru_living', 'on') %} orange
{% elif is_state('light.instalatie_wifi', 'on') %} orange
{% elif is_state('light.veioza', 'on') %} orange {% endif %}
tap_action:
If you have a series of if statements then you’re setting the color each time, but with elif it only matches once.
1 Like
Good evening, would anybody be able to help here im really struggling to get my head around what i need to do.
I would like to change the entity icon colour based on the state of the entity.
I have the below:
type: custom:mushroom-entity-card
entity: sensor.myenergi_zappi_24887740_plug_status
layout: vertical
tap_action:
action: none
hold_action:
action: none
fill_container: true
name: Hedwig Status
double_tap_action:
action: none
I tried adding below but it doesent work:
icon_color: |2
{% if is_state('sensor.myenergi_zappi_2440_plug_status', 'EV Connected') %}
amber
{% elif is_state('sensor.myenergi_zappi_2740_plug_status', 'EV Disconnected') %}
red
{% elif is_state('sensor.myenergi_zappi_2440_plug_status', 'Charging') %}
green
{% endif %}
Any assistance would be appreciated
