Anyway to use the Media player card with entity-filter?
did you solved it?
I have the same problem just with bond.
I made a shell command which i want to connect to the oscillating button.
Post your full card so we can see what you are doing.
Yes, you can do so like this.
Mushroom Opaque Shape
type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
ha-card {
--ha-card-background: rgba(var(--rgb-card-background-color), 0.8) url('/local/mushroom.png') center / cover;
background-blend-mode: saturation;
}
mushroom-shape-icon {
--shape-color: color-mix(in srgb, var(--icon-color) 20%, var(--card-background-color)) !important;
}
This replaces the current rgba(var(--rgb-[color]), 0.2) with color-mix(in srgb, var(--icon-color) 20%, var(--card-background-color)). color-mix is a very new CSS command and while it is supported by Chrome & Edge, it may not be supported by other browsers yet.
2 Likes
Button Card seems to handle the @keyframes weirdly. They only seem to work when applied to the first card and require a page refresh. Perhaps it’s how extra_styles are handled 
.
Apart from that there are a few issues. --shape-color only exists for Mushroom Cards. You can’t use the HEX color, --color-blue, with rgba(). Lastly, img_cell is empty.
Here is a working example for you. It needs to be the first button-card on the page.
type: custom:button-card
icon: mdi:motion-sensor
name: Animation Test
styles:
img_cell:
- animation: motion 1s infinite
- background-color: color-mix(in srgb, var(--blue-color) 20%, transparent)
- height: 42px
- width: 42px
- border-radius: 50%
icon:
- animation: clip 2s linear infinite
- color: var(--blue-color)
- height: 21px
- width: 21px
extra_styles: |
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
@keyframes motion {
0%, 100% { background-color: color-mix(in srgb, var(--blue-color) 20%, transparent) }
50% { background-color: color-mix(in srgb, var(--blue-color) 30%, transparent) }
}
BTW, I’m not really an expert on button-card, I’ve only used it for this and my previous example to you 
.
1 Like
Today is {{ now().strftime('%A, %-d %B %Y') }}
You can adjust the spacing between the Chip Icon and Content like this:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:cookie
icon_color: brown
content: 1 Cookie
- type: template
icon: mdi:cookie
icon_color: brown
content: 2 Cookies
- type: template
icon: mdi:cookie
icon_color: brown
content: 3 Cookies
card_mod:
style:
mushroom-template-chip:
$: |
ha-icon {
margin-right: 20px;
}
If you would like to do it for a specific Chip you can so like this:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:cookie
icon_color: brown
content: 1 Cookie
- type: template
icon: mdi:cookie
icon_color: brown
content: 2 Cookies
- type: template
icon: mdi:cookie
icon_color: brown
content: 3 Cookies
card_mod:
style:
mushroom-template-chip:nth-child(3)$: |
ha-icon {
margin-right: 20px;
}
2 Likes
Hey, @rhysb cheers. CSS is not my strong suite, but how do I add this to my existing card_mod Styling?
type: custom:stack-in-card
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: weather
entity: weather.bells_creek
show_conditions: true
show_temperature: true
- type: template
entity: sensor.solarnet_power_grid
content: '{{ states(''sensor.solarnet_power_grid'', with_unit=True) }}'
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
icon: mdi:swap-horizontal-circle
icon_color: |-
{% set state=states('sensor.solarnet_power_grid') %}
{% if is_number(state) and state | float <= 0 %}
green
{% elif is_number(state) and state | float >= 0 %}
red
{% endif %}
- type: template
entity: sensor.symo_10_0_3_m_1_power_ac
content: |-
{% set state=states('sensor.symo_10_0_3_m_1_power_ac') %}
{% if is_number(state) and state | float <= 0 %}
{{ states('sensor.symo_10_0_3_m_1_power_ac', with_unit=True) }}
{% elif is_number(state) and state | float >= 0 %}
{{ states('sensor.symo_10_0_3_m_1_power_ac', with_unit=True) }}
{% elif state=='unavailable' %}
Offline
{% endif %}
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
icon: mdi:gauge
icon_color: |-
{% set state=states('sensor.symo_10_0_3_m_1_power_ac') %}
{% if is_number(state) and state | float >= 0 %}
green
{% elif is_number(state) and state | float <= 0 %}
red
{% elif state=='unavailable' %}
red
{% endif %}
- type: template
entity: sensor.solarnet_power_load
content: '{{ states(''sensor.solarnet_power_load'', with_unit=True) }}'
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
icon: mdi:home-lightning-bolt
icon_color: red
- type: template
entity: sensor.house_downstairs_average_humidity
content: >-
{{ states('sensor.house_downstairs_average_humidity',
with_unit=True) }}
icon: mdi:water-percent
icon_color: green
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
- type: template
entity: sensor.house_downstairs_average_temperature
content: >-
{{ states('sensor.house_downstairs_average_temperature',
with_unit=True) }}
icon: mdi:thermometer
icon_color: blue
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: px;
}
card_mod:
style: |
ha-card {
background-size: cover;
background-color: rgba(243, 243, 243, 0.9);
height: 40px;
margin: 5px;
padding:1px;
}
1 Like
Try like this:
card_mod:
style:
.chip-container>*:
$: |
ha-icon {
margin-right: 20px;
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
}
That works! thank you
1 Like
Thanks that works brilliant! Have you any idea why this one is not working?
type: custom:button-card
icon: mdi:garage
name: Animation Garage Test
styles:
img_cell:
- background-color: color-mix(in srgb, var(--blue-color) 20%, transparent)
- height: 42px
- width: 42px
- border-radius: 50%
icon:
- animation: door 3s steps(1) infinite alternate
- color: var(--blue-color)
- height: 21px
- width: 21px
extra_Styles: |
@keyframes door {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 73%, 32% 73%, 31% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 61%, 32% 61%, 31% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 48%, 32% 48%, 31% 100%, 0 100%); }
}
Note: Found something interesting to keep using card_mod for animations with a custom:button-card. Will dm you some examples but all have one same issue that the animation is part of the img_cell so the animation starts outside the icon.
1 Like
Is it possible to use mdi icons in primary/secondary field of a template card?
thank you 
I prefer BJK 
is it possible always have the lower part of the roomcard button, and not only when an entity is active ?
1 Like
@rhysb maybe you got a solution for this, since i can´t get it working:
since i´m using a bottom-navigation-bar on my mobile (iOS using HA-App) and the back-arrow of a sub-view looks a little bit off (see screenshot) i´d like to move it a little bit up
with chrome i inspected the page and found .mdi-icon-button so i added padding-bottom: 20px, this actually moves the arrow up in chrome
so i tried and added this to my theme file but that doesn´t work in the mobile app.
.mdc-icon-button {
padding-bottom: 10px;
}
moving the main-title however works
}
.main-title {
padding-bottom: 10px;
}
For Minimalist you are more likely to get a good answer over in the Minimalist UI thread. However you should be able to remove the border lines by adding ha-card-border-width: 0px to your theme. If you use the Minimalist Themes then it should already be added.
As I noted with button-card you need to add the @keyframes to the first button on a page. Additionally the icon would need to be correctly sized and centered.
First button:
type: custom:button-card
icon: mdi:motion-sensor
name: Animation Test
styles:
img_cell:
- animation: motion 1s infinite
- background-color: color-mix(in srgb, var(--blue-color) 20%, transparent)
- height: 42px
- width: 42px
- border-radius: 50%
icon:
- animation: clip 2s linear infinite
- color: var(--blue-color)
- height: 21px
- width: 21px
extra_styles: |
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
@keyframes motion {
0%, 100% { background-color: color-mix(in srgb, var(--blue-color) 20%, transparent) }
50% { background-color: color-mix(in srgb, var(--blue-color) 30%, transparent) }
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(0.75, 1.25, 1); }
10% { transform: scale3d(1.25, 0.75, 1); }
12% { transform: scale3d(0.85, 1.15, 1); }
16% { transform: scale3d(1.05, 0.95, 1); }
19% { transform: scale3d(0.95, 1.05, 1); }
25% { transform: scale3d(1, 1, 1); }
}
@keyframes door {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 73%, 32% 73%, 31% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 61%, 32% 61%, 31% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 48%, 32% 48%, 31% 100%, 0 100%); }
}
Subsequent button:
type: custom:button-card
icon: mdi:garage
name: Animation Garage Test
styles:
img_cell:
- background-color: color-mix(in srgb, var(--blue-color) 20%, transparent)
- height: 42px
- width: 42px
- border-radius: 50%
icon:
- animation: door 3s steps(1) infinite alternate
- color: var(--blue-color)
- height: 21px
- width: 21px
- display: flex
1 Like
Not sure I understand what you are asking .