Thekholm
July 1, 2022, 10:48am
1612
Hi,
Can someone help me with this little problem?
The chip have a border/ring around it, how do I get rid of that? This is the code I have!
square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Bathroom
secondary: '{{ states(''sensor.badrumssensor_temperature'') | round(0) }} °C'
icon: mdi:shower
entity: light.badrum
tap_action:
action: navigate
navigation_path: bathroom
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: false
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: fan.xiaomi_smart_fan_3
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:fan
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -36px;
}
card_mod:
style: |
ha-card {
height: 66px;
{% if is_state('group.bathroom_lights', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
Many thanks
dicko
July 1, 2022, 1:35pm
1613
Great idea but how would you get this to only flash if say thermostat was on heating mode. I would like it to be just grey and off when thermostat is off and not flashing.
Is that possible ?
Thanks
Martyn
Posreg
July 1, 2022, 2:28pm
1615
tip from me
try with:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
Custom stack in card removes all of the spaces between cards, creates one look
EDIT
In here the indentation is bad:
cards should be at same level as type
1 Like
Thank you for your help!
Getting closer…
KTibow
July 2, 2022, 12:01am
1618
chip-background is the background of the chip, not the icon. Right now you can only specify stuff like icon: hass:lightbulb.
rhysb
July 2, 2022, 12:50am
1619
Have you added the sensor.moon integration?
rhysb
July 2, 2022, 1:08am
1620
Yes, you can do that like this:
type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''friendly_name'' ) }}'
secondary: '{{ states(entity) | title }}'
icon: mdi:fire
icon_color: '{{ ''red'' if is_state(entity, ''heat'') else ''disabled'' }} '
entity: climate.air_conditioner
card_mod:
style: |
mushroom-shape-icon {
{% if is_state('climate.air_conditioner', 'heat' ) %}
animation: blink 1s ease-in-out infinite;
{% endif %}
}
@keyframes blink {
50% {opacity: 0.5;}
}
2 Likes
Yes.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Laundry Motion
secondary: '{{''{0:,.0f}''.format(states(entity)|int)}} %'
icon: >
{% set battery_level = (states(entity) | int / 10) | round(0) | int * 10
%}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
entity: sensor.motion_sensor_battery_level
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
tap_action:
action: more-info
fill_container: true
card_mod:
style: |
:host {
--mush-icon-size: 76px;
height: 66px;
margin-left: -20px !important;
}
ha-card {
box-shadow: none;
--card-primary-font-size: 12px;
--card-secondary-font-size: 20px;
}
2 Likes
No, this is for logged in users so they can either see a different view or a different action
hold_action:
action: {%if user=='Joe'%}more-info{%else%}none{%endif%}
@SpookyAwol
rhysb
July 2, 2022, 3:25am
1624
Looks like you have not installed card-mod.
How do you add a chip only if Joe is logged in?State Switch
Templating this way works:
double_tap_action:
action: none
badge_icon: |-
{% if is_state('person.joe','home') %}
mdi:home
{%else%}
mdi:home-import-outline
{%endif%}
But not this?
double_tap_action:
action: |-
{% if user=='Joe' %}
none
{%else%}
more-info
{%endif%}
badge_icon: |-
{% if is_state('person.joe','home') %}
mdi:home
{%else%}
mdi:home-import-outline
{%endif%}
As per docs, not a function of template card, so will use state change
rhysb
July 2, 2022, 3:41am
1626
You can stop it going transparent by adding a background to the shadow host:
:host {
background: var(--card-background-color);
border-radius: var(--ha-card-border-radius);
}
This is it added to my room card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Lounge
secondary: '{{ states("sensor.lounge_sensor_temperature") | round(0) }} °C'
icon: mdi:sofa
entity: light.lounge_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.lounge_motion_occupancy
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.lounge_tv
state_not: 'off'
- entity: media_player.lounge_tv
state_not: unavailable
chip:
type: template
icon_color: disabled
icon: |-
{% set media_type = state_attr('media_player.lounge_tv',
'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: climate.air_conditioner
state_not: 'off'
chip:
type: template
entity: climate.air_conditioner
icon_color: disabled
icon: |-
{% if is_state(entity, 'heat_cool') %}
mdi:sync
{% elif is_state(entity, 'heat') %}
mdi:fire
{% elif is_state(entity, 'cool') %}
mdi:snowflake
{% elif is_state(entity, 'dry') %}
mdi:water-percent
{% elif is_state(entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:air-conditioner
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
{% if is_state('climate.air_conditioner', 'fan_only') %}
animation: rotation 2s linear infinite;
{% endif %}
}
- type: conditional
conditions:
- entity: group.lounge_windows
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open
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;
{% if is_state('light.lounge_light', 'on') %}
background: rgba(244, 67, 54, 0.1);
{% endif %}
}
:host {
background: var(--card-background-color);
border-radius: var(--ha-card-border-radius);
}
9 Likes
rhysb
July 2, 2022, 4:42am
1627
Yes, like this:
type: custom:mushroom-template-card
primary: Pretty Mushrooms
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
ha-card {
background: url( '/local/mushroom.png' ) center no-repeat;
background-size: cover;
}
This may make the text a bit hard to see, so we can blend it like this:
type: custom:mushroom-template-card
primary: Pretty Mushrooms
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-card-background-color), 0.7) url( '/local/mushroom.png' ) center no-repeat;
background-size: cover;
background-blend-mode: overlay;
}
5 Likes
Thekholm
July 2, 2022, 6:50am
1628
Aha, I have not! Then I will do that and try again.
/Thekholm
1 Like
If anyone is looking for a way to add a pulse effect to their cards to indicate something is on or charging etc, heres a quick way:
style: |-
{% if is_state("switch.something", "on") %}
mushroom-shape-icon {
display: flex;
border-radius: 50%;
animation: pulse-black 2s infinite;
}
@keyframes pulse-black {
0% {
box-shadow: 0 0 0 0 rgb(var(--rgb-orange), 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(var(--rgb-orange), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0);
}
}
{% endif %}
There is probably a better way to do this but it’s what I made work. Maybe the author could include a custom CSS box for each card so we don’t need to add styles manually.
7 Likes
Wow, so nice. Could you also do this to a vertical/hor stack?
rhysb
July 2, 2022, 9:36am
1631
Yes, the CSS can be applied to most cards.
