I would like to have the icon on the right side of the text in a Chip card.
What should I write?
would you like to share the code of your cards?
Thanks for the code.
One minute before your reply i found another code.
Works perfect.
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
border: none;
How can I make the Mushroom template or entity card act more like a standard lovelace entity (switch) card?
What I want to achieve:
- State of switch (on/off) should be reflected in Icon color
- Power draw of switch should be displayed as secondary info (got that already)
- On/Off state should be available as 2nd secondary info
At the moment I cannot find a way to make the Icon color dynamic. Anyone with a hint how to do that?
My code:
type: custom:mushroom-template-card
primary: Office Monitor
secondary: '{{states (''sensor.steckdose_buro_monitor_power'')|float|round(0)}} W'
icon: mdi:monitor
entity: switch.steckdose_buro_monitor
icon_color: green
multiline_secondary: true
something around ā¦
icon_color: "{{'red' if states.light.wohnzimmer.state == 'on' else 'grey' }}"
Adapt the if statement to your situation.
1 Like
None is here to help me in this?
I solved this with auto-entities. You might start from below and modify to your requirements. With the template option you can do anything.
- type: custom:auto-entities
show_empty: false
card:
type: grid
columns: 2
title: Sonos
card_param: cards
filter:
template: |
[
{% for player in states.media_player
| selectattr('state', 'eq', 'playing')
| selectattr('attributes.group_members', 'defined')
if player.attributes.group_members[0] == player.entity_id %}
{{
{
'type': 'custom:mini-media-player',
'entity' : player.entity_id,
'artwork' : 'full-cover',
'group' : 'true',
'hide': {
'power': true,
'icon': true,
'controls': true,
'name': false,
'volume' : true
},
}
}},
{% endfor %}
]
Thatās problem from Mi Box. If you stay at home screen you seen the correct screenshot, but in apps thatās have black screen. Maybee someone know how fix it? I could not find a solution to the problem in other topics 
I have done this, and itās 95% UI editable.
- You need vertical-stack-in-card since stack-in-card is not UI editable
- It requires
card_mod, which is not editable via the UI - I havenāt found a way to make the colors adapt to dark/light mode, so you need to set the chip background color manually (
17, 17, 17, 0.5looks good for dark mode) - There also seems to be a bug in vertical-stack-in-card where sometimes the UI breaks. If you change it to
type: vertical-stack, then back totype: custom:vertical-stack-in-cardit should work again.
type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 80px auto
grid-template-rows: auto
margin: 0
padding: 5px
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: template
icon: mdi:home
tap_action:
action: navigate
navigation_path: /lovelace
card_mod:
style: |
ha-card {
background-color: rgba(255, 255, 255, 0.5) !important;
border-radius: var(--ha-card-border-radius, 12px) !important;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:chip
content: 22.46C
card_mod:
style: |
ha-card {
background-color: rgba(255, 255, 255, 0.5) !important;
border-radius: var(--ha-card-border-radius, 12px) !important;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: custom:mushroom-template-card
primary: Home
icon: mdi:home
fill_container: true
tap_action:
action: none
hold_action:
action: none
icon_color: red
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
padding: 0px 16px 8px !important;
}
:host {
--mush-card-primary-font-size: 1.2rem;
}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-red-color), 0.2);
}
4 Likes
Hi, rhysb. Thanks for your cards and notes 
Can you help me with configuring the flow in Node-Red?
I exported your code, changed Format Album Art URL and add my device (entity) media_player.desktop in all nodes (Muted Color, Vibrant, etc)
but that doesnāt effect to card buttons
First of all, Thanksā¦ i tried the template in developers tools but i get only āDomain: Media Playerā also if one of my media players is in āplayingā statusā¦ where i am wrong?
Can you, please, try according your template to my needs? I am not so good with templatesā¦
1 Like
Looks like you donāt have card_mod installed. Make sure you have installed it properly through HACS.
You can set custom colors in your theme that have different values for dark/light mode.
Could you share the code of this? 
1 Like
That is a good idea, I didnāt think about adding a new theme color.
I would prefer a way to detect dark mode inside card_mod itself, like with using :host([dark-mode])
hey all. donāt think this is necessarily a mushroom specific question, but itās occuring with mushroom cards so, here goesā¦
I use HA on my laptop, phone and 2 wall mounted Fire 10 tablets (these 2 running Fully Kiosk). On 3 of the devices (laptop, phone and 1 tablet) everything (including the mushroom cards) show up beautifully. One tablet however persists in insisting that none of the mushroom cards exist. Iāve tried clearing the cache of Fully Kiosk (both within the app, and of the app itself), uninstalling Fully Kiosk and reinstalling it, rebooting the device several times - doesnāt seem to make a difference - it refuses to display that view with those cards.
Even trying to load it on Silk browser results in those cards not being visible.
Iām at a complete loss here. Any suggestions would be greatly appreciated.
I also love the way the sliders work with these cards and would love to know how you did that. I have searched HACS for a working swipe card but canāt find a good one that works the way yours does to swipe between entities.
thx, its working
1 Like
Are both Fire 10 tablets the same model / year? Sounds like one of them is running an older browser that canāt handle what HA is dishinā out.