Is something missing from this? The actual state?
Think this works?
"{{ 'ARMED HOME' if states('alarm_control_panel.the_bobak_s_alarm') == 'armed_home' or states('alarm_control_panel.the_bobak_s_alarm') == 'disarmed' else 'ARMED AWAY' }}";
My bad, copy and paste errorâŚ
content:"{{ 'ARMED HOME' if is_state(config.entity, 'armed_home') else 'ARMED AWAY'}}";
1 Like
All good! I actually got the above code to work. Everything works as it should now! Again, greatly appreciate your help!
Hi, Iâm trying to resize the entity card icon, but it doesnât work when I use an entity-icon, it just applies to the default mdc icon.
Also, I canât find a way to apply changes to a specific chip. When I paste the code it just disappears in the UI when I click save, or gives me error in yaml mode.
type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: navigate
navigation_path: /lovelace/device
icon: mdi:bell-outline
hold_action:
action: none
double_tap_action:
action: none
content: ""
- type: entity
entity: person.one
content_info: none
use_entity_picture: true
alignment: end
card_mod:
style: |
ha-card {
margin-top: 22px;
}
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
--chip-icon-size: 30px;
}
mushroom-entity-chip:nth-child(2)$: |
ha-state-icon {
--chip-icon-size: 30px;
}
layout_options:
grid_columns: full
Any ideas? Thanks
One wayâŚ
- type: entity
entity: person.one
content_info: none
use_entity_picture: true
card_mod:
style: |
.avatar {
--avatar-size: 50px !important;
}
1 Like
Thanks, but It doesnât matter what card_mod code I paste, it gets removed when I click save.
What card mod version are you on?
If v3.5, install 3.4.4
1 Like
Oh wow, didnât realise this was a bug. Downgrading fixed it, thank you!
Iâm trying to add some custom styles to the hue rgb sliderâŚhowever I canât seem to access the mushroom-slider. What am I doing wrong?
type: custom:hue-like-light-card
entities:
- light.hue_outdoor_pedestal_1
- light.hue_outdoor_pedestal_2
- light.hue_outdoor_spot_1
- light.hue_outdoor_spot_2
- light.hue_outdoor_spot_3
title: Pad achter
scenes: []
hueScreenBgColor: theme-color
offShadow: false
hueBorders: false
slider: mushroom
card_mod:
style:
.: |
ha-card div.tap-area {
height: 80px !important;
display: grid;
grid-template-columns: 64px 1fr;
grid-template-areas: "i n";
}
ha-card .text-area {
margin: 0;
display: flex;
justify-self: start !important;
grid-area: n;
max-width: 100%;
align-self: center;
justify-self: center;
}
ha-card .text-area h2 {
margin: 0 !important;
font-size: 16px !important;
font-weight: 400 !important;
color: var(--gray800) !important;
}
ha-card .text-area .desc {
font-size: 10px !important;
font-weight: 400 !important;
color: var(--gray800) !important;
}
ha-icon {
display: flex;
grid-area: i;
height: 100%;
width: 100%;
max-width: 100%;
max-height: 100%;
align-self: center;
justify-self: center;
overflow: hidden;
justify-content: center;
align-items: center;
position: relative !important;
transform: none !important;
left: 0 !important;
top: 0 !important;
}
ha-switch {
top: calc( 50% - 10px )!important;
}
.brightness-slider {
position: absolute !important;
top: 0;
left: 0;
margin: 0 !important;
width: 100%;
height: 80px;
}
hue-mushroom-slider-container$: |
mushroom-slider {
margin: 0 !important;
width: 100% !important;
position: absolute !important;
top: 0;
left: 0;
height: 80px;
--control-height: 80px !important;
border-radius: 25px !important;
overflow: hidden !important;
}
hue-mushroom-slider-container$:
mushroom-slider$: |
.slider {
}
Is it possible to template the secondary information(4 hours ago) of a Select Card:
So it displays:
{{ states('sensor.iphone_tracker_area') ~ " - " ~ states('sensor.iphone_tracker_distance') ~ "m" }}``
Thanks 
Hello everyone,
How do I put shadow on my chip cards?
Blockquote
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:- type: custom:mushroom-chips-card
chips:-
type: alarm-control-panel
entity: alarm_control_panel.alarme
content_info: none
name: Alarm
card_mod:
style: |
ha-card {
top: 2px;
border: 0px;
âtext-color: rgb(var(ârgb-grey));
background: rgba(var(âmush-rgb-black)) !important;
âchip-box-shadow:0px 4px 5px -3px rgba(0,0,0,0.75);
} -
type: template
entity: lock.fechadura
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 %}
card_mod:
style: |
ha-card {
top: 2px;
border: 0px;
âtext-color: rgb(var(ârgb-grey));
background: rgba(var(âmush-rgb-black)) !important;
âchip-box-shadow:0px 4px 5px -3px rgba(0,0,0,0.75);
}
-
- type: custom:mushroom-chips-card
Blockquote
I canât get to change the background of my shape from the lock cardâŚ
card_mod:
style: |
mushroom-shape-icon$
.shape {
--shape-color: lightgreen !important;
}
ha-state-icon {
color: green;
}
The lock itself changes from red to green, but the background stays light red.
Iâd like to swap the colours⌠can that also be done? Green for open and red for closed. Itâs a pet door.
Look in the first post, section regarding âwhat .: | and $ doesâ
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: lightgreen !important;
}
.: |
ha-state-icon {
color: green;
}
Any help with the animation? I had this working and now it isnât. My guess is one of the other formatting I added is throwing it off?
type: custom:mushroom-cover-card
entity: cover.garage_door_0a061f_ratgdo
layout: horizontal
show_buttons_control: true
show_tilt_position_control: false
show_position_control: false
grid_options:
columns: 12
rows: 2
name: Garage Door - Main
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 40px;
}
--shape-animation:{{ 'ping 2s infinite' if is_state(config.entity, 'open') else 'none' }};
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
.shape {
--shape-color: null !important;
}
.: |
ha-state-icon {
{% set state = states('cover.garage_door_0a061f_ratgdo') %}
{% if state == ('open') %}
color: var(--red-color) ;
{% else %}
color: var(--green-color) ;
{% endif %}
}
mushroom-state-info$: |
.container {
justify-content: flex-start !important;
align-items: start !important;
gap: 8px !important;
}
.info {
text-align: left !important;
}
mushroom-cover-buttons-control$:
mushroom-button:nth-child(1)$: |
.button {
margin-top: 0px !important;
margin-left: -107px !important;
height: 35px !important;
width: 90px !important;
}
mushroom-button:nth-child(2)$: |
.button {
margin-top: 0px !important;
margin-left: -52px !important;
height: 35px !important;
width:90px !important;
}
I think you just need to delete â}â here
1 Like
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 40px;
--shape-color: null !important;
--shape-animation:{{ 'ping 2s infinite' if is_state(config.entity, 'open') else 'none' }};
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
mushroom-state-info$: |
.container {
justify-content: flex-start !important;
align-items: start !important;
gap: 8px !important;
}
.info {
text-align: left !important;
}
mushroom-cover-buttons-control$:
mushroom-button:nth-child(1)$: |
.button {
margin-top: 0px !important;
margin-left: -107px !important;
height: 35px !important;
width: 90px !important;
}
mushroom-button:nth-child(2)$: |
.button {
margin-top: 0px !important;
margin-left: -52px !important;
height: 35px !important;
width:90px !important;
}
.: |
ha-state-icon {
{% set state = states('cover.garage_door_0a061f_ratgdo') %}
{% if state == ('open') %}
color: var(--red-color) ;
{% else %}
color: var(--green-color) ;
{% endif %}
}
@Lasse_R is correct, --shape-animation needs to be inside the .shape - i also just moved some things around for my preference.
You are also using config.entity in some places in the code and referencing the entity directly in others. I would stick to config.entity unless you are referring to a different entity entirely.
1 Like
Perfect! This worked, thank you. Thanks for the heads up on the state. Iâll make that change to clean it up. Piecing 20 different post online to make a card work.
Searching my system for paper-xx variables they still seem to be used in Mushroom? Didnt we get an update yet?
Why canât I see the number of lights on the top of the chip card anymore? Could someone help me solve this problem please?
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.luzes_casa
state_not: "off"
chip:
type: template
entity: sensor.luzes_acesas
icon: mdi:lightbulb
icon_color: amber
card_mod:
style: |
ha-card {
top: 2px;
border: 0px;
--text-color: rgb(var(--rgb-grey));
background: rgba(var(--mush-rgb-black)) !important;
--chip-box-shadow:0px 4px 5px -3px rgba(0,0,0,0.75);
}
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
ha-card:after {
content: "{{ expand(states.group.luzes_casa) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
I want to change the font size, here is my code
cards:
- type: custom:mushroom-climate-card
entity: climate.trv_bedroom_front_thermostat
fill_container: false
show_temperature_control: true
collapsible_controls: true
name: TRV Bedroom Front
card_mod:
style: |
ha-card {
width: 190px;
}
This works
card_mod:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 12px;
--card-primary-font-size: 12px;
}
but then the width does not work
How do I combine the card width and font size