Are you using any themes?
I have installed âMushroom Themesâ and am using âMushroom Shadowâ overall, it is set on my profile.
Try switching to the default theme and see if you have the same issue. Worth eliminating theme issues.
You have me stumped.
is it possible that it has sth. with the HA Version? I do not have the latest 2024.4.
I have Core 2024.3.0. + OS 12.0
PS: I have even created a new empty view, and the problem still existsâŚ
Its a possibility but I never seen an alignment issue with chips like yours.
Maybe someone else can test as well.
I see now, that code works on my windows (chrome)! On Mac Safari though, i have that strange allignment⌠it might be a Safari Bug :nauseated_face (edit: not Safari bug, but i think bug in chips):
For those who are interested:
Here you can see that there is a margin-right for all chip-container children (except the last one). That is basically the space between multiple chips. This margin definition is actually just relevant for the chip itself (mushroom-conditional-chip). But i think because of its definition (.chip-container:not(:last-child)) it somehow also effects the grand-children. So we see the margin-right also for the specific chip type mushroom-template-chip. This does not have any effect on Chrome, but Safari has this strange behaviour and adds some space to top.
Here you see a workaround: when i set margin-right of mushroom-template-chip to 0, it behaves also correctly on Safari:
I think this is relevant for all devices which run safari⌠(iphone, ipad etc.)
I think the margins between the chips should be defined with the direct child symbol â.chip-container > *â instead of â.chip-container *â so it should not effect the other elements. Where is the correct location to discuss this / open issue? Github?
Where can i change the definition â.chip-container:not(:last-child)â globally?
Anyone know please? thanks
Thanks! Always good to have a second test. It looks like he pinned it down to Chips not playing well with Safari Browser.
how edit light slider background color when light is off?
@milutm This will change the OFF color
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--bg-color-inactive: red !important;
}
1 Like
Hello all,
I have a problem with mushroom cards and I canât seem to fix it.
This cards change color wether one person is home or isnât. However, the distance between the cards getting bigger when someone is leaving home. Does anyone know where i made a mistake in my code?
Oh and maybe someone can help me a bit more. I also would like it to pulse green when someone is at home and pulse red when someone is out. I donât know how to do it. This is the code i found with a pulse badge.
CODE FROM ABOVE
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- square: false
columns: 3
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.robert
state: home
chip:
type: entity
entity: person.robert
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: -20px;
}
- type: conditional
conditions:
- entity: person.froukje
state: home
chip:
type: entity
entity: person.froukje
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: -20px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.robert
state_not: home
chip:
type: entity
entity: person.robert
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.robert', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.robert', '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: -20px;
}
- type: conditional
conditions:
- entity: person.froukje
state_not: home
chip:
type: entity
entity: person.froukje
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.froukje', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.froukje', '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: -20px;
}
PULSE BADGE
type: custom:mushroom-person-card
entity: person.robert
card_mod:
style:
mushroom-badge-icon$: |
.badge {
animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7);}
70% {box-shadow: 0 0 0 6px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
Your biggest mistake, is you copy code you donât understand 
Itâs an awfull mess
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- square: false
columns: 3
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.robert
state: home
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.robert
state_not: home
So You have a âstack-in cardâ with no further definition, beside
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
For another unknown reason
In this masonry-layout-card you then place
cards:
- square: false
columns: 3
type: grid
cards:
A Grid ! ( 3 columns )
where you place a horizontal-stack ( This one seems ok, somehow )
How ever then you place another horizontal-stack ( In your grid !)
Which ends up in column 2 ( 1=Home 2=Not_Home )
And !, what you apparently just want is that the cards change color + âpulseâ
Which you accomplice with card-mod !
So what are all the cards stacks, grid, horizontal, and conditional-chips good for ?
You mix everything together in a big pile of ⌠âsomethingâ ⌠nice spoken
So itâs not easy to âtell youâ what and where, beside my attempt above
- in short you have 2 conditional-cards in First horizontal-stack, in your grids column1, in your masonry layout, in your stack-in-card , those card only shows when persons is Home
- then you have 2 conditional cards in Second horizontal-stack, in your grids column2, in your masonry layout, in your stack-in-card , those card only shows when persons is Not_Home
PS: Do you have plans for column 3, which is relevant in this context ?
Trying to change justify-content to flex-start instead of flex-end:
Cannot manage to get it right:
mushroom-climate-temperature-control$:
mushroom-button-group$: |
.container {
justify-content: flex-start!important;
}
For some reason it doesnât work. It works if I inspect in browser and change the value. Am I pointing it wrong?
1 Like
You need to post your code.
1 Like
type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
entity: climate.hc1
icon: |-
{% if is_state(entity, 'heat') %}
mdi:fire
{% elif is_state(entity, 'heat_cool') %}
mdi:sun-snowflake
{% elif is_state(entity, 'cool') %}
mdi:snowflake
{% elif is_state(entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:radiator-off
{% endif %}
icon_color: |-
{% if is_state_attr(entity,
'hvac_action', 'heating') %}
deep-orange
{% elif is_state_attr(entity,
'hvac_action', 'cooling') %}
var(--blue-color)
{% elif is_state_attr(entity,
'hvac_action', 'fan') %}
turquoise
{% else %}
disabled
{% endif %}
primary: |
{{ states('sensor.a4c1385c22dd_temperature') | round(1) }} °C
secondary: |-
{% if is_state(entity, 'heat_cool') %}
Heat/Cool
{% elif is_state_attr(entity,
'hvac_action', 'heating') %}
Heating
{% elif is_state_attr(entity,
'hvac_action', 'cooling') %}
Cooling
{% elif is_state(entity, 'heat') %}
Heat
{% elif is_state(entity, 'cool') %}
Cool
{% elif is_state(entity, 'fan_only') %}
Fan
{% else %}
Off
{% endif %}
- type: custom:mushroom-template-card
entity: sensor.a4c1385c22dd_humidity
primary: |
{{ states(entity) | round(1) }} %
secondary: Humidity
icon: mdi:water-percent
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.a4c1385c22dd_temperature
name: Temperature
color: var(--red-color)
- entity: sensor.a4c1385c22dd_humidity
name: Humidity
color: var(--light-blue-color)
y_axis: secondary
hours_to_show: 12
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
points: false
labels: false
labels_secondary: false
fill: fade
card_mod:
style: |
.line--rect,
.fill--rect,
.line--points {
{% set state = states('climate.hc1') %}
{% set states = {'heat_cool':'green',
'heat':'#FF5722',
'cool':'var(--blue-color)',
'dry':'orange',
'fan_only':'turqoise'} %}
{{states.get(state,'grey')}}
fill: {{COLOR}};
stroke: {{COLOR}};
}
.line--rect:last-of-type,
.fill--rect:nth-of-type(2),
.line--points:last-of-type {
fill: var(--blue-color);
stroke: var(--blue-color);
}
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :first-child {
width: 70%;
flex: auto;
}
div#root > :last-child {
width: 30%;
flex: auto;
}
card:
type: horizontal-stack
cards:
- type: custom:mushroom-climate-card
entity: climate.hc1
layout: horizontal
primary_info: none
secondary_info: none
icon: mdi:fire
icon_type: icon
show_temperature_control: true
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
border-style: none;
display: flex;
justify-content: center;
flex-direction: column;
}
mushroom-climate-temperature-control$:
mushroom-button-group$: |
.container {
justify-content: flex-start!important;
}
- type: custom:mushroom-template-card
icon: mdi:thermometer-water
icon_color: |
{% if is_state(entity, 'eco') %}
light-green
{% elif is_state(entity, 'high_demand') %}
red
{%- else -%}
orange
{%- endif %}
layout: horizontal
entity: water_heater.dhw1
secondary: |
{% if is_state(entity, 'eco') %}
Eco
{% elif is_state(entity, 'high_demand') %}
Komfort
{%- else -%}
Normal
{%- endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
border-style: none;
display: flex;
justify-content: center;
flex-direction: column;
}
The space you are trying to occupy is reserved for the heat_cool setting. There is not much room for moving the control buttons unless you move to margin adjustments. That would only work if your system doesnât have heat_cool.
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.container {
background-color: grey !important;
margin-left: -130px;
}
.: |
ha-card {
box-shadow: none;
background: none;
border-style: none;
display: flex;
justify-content: center;
flex-direction: column;
}
The margin adjust is just a quick fix. Iâm sure there are other ways if we individualize the control groups.
1 Like