Try to put this part in the template section to see how it evaluates in your system.
And you can have this DRY
mdi:television{{ '-off' if is_state('media_player.sony_bravia_tv','off') }}
with the template card this is working but not with an entity cards
That is correct, as the only mushroom card (that Iām aware of) where you can use templates (jinja-code) is the template-card
1 Like
I have a pop-up with a mushroom card with a couple of entities, like so:
- type: custom:mushroom-entity-card
entity: switch.game_pc
tap_action:
action: toggle
The problem is that those entities are PCās, so when clicked they donāt turn on immediately.
Is it possible to, when clicked, show a loader until itās on (or off)?
I have a SVG already located at: /local/loader.svg.
Hey all,
I know it has been written somewhere, but I canāt find it anymore 
Currently I have the issue with the ābordersā appearing.
At the moment, I am using the built in default theme and then select via the UI whether I want it to be Auto, Light or Dark. How can I remove these borders easiest and do I have to do in multiple places as I am using both Web, Android and iOS devices?
Thanks 
Try the Mushroom Shadow theme.
1 Like
Iāve done a search on this topic, and I was looking for a way to implement Entities Card Configuration - header toggle for the group? Is this possible?
Literally search this topic for ābordersā
What does that even mean?
1 Like
I just repeat the mushroom light card with different options enabled/disabled. (Using lovelace_gen to pass in the light entity-id, and a self-defined type:
# lovelace_gen
title: "{{ name }}"
{% if state == 'off' %}
right_button: "Aan"
right_button_action:
service: light.turn_on
data:
entity_id: "{{ entity }}"
{% else %}
right_button: "Uit"
right_button_action:
service: light.turn_off
data:
entity_id: "{{ entity }}"
{% endif %}
dismissable: true
size: normal
style: |
--popup-min-width: 360px;
--popup-max-width: 540px;
--popup-border-width: var(--ha-card-border-width, 2px);
--popup-border-color: var(--ha-card-border-color, var(--divider-color, #eee));
--popup-border-radius: 28px;
--popup-background-color: var(--primary-background-color);
--popup-padding-x: 0px;
--popup-padding-y: 0px;
card_mod:
style:
ha-dialog$: |
div.mdc-dialog div.mdc-dialog__scrim {
{{ "{%" }} set r = state_attr('{{ entity }}', 'rgb_color')[0] {{ "%}" }}
{{ "{%" }} set g = state_attr('{{ entity }}', 'rgb_color')[1] {{ "%}" }}
{{ "{%" }} set b = state_attr('{{ entity }}', 'rgb_color')[2] {{ "%}" }}
background: rgba({{ "{{" }}r{{ "}}" }}, {{ "{{" }}g{{ "}}" }}, {{ "{{" }}b{{ "}}" }},0.8);
}
content:
type: custom:vertical-stack-in-card
card_mod:
class: invisible
cards:
- entity: "{{ entity }}"
type: custom:light-entity-card
shorten_cards: false
consolidate_entities: true
child_card: true
hide_header: true
color_wheel: true
persist_features: true
brightness: false
color_temp: false
white_value: false
color_picker: true
smooth_color_wheel: true
speed: false
intensity: false
force_features: false
effects_list: false
card_mod:
class: invisible
# style: |
# ha-card {
# padding: -15px;
# background: rgba(var(--rgb-primary-background-color), 0.1);
# }
{% if type != 'onoff' %}
- type: custom:mushroom-light-card
entity: "{{ entity }}"
fill_container: true
layout: horizontal
primary_info: none
secondary_info: none
icon_type: icon
icon: hue:scene-bright
show_brightness_control: true
use_light_color: true
show_color_temp_control: false
collapsible_controls: false
card_mod:
class: invisible
{% if type != 'dimmable' %}
{% if type != 'rgb' %}
- type: custom:mushroom-light-card
entity: "{{ entity }}"
fill_container: true
layout: horizontal
primary_info: none
secondary_info: none
icon_type: icon
icon: mdi:theme-light-dark
show_brightness_control: false
use_light_color: true
show_color_temp_control: true
collapsible_controls: false
card_mod:
class: invisible
{% endif %}
{% endif %}
{% endif %}
If you leave out the lovelace_gen logic and just repeat the card, the slider will not be visible if the light doesnāt support it. (allthough the icon might still show).
EDIT: took some inspiration from yours and colored outside of the popup with the rgb color of the light, screenshots donāt show it. 2 layers of jinja because of lovelace_gen & card_mod
6 Likes
SOLVED
quote from from FB-post by Andrew Doenau:
āSwipe-card just allows you to swipe across between cards, it doesnāt make the chip-card (or any other card) any wider than it already is. So perhaps just break your chips in to two separate chip-cards within the swipe-card and you can swipe between them.ā
Issue:
Is there a way to have a row of mushroom-chips-cards within a swipe-card - and keep it on āone lineā ?
I have quite a few status-chips Iād like to have on one line, with the most important ones to the left and less and less important to the right (some conditional, so variable number of chips showing)
when putting the chips-card-cards within the swipe-card it drops to two lines whenever there are more than suitable for āone screen-widthā.
Anyone with a workaround or config-examples that works??
1 Like
Awesome work thank you for sharing.
Could you please explain how you managed to stick the chips to the bottom of the screen? I only managed it at the top.
1 Like
I use a panel view, with a vertical stack, landscape gets the top chips card sticky and a grid layout card beneath. Portrait also has a footer chips card below that:
view:
# lovelace_gen
{% for view in _global.views %}
{% if view.name != 'main' %}
- type: panel
path: {{ view.name }}
subview: true
cards:
- type: custom:mod-card
card_mod:
class: invisible
style: |
ha-card {
border-radius: 0px !important;
border-width: 0px !important;
{{ "{%" }} if state_attr( "media_player.global", "entity_picture" ) != none {{ "%}" }}
background: center / cover no-repeat fixed url( '{{ "{{" }} state_attr( "media_player.global", "entity_picture" ) {{ "}}" }}' );
{{ "{%" }} endif {{ "%}" }}
}
card:
type: custom:state-switch
entity: mediaquery
states:
'(orientation: landscape)':
type: vertical-stack
cards:
- !include
- .cards/sticky.yaml
- view: {{ view.name }}
position: both
- type: custom:layout-card
layout_type: custom:grid-layout
layout: !include .cards/layout.yaml
cards: !include .cards/{{ view.name }}.yaml
'(orientation: portrait)':
type: vertical-stack
cards:
- !include
- .cards/sticky.yaml
- view: {{ view.name }}
position: header
- type: custom:layout-card
layout_type: custom:grid-layout
layout: !include .cards/layout.yaml
cards: !include .cards/{{ view.name }}.yaml
- !include
- .cards/sticky.yaml
- view: {{ view.name }}
position: footer
{% endif %}
{% endfor %}
grid layout layout.yaml:
height: calc(100vh - 58px)
margin: -58px 0 0 0 !important
padding: 62px 0 0 0 !important
reflow: true
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))
grid-gap: 0
grid-template-rows: masonry
grid-auto-flow: dense
place-content: start center
place-items: start stretch
sticky.yaml (header/footer/combined chip card definition):
# lovelace_gen
type: custom:mushroom-chips-card
alignment: justify
card_mod:
class: sticky
style: |
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
{% if position == "footer" %}
bottom: 0;
{% else %}
top: 0;
{% endif %}
}
ha-card {
background: none;
{% if position == "footer" %}
margin: 0 4px 4px 4px;
{% else %}
margin: 4px 4px 0 4px;
{% endif %}
--ha-card-border-width: 0 !important;
--chip-border-width: 1px;
--chip-height: 48px;
--chip-border-radius: 24px;
}
chips:
{% for headerview in _global.views %}
{% if (headerview.position == position) or (position == "both") %}
{% if headerview.name == view %}
{% if view == "main" %}
- type: action
icon: mdi:tablet-dashboard
tap_action:
action: fire-dom-event
browser_mod:
service: script.start_url
data:
browser_id: THIS
{% else %}
- type: back
{% endif %}
{% else %}
- tap_action:
action: navigate
navigation_path: /lovelace/{{ headerview.name }}
{% for key in headerview.chip|list %}
{{ key }}: {{ headerview.chip[key]|tojson }}
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
if not using lovelace_gen ignore most of the weird stuff and focus on the card_mod css & the card structure.
1 Like
card_mod:
style: |
ha-card {
border: solid 0px ;
}```Just wanted to pop in here and say THANK YOU to the creators of these cards. I really love the design of these and am so glad that there are so many community members that care not only about home automation, but also the user experience to make delightful upgrades like these.
1 Like
Thank you for the code.
Is it possible to have the progress bar ring around the wifi icon and the text beside that as in the pic below using mushroom chip card ?
Kindly guide
1 Like
thank your for the nice battery card.
I have in den friendlyname a letter in caps:
but in the card the P is small:
is there a way to fix this?
1 Like
Try this:
secondary: '{{ state_attr(entity, "friendly_name") }}'
The | title is left out which causes the capitals as first letter.
2 Likes
perfect - thanks!
Never mind, I forgot to install the right addon.