My OCD won’t let me use the tile card 
Why don’t you use a mushroom template card instead? You can achieve the same I’m sure.
1 Like
You can change the tap action to a pop up and add your cards there.
Summary
type: custom:vertical-stack-in-card
cards:
- type: tile
entity: fan.andrews_air_purifier
color: green
name: Air Purifier
features:
- type: fan-speed
card_mod:
style:
ha-tile-icon$: |
ha-svg-icon {
{% if is_state(config.entity,'off') %}
animation: ;
{% elif is_state_attr(config.entity,'percentage',33) %}
animation: rotate 1.2s linear infinite;
{% elif is_state_attr(config.entity,'percentage',66) %}
animation: rotate 0.7s linear infinite;
{% elif is_state_attr(config.entity,'percentage',100) %}
animation: rotate 0.5s linear infinite;
{% elif is_state_attr(config.entity,'mode','auto') %}
animation: rotate 1.2s linear infinite;
{% elif is_state_attr(config.entity,'mode','sleep') %}
animation: rotate 2s linear infinite;
{%- endif %}
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
ha-tile-info$: |
.secondary {
opacity: 80%;
}
.: |
ha-card {
--primary-text-color: var(--tile-color);
{% if is_state(config.entity, 'on') %}
background: rgba(101,170,91,0.1);
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |-
{% if is_state_attr(config.entity, 'mode', 'manual') %}
disabled
{% elif is_state_attr(config.entity, 'mode', 'auto') %}
green
{% endif %}
icon: mdi:fan-auto
entity: fan.andrews_air_purifier
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: fan_test
content:
type: grid
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: mqtt.publish
service_data:
topic: cmnd/fan_parents/FanSpeed
payload: '0'
target: {}
entity: fan.andrew_s_fan
hold_action:
action: none
name: 'Off'
icon: mdi:stop-circle-outline
- type: button
tap_action:
action: call-service
service: mqtt.publish
service_data:
topic: cmnd/fan_parents/FanSpeed
payload: '1'
target: {}
entity: fan.andrew_s_fan
hold_action:
action: none
name: Low
- type: button
tap_action:
action: call-service
service: mqtt.publish
service_data:
topic: cmnd/fan_parents/FanSpeed
payload: '2'
target: {}
entity: fan.andrew_s_fan
hold_action:
action: none
name: Med
- type: button
tap_action:
action: call-service
service: mqtt.publish
service_data:
topic: cmnd/fan_parents/FanSpeed
payload: '3'
target: {}
entity: fan.andrew_s_fan
hold_action:
action: none
name: High
- type: button
tap_action:
action: toggle
entity: light.fan_parents_room
name: Light
hold_action:
action: none
- type: horizontal-stack
cards:
- aspect_ratio: 3/3
color: rgb(44, 109, 214)
color_type: label-card
entity: >-
input_boolean.fan_on_for_20_minutes_minutes_minutes_minutes_minutes_minutes
name: 20
state:
- styles:
card:
- box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
value: 'on'
- styles:
card:
- '--paper-card-background-color': rgb(44, 109, 214)
value: 'off'
styles:
card:
- margin: 0px 0px 0px -3px
name:
- font-weight: bold
- font-size: 25px
- color: white
tap_action:
action: call-service
service: script.set_20_time_for_fan_parents
type: custom:button-card
- aspect_ratio: 3/3
color: rgb(44, 109, 214)
color_type: label-card
entity: input_boolean.fan_on_for_30_minutes_minutes_minutes
name: 30
state:
- styles:
card:
- box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
value: 'on'
- styles:
card:
- '--paper-card-background-color': rgb(44, 109, 214)
value: 'off'
styles:
card:
- margin: 0px 0px 0px -3px
name:
- font-weight: bold
- font-size: 25px
- color: white
tap_action:
action: call-service
service: script.set_30_time_for_fan_parents_time_for_fan_parents
type: custom:button-card
- aspect_ratio: 3/3
color: rgb(44, 109, 214)
color_type: label-card
entity: >-
input_boolean.fan_on_for_45_minutes_minutes_minutes_minutes_minutes
name: 45
state:
- styles:
card:
- box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
value: 'on'
- styles:
card:
- '--paper-card-background-color': rgb(44, 109, 214)
value: 'off'
styles:
card:
- margin: 0px 0px 0px -3px
name:
- font-weight: bold
- font-size: 25px
- color: white
tap_action:
action: call-service
service: script.set_45_time_for_fan_parents
type: custom:button-card
- aspect_ratio: 3/3
color: rgb(44, 109, 214)
color_type: label-card
entity: input_boolean.fan_on_for_60_minutes_minutes_minutes_minutes
name: 60
state:
- styles:
card:
- box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
value: 'on'
- styles:
card:
- '--paper-card-background-color': rgb(44, 109, 214)
value: 'off'
styles:
card:
- margin: 0px 0px 0px -3px
name:
- font-weight: bold
- font-size: 25px
- color: white
tap_action:
action: call-service
service: >-
script.set_60_time_for_fan_parents_time_for_fan_parents_time_for_fan_parents
type: custom:button-card
- aspect_ratio: 3/3
color: rgb(44, 109, 214)
color_type: label-card
entity: input_boolean.fan_on_for_120_minutes_minutes
name: 120
state:
- styles:
card:
- box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
value: 'on'
- styles:
card:
- '--paper-card-background-color': rgb(44, 109, 214)
value: 'off'
styles:
card:
- margin: 0px 0px 0px -3px
name:
- font-weight: bold
- font-size: 25px
- color: white
tap_action:
action: call-service
service: script.set_120_time_for_fan_parents
type: custom:button-card
square: false
columns: 5
card_mod:
style: |
ha-card {
{% if is_state_attr(config.entity, 'mode', 'manual') %}
--chip-background: rgba(var(--rgb-disabled), 0.15);
{% elif is_state_attr(config.entity, 'mode', 'auto') %}
--chip-background: rgba(var(--rgb-green), 0.15);
{% endif %}
}
alignment: end
card_mod:
style: |
ha-card {
--ha-card-box-shadow: none;
top: 12px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
}
.chip-container {
right: 0px;
position: absolute;
}
card_mod:
style: |
ha-card {
background: none;
}
2 Likes
Does anyone have any tips for this? I’m using the custom area cards with “chips” as indicators across the bottom of each card, but the icons are spaced too far apart. I’m looking for a way to apply negative spacing (overlapping) to a chips card. Here’s what it looks like with 0px chip spacing, and below is what I’m hoping to achieve:
I’m doing this using card_mod with “–chip-spacing,” but the negative value doesn’t seem to have any affect:
card_mod:
style: |
ha-card {
--chip-spacing: -4;
}
Is there a way to use negative spacing, or to adjust the individual chips to have 0px left padding?
2 Likes
can you share code for media player bar & naviation function ?
Hi,
Thank you for your work.
If you want to fix your card at the bottom, you can try this:
card_mod:
style: |
ha-card {
max-height: calc(100vh - var(--header-height)) !important;
overflow-y: auto !important;
max-width: var(--masonry-column-width, 490px) !important;
}
:host {
position: fixed !important;
z-index: 0 !important;
bottom: 10px !important;
width: 100% !important;
}
11 Likes
How I can set background color, icon size, … vor a chip:nth-child?
type: custom:state-switch
entity: media_player.camera_mattia
default: 'off'
transition: swap-left
transition_time: 10
states:
'off':
type: custom:stack-in-card
mode: horizontal
cards:
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.menu1
state: 'on'
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Home
secondary: ''
icon: mdi:home
icon_color: white
fill_container: false
layout: vertical
entity: input_select.seleziona_stanza
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.seleziona_stanza
data:
option: Home
card_mod:
style: |
ha-card {
width: 210px;
height: 20px;
--spacing: 0px;
padding-top: 10px !important;
//box-shadow: var(--ha-card-box-shadow) !important;
//border-radius: 10px 10px 10px 10px !important;
transition: all 0s;
--icon-size: 60px;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'white' if is_state('input_select.seleziona_stanza', 'Home') else 'none' }}), 0.4) !important;
}
- type: custom:mushroom-template-card
primary: Cucina
secondary: ''
icon: mdi:fridge
icon_color: white
fill_container: false
layout: vertical
entity: input_select.seleziona_stanza
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.seleziona_stanza
data:
option: Cucina
card_mod:
style: |
ha-card {
width: 210px;
height: 20px;
--spacing: 0px;
padding-top: 10px !important;
//box-shadow: var(--ha-card-box-shadow) !important;
//border-radius: 10px 10px 10px 10px !important;
transition: all 0s;
--icon-size: 60px;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'white' if is_state('input_select.seleziona_stanza', 'Cucina') else 'none' }}), 0.4) !important;
}
- type: custom:mushroom-template-card
primary: Salotto
secondary: ''
icon: mdi:sofa
icon_color: white
fill_container: false
layout: vertical
entity: input_select.seleziona_stanza
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.seleziona_stanza
data:
option: Salotto
card_mod:
style: |
ha-card {
width: 210px;
height: 20px;
--spacing: 0px;
padding-top: 10px !important;
//box-shadow: var(--ha-card-box-shadow) !important;
//border-radius: 10px 10px 10px 10px !important;
transition: all 0s;
--icon-size: 60px;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'white' if is_state('input_select.seleziona_stanza', 'Salotto') else 'none' }}), 0.4) !important;
}
card_mod:
style: |
ha-card {
position: fixed;
top: 0;
bottom: 40px;
left: 8px;
right: 0;
animation: slide-up 0.5s;
z-index: 5;
width: 210px;
height: 400px !important;
padding: 0px;
overflow-y: hidden;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: 35px 35px 35px 35px !important;
}
@keyframes slide-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: >-
{% set stanza = states('input_select.seleziona_stanza') %} {%
if stanza == 'Home' %}
Home
{% elif stanza == 'Cucina' %}
Cucina
{% elif stanza == 'Salotto' %}
Salotto
{% endif %}
secondary: ''
icon: >-
{% set stanza = states('input_select.seleziona_stanza') %} {%
if stanza == 'Home' %}
mdi:home
{% elif stanza == 'Cucina' %}
mdi:fridge
{% elif stanza == 'Salotto' %}
mdi:sofa
{% endif %}
icon_color: white
entity: input_select.seleziona_stanza
tap_action: none
card_mod:
style: |
ha-card {
--spacing: 8px;
--icon-size: 35px;
--primary-text-color: rgb(var(--rgb-white));
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_boolean.menu1
double_tap_action:
action: none
icon: mdi:chevron-up
tap_action:
action: toggle
hold_action:
action: none
card_mod:
style: |
ha-card {
margin-top: 7px;
margin-left: 50px;
--chip-icon-size: 20px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
padding: 0px;
width: 210px;
height: 50px;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: 35px 35px 35px 35px !important;
background: var(--card-background-color);
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:music-note-eighth
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin: 0px 0px 0px 120px;
transition: all 0.5s;
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:video
layout: vertical
icon_color: ''
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin: 0px 0px 0px 80px;
transition: all 0.5s;
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:chart-bar
layout: vertical
icon_color: orange
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin: 0px 0px 0px 40px;
transition: all 0.5s;
}
card_mod:
style: |
ha-card {
overflow: visible !important;
margin-top: 100%;
margin-bottom: 0;
box-shadow: none;
border: none;
background: none;
padding: var(--mush-chip-spacing, 8px);
transition: all 0s;
}
:host {
position: sticky;
z-index: 4;
bottom: 0px;
}
ha-card:after {
content: "";
position: absolute;
bottom: 0px;
height: 80px;
width: 100%;
max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));
left: 50%;
transform: translateX(-50%);
z-index: -1;
background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
border-radius: 35px 35px 0px 0px;
}
ha-card:before {
content: "";
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: -1;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(var(--rgb-card-background-color), 0.8);
border-radius: 35px 35px 0px 0px;
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
playing:
type: custom:stack-in-card
mode: horizontal
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
secondary: ''
icon: >-
{% set room = states('input_select.seleziona_stanza') %} {% if
room == 'Home' %} mdi:home {% elif room == 'Cucina' %} mdi:fridge
{% elif room == 'Salotto' %} mdi:sofa {% endif %}
layout: vertical
icon_color: white
entity: input_boolean.menu1
tap_action:
action: toggle
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 0px;
margin-left: 0px;
transition: all 0.5s;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-media-player-card
entity: media_player.camera_mattia
layout: horizontal
show_volume_level: true
use_media_info: true
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type in ['music', 'playlist'] %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
{% if not is_state(config.entity, 'off') %}
background: rgba(var(--rgb-card-background-color), 0.6) url('{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
background-size: cover;
background-blend-mode: overlay;
{% endif %}
border-radius: 35px 35px 35px 35px !important;
height: 50px !important;
margin-left: -8px;
}
card_mod:
style: |
ha-card {
width: 210px;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: 35px 35px 35px 35px !important;
margin-left: -40px;
{% if is_state('media_player.camera_mattia', 'off') %}
{% else %}
background-image: url('{{ state_attr("media_player.camera_mattia", "entity_picture") }}');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color), 0.8);
background-blend-mode: overlay;
position: relative;
{% endif %}
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:video
layout: vertical
icon_color: ''
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 0px;
margin-left: 80px;
transition: all 0s;
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:chart-bar
layout: vertical
icon_color: orange
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 0px;
margin-left: 40px;
transition: all 0s;
}
card_mod:
style: |
ha-card {
//overflow: visible !important;
overflow: hidden !important;
margin-top: 100%;
margin-bottom: 0px;
box-shadow: none;
border: none;
background: none;
padding: var(--mush-chip-spacing, 8px);
transition: all 0s;
}
:host {
position: sticky;
z-index: 4;
bottom: 0px;
overflow: hidden;
}
ha-card:after {
content: "";
position: absolute;
bottom: 0px;
height: 80px;
width: 100%;
max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));
left: 50%;
transform: translateX(-50%);
z-index: -1;
background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
border-radius: 35px 35px 0px 0px;
}
ha-card:before {
content: "";
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: -1;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(var(--rgb-card-background-color), 0.8);
border-radius: 35px 35px 0px 0px;
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
4 Likes
Thanks for this! It nearly works perfectly on my device and looks great but there’s a few small issues that are still a little bit off. Might have just been my copy/paste/edit though.
- When music is playing you can’t change the room.
- The room popup doesn’t popup over the screen contents, it’ll only popup above the bar itself meaning you need to scroll down to see all options.
Can anyone help me to fill the boxes with a background? I can only get a background on the Title line where the temparature sensor is, but i want it to fill the whole box.
type: horizontal-stack
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-template-card
primary: Stua
secondary: >-
{{ states('sensor.verisure_rv_stua_temp') }} °C | {{
states('sensor.verisure_rv_stua_fukt') | int(0) }} %
icon: ''
icon_color: blue
tap_action:
action: call-service
service: script.popup_stua
hold_action:
action: navigate
navigation_path: /lovelace-panel/stua
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
}
- type: custom:mushroom-template-card
primary: Kjøkken
secondary: >-
{{ states('sensor.aqara_multisensor_kjokkenet_temp') }} °C | {{
states('sensor.aqara_multisensor_kjokkenet_fukt') | int(0) }} %
icon: ''
icon_color: orange
tap_action:
action: call-service
service: script.popup_kjokken
hold_action:
action: navigate
navigation_path: /lovelace-panel/kjokken
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:radiator
{% else %}
mdi:radiator-off
{% endif %}
entity: switch.hue_kontakt_stua_1
icon_color: |-
{% if is_state(config.entity, 'on') %}
red
{% else %}
blue
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.6em
- type: template
entity: light.over_stuebordet
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.6em
- type: template
entity: light.stua_uten_stuebordlys_dz
content_info: none
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:lamp
{% else %}
mdi:lamp-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.6em
- type: template
entity: input_boolean.boolean_filmlys_stua
content_info: none
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:movie-open-outline
{% else %}
mdi:movie-open-off-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.6em
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 10;
margin-top: -10px;
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(config.entity, 'heat') %}
mdi:radiator
{% else %}
mdi:radiator-off
{% endif %}
entity: climate.mill_ovn_kjokkenet
icon_color: |-
{% if is_state(config.entity, 'heat') %}
red
{% else %}
blue
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.6em
- type: template
entity: light.taklyset_pa_kjokken
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.6em
- type: template
entity: light.kjokkenbenken
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:led-strip-variant
{% else %}
mdi:led-strip-variant-off
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.6em
- type: template
entity: switch.aqara_kontakt_kjokkenet_1
content_info: none
icon: |-
{% if is_state(config.entity, 'on') %}
hue:plug
{% else %}
hue:plug
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.6em
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 10;
margin-top: -10px;
1 Like
you’re right, but I’m implementing the functions hand hand. Unfortunately the work steals a lot of time 
Yeah I can appreciate that and thanks for the hard work! My yaml skills are no way near good enough to get anywhere near sadly but just wanted to check you had the same problems and it wasn’t my copying. Hopefully stuff like this comes out of the box at some point but I think we’re probably years off seeing that yet.
I’m using
--chip-spacing: -12px !important;
to get chips close enough together for my cards
2 Likes
Thank you for your response. However, what I am trying to do is add a new button that will open another window to activate the timer. Specifically, I have created an input boolean for the fan to turn on for 20 minutes, 30 minutes, and 120 minutes, with the name “20”, “30”, and “120” respectively.( input_boolean.fan_on_for_20_minutes_minutes_minutes_minutes_minutes_minutes
name: 20) The service I am using is “script.set_20_time_for_fan_parents”. My question is, how can I add these options to the new window I am creating with the additional button? Thank you for your assistance.
I also adapted your code to no longer go through state-switch but rather with conditional-card and CSS:
Without media_player being played:
When media_player is playing or paused:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Search...
secondary: ''
icon: mdi:search-web
icon_color: white
entity: input_select.plex_recently
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: ChatGPT
content:
type: custom:stack-in-card
cards:
- type: entities
entities:
- entity: input_text.gpt_prompt
- type: markdown
content: >-
{{ state_attr('sensor.hassio_mindsdb_response',
'response_text') }}
title: Réponse
card_mod:
style: |
ha-card {
{% if is_state('media_player.currently_playing', ['idle','off']) %}
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
width: 100%;
--spacing: 5px;
margin-bottom: 2px;
margin-top: 2px;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-left: 0px;
margin-right: auto;
{% else %}
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 1%;
transition: all 0.5s;
{% endif %}
}
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 25%, var(--card-background-color)) !important;
transition: all 0.1s;
}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
layout: horizontal
show_volume_level: true
use_media_info: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: En cours
content:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon_type: none
layout: vertical
media_controls:
- previous
- play_pause_stop
- next
volume_controls:
- volume_set
- volume_buttons
show_volume_level: false
use_media_info: true
collapsible_controls: false
card_mod:
style:
mushroom-state-info$: |
/* CSS for Mushroom Popup Media Player */
.secondary:before {
/* Add album name between song title and artist name */
{% if state_attr(config.entity, 'media_album_name') != none %}
content: "{{ state_attr(config.entity, 'media_album_name')}}\A";
{% endif %}
/* Format title to fit on seperate line */
white-space: pre;
text-overflow: ellipsis;
}
.: |
ha-card {
/* Remove border from media player */
--ha-card-border-width: 0;
/* Apply album art color to media player icon & volume bar */
--rgb-state-media-player: var(--album-art-color);
/* Disable transitions */
transition: all 0.5s;
}
.actions {
/* Apply album art color to media player controls */
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
/* Move volume button to seperate row */
display: block !important;
}
ha-card:before {
content: "";
/* Show album art above media player when active and default image when idle */
{% if is_state(config.entity, ['playing', 'paused']) %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% else %}
background: url('/local/idle_art.png') center no-repeat;
{% endif %}
/* Add padding around album art */
margin: 0px 4px 16px;
/* Add drop shadow to album art */
filter: drop-shadow(4px 4px 6px rgba(var(--album-art-color), 0.3));
/* Round borders of album art */
border-radius: var(--control-border-radius);
/* Adjust the album art aspect ratio based on media type */
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
/* Stretch album art to fit box. Fix for if album art is not sized correctly */
background-size: 100% 100%;
}
mushroom-button {
/* Size volume button to match other controls and center */
display: flex;
width: calc((100% / 3) - (var(--spacing) / 3) * 2);
margin: auto;
}
mushroom-media-player-media-control,
mushroom-media-player-volume-control {
/* Correct margins for volume button on second row */
display: flex;
margin-right: 0px !important;
/* Check if PLAY|STOP are supported and adjust margin accordingly */
{% if state_attr(config.entity, 'supported_features') | int | bitwise_and(20480) > 0 %}
margin-bottom: var(--spacing) !important;
{% endif %}
}
- entity: media_player.currently_playing
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
/* Apply album art color to progress bar when paused */
--paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
/* Apply album art color to progress bar when playing */
--paper-progress-active-color: rgb(var(--album-art-color)) !important;
}
.: |
ha-card {
/* Move progress bar up into gap. Check if PLAY|STOP are supported */
--base-offset: calc(4 * var(--mush-spacing, 12px)
+ 1.33 * var(--mush-spacing, 12px)
+ var(--mush-card-primary-line-height, 1.5) * var(--mush-card-primary-font-size, 14px)
+ var(--mush-card-secondary-line-height, 1.5) * var(--mush-card-secondary-font-size, 12px)
+ var(--mush-control-height, 42px));
/* Check if Play (16385) or Stop (4096) are supported and add control button height if they are */
{% if state_attr(config.entity, 'supported_features') | int | bitwise_and(20480) > 0 %}
--control-offset: calc(var(--mush-spacing, 12px) + var(--mush-control-height, 42px));
{% else %}
--control-offset: 0px;
{% endif %}
/* Check if album name is present and add to height if it is */
{% set album_name = state_attr(config.entity, 'media_album_name') %}
{% if album_name == None or album_name == "" %}
--album-offset: 0px;
{% else %}
--album-offset: calc(var(--mush-card-secondary-line-height, 1.5) * var(--mush-card-secondary-font-size, 12px));
{% endif %}
bottom: calc(var(--base-offset) + var(--control-offset) + var(--album-offset));
/* Correct margins for progress bar */
margin: 0px 28px -12px;
/* Set height of card to match pregress bar height */
height: var(--mmp-progress-height);
/* Remove border outline */
--ha-card-border-width: 0;
/* Round corners of progress bar */
--mmp-border-radius: var(--control-border-radius, 12px) !important;
/* Set height of progress bar */
--mmp-progress-height: 12px !important;
/* Remove transitions to prevent progress bar floating in */
transition: all 0.5s;
}
card_mod:
style: |
:host {
/* Assign album art color to variable used in popup */
--album-art-color:
{% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
{{ states('sensor.muted_color') }}
{% else %}
141, 117, 238
{% endif %};
/* Remove background because it is applied to popup */
--ha-card-background: none;
}
card_mod:
style:
ha-dialog$: |
.mdc-dialog__surface {
/* Apply gradient background to popup using album art colors. Set to default colors when idle */
{% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
background: linear-gradient(305deg, transparent 50%, rgba({{ states('sensor.dark_vibrant_color') }}, 0.4)),
linear-gradient(55deg, transparent 50%, rgba({{ states('sensor.vibrant_color') }}, 0.2)),
linear-gradient(180deg, transparent 40%, rgba({{ states('sensor.dark_muted_color') }}, 0.3));
{% else %}
background: linear-gradient(0deg, transparent 40%, rgba(192, 127, 190, 0.3)),
linear-gradient(240deg, transparent 40%, rgba(143, 119, 237, 0.3)),
linear-gradient(120deg, transparent 40%, rgba(122, 181, 239, 0.3));
{% endif %}
}
ha-header-bar$: |
.mdc-top-app-bar {
/* Remove header background so that popup background is visible */
--mdc-theme-primary: none;
/* Reduced the gap between header and album art */
margin-bottom: -16px;
}
.: |
:host {
/* Set width of popup */
--popup-min-width: 450px;
}
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
--icon-animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
{% if not is_state(config.entity, 'off') %}
background: rgba(var(--rgb-card-background-color), 0.6) url( '{{ state_attr(config.entity, "entity_picture") }}' ) center no-repeat;
background-size: cover;
background-blend-mode: overlay;
{% endif %}
border-radius: 35px 35px 35px 35px !important;
height: 55px !important;
margin-left: -8px;
}
card_mod:
style: |
ha-card {
{% if is_state('media_player.currently_playing', ['playing','paused']) %}
background-image: url( '{{ state_attr( "media_player.currently_playing", "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color), 0.8);
background-blend-mode: overlay;
position: relative;
margin-left: -72%;
width: 170%;
border-radius: 35px 35px 35px 35px !important;
transition: all 0.5s;
{% else %}
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 2px;
margin-left: auto;
margin-right: -64%;
transition: all 0.5s;
{% endif %}
}
I also applied a color modification depending on the media being played:
ha-card:before {
content: "";
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: calc(100% - 2 * var(--ha-card-border-width, 1px));
z-index: -1;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 35px;
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
{% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
background: linear-gradient(135deg, rgba({{ states('sensor.dark_vibrant_color') }}, 0.85), rgba({{ states('sensor.dark_muted_color') }}, 0.75));
{% else %}
background: rgba(var(--rgb-card-background-color), 0.20);
{% endif %}
}
11 Likes
That looks amazing! I am also using a bottom bar, but I haven’t been able to get it exacly how I want it. Would you mind sharing your code on how you did it? I am very interested in implementing the “left-right” swiping.
Also, I saw your search button is linked to ChatGPT? Can I ask you how you have integrated that?
Thanks 
great!
I was really looking for someone to help me with the development.
Share all the code please.
1 Like
Hi,
I will share my bar code soon.
Regarding ChatGPT, I went through this integration:
1 Like
I opted for a dashboard with a single view. To keep and use only one menu bar on my entire dashboard.
I chose to use local-conditional-card to do this.
It also allows me to easily manage which cards are shown or hidden.
Result:
Here is the full code for my top bar:
19 Likes
Is there anyway to change the colors of the alarm card icon? The normal alarm card uses blue for disarmed and green for armed. I’d like to make it green for disarmed, and red for armed, but I don’t see options in the visual editor or looking over the options on github. I’m guessing I’d have to use a template card, but I also want the arm/disarm buttons at the bottom of the card.
This is how I want it to look, just the colors of the icon different.
Any suggestions?