Oh nice - Spotify playlists 
Do you mind sharing your code?
That’s the build in media player of home assisstant
Hello folks,
I need some help on card configuration using combination of custom:fold-entity-row with custom:mushroom-cover-card.
My idea is to have inside of fold-entity-row 3 mushrom cover cards, one to control group of covers and two other cards to control separately shutters.
My current configuration is showing unfolded card behind of Thermostat and existing light control buttons.
- type: custom:mod-card
style: |
ha-card {
--ha-card-background: teal;
background-color: rgba(255, 80, 84);
width: 350px;
margin: auto;
position: absolute;
left: 0;
right: 0;
height: 55px;
border-radius: 10px;
box-shadow: none;
}
view_layout:
column: 1
card:
square: false
columns: 1
type: grid
cards:
- type: entities
entities:
- type: custom:fold-entity-row
head:
type: section
label: ⚙ Roller shutters
entities:
- type: custom:mushroom-cover-card
entity: cover.sonoff_1xxxxx
show_position_control: true
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.sonoff_1xxxxx
show_position_control: true
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.sonoff_1xxxxx
show_position_control: true
show_buttons_control: true
1 Like
The regular media player or the mushroom media player? When you edit the card you can go to the code editor at the bottom to see the actual code. Don’t really follow it from the .gif what you’re calling
The images seem to be the stumbling block as I can remove that column on some of the list-card tables and the feed shows.
Can you share the code for your score page?
sure, here you are
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Salon
secondary: >-
{{ states('sensor.ble_temperature_salon') }} °C | {{
states('sensor.ble_humidity_salon') | int(0) }} %
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: salon
icon_color: '#a37208'
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.05);
--mush-icon-size: 50px;
height: 66px;
margin-left: -8px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |
{% if is_state('media_player.sony_bravia_tv', 'off') %}
mdi:television-classic-off
{% else %}
mdi:television-classic
{% endif %}
icon_color: |
{% if is_state('media_player.sony_bravia_tv', 'off') %}
grey
{% else %}
indigo
{% endif %}
content_info: |-
none
b
tap_action:
action: more-info
- type: template
icon: |
{% if is_state('llight.yeelight_white', 'on') %}
mdi:floor-lamp
{% else %}
mdi:floor-lamp-outline
{% endif %}
icon_color: |
{% if is_state('light.yeelight_white', 'on') %}
yellow
{% else %}
grey
{% endif %}
entity: light.yeelight_white
content_info: none
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: more-info
- type: template
icon: |
{% if is_state('light.kitchen_led', 'on') %}
mdi:lightbulb-spot
{% else %}
mdi:lightbulb-spot-off
{% endif %}
icon_color: |
{% if is_state('light.kitchen_led', 'on') %}
yellow
{% else %}
grey
{% endif %}
entity: light.kitchen_led
content_info: none
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: more-info
- type: template
entity: climate.saswell_gtz03
icon: |
{% if is_state('climate.saswell_gtz03', 'off') %}
mdi:radiator-off
{% elif is_state('climate.saswell_gtz03', 'auto') %}
mdi:radiator-disabled
{% else %}
mdi:radiator
{% endif %}
icon_color: |
{% if is_state('climate.saswell_gtz03', 'off') %}
grey
{% elif is_state('climate.saswell_gtz03', 'auto') %}
orange
{% else %}
red
{% endif %}
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
icon: >
{% if is_state('binary_sensor.sonoff_door_sensor_contact',
'on') %}
mdi:window-open-variant
{% else %}
mdi:window-closed-variant
{% endif %}
icon_color: >
{% if is_state('binary_sensor.sonoff_door_sensor_contact',
'on') %}
light-green
{% else %}
grey
{% endif %}
entity: binary_sensor.sonoff_door_sensor_contact
content_info: none
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
tap_action:
action: more-info
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-size: 15px;
--chip-spacing: -8px;
}
card_mod:
style: |
ha-card {
height: 102px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Łazienka
secondary: >-
{{ states('sensor.ble_temperature_lazienka') }} °C | {{
states('sensor.ble_humidity_lazienka') | int(0) }} %
icon: mdi:bathtub-outline
icon_color: '#e0d3ad'
tap_action:
action: none
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.05);
--mush-icon-size: 50px;
height: 66px;
margin-left: -8px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
}
card_mod:
style: |
ha-card {
margin-top: -20px;
margin-bottom: -10px;
}
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Sypialnia
secondary: >-
{{ states('sensor.ble_temperature_sypialnia') }} °C | {{
states('sensor.ble_humidity_sypialnia') | int(0) }} %
icon: mdi:bed-king
icon_color: '#ce95de'
tap_action:
action: noone
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.05);
--mush-icon-size: 50px;
height: 66px;
margin-left: -8px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |
{% if is_state('light.xiaomi_mi_desk_lamp', 'on') %}
mdi:desk-lamp
{% else %}
mdi:desk-lamp
{% endif %}
icon_color: |
{% if is_state('light.xiaomi_mi_desk_lamp', 'on') %}
yellow
{% else %}
grey
{% endif %}
entity: light.xiaomi_mi_desk_lamp
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Dawid
secondary: >-
{{ states('sensor.cgd1_alarm_clock_temperature') }} °C | {{
states('sensor.cgd1_alarm_clock_humidity') | int(0) }} %
icon: mdi:human-child
icon_color: '#e8af10'
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.05);
--mush-icon-size: 50px;
height: 66px;
margin-left: -8px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |
{% if is_state('light.yeelight_edison_style', 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |
{% if is_state('light.yeelight_edison_style', 'on') %}
yellow
{% else %}
grey
{% endif %}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
}
1 Like
Is there a way to resize the box that pops up when you press more info, or in my case I’m using a popup card. It always opens full screen on my iPhone and I would like it to just be the size of the card like it defaults to on a desktop browser
Thanks. I’d already made my own while waiting for your reply haha.
Noticed a couple of things which you might want to look at.
The ‘light.yeelight_white’ has a typo (I assume) for the icon. Additionl ‘l’:
llight.yeelight_white
If you change your ‘if’ statement to the following, you won’t need to keep referencing the entity:
{% if is_state(entity, 'on') %}
Example:
- type: template
entity: light.living_room_lamp
icon: mdi:floor-lamp-torchiere
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
2 Likes
thanks!! yes I know I;m doing certain things the longer way, still learning
thank you for the tips
!
Hey guys.
Im trying to add a second card to my Swipe card but as soon as I add it the complete Card just disappears. Can you help me?
My Code (copied from reddit and edited to include a swipe card. Thx for that )
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-rows: auto
column-gap: 0px
row-gap: 0px
grid-templateareas: |
"1"
"2"
cards:
- type: custom:swipe-card
parameters:
scrollbar:
hide: false
cards:
- type: sensor
entity: sensor.balkon_temp_t
- type: sensor
entity: sensor.balkon_temp_t
grid_area: 1
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: entity
entity: sensor.balkon_temp_t
icon: none
card_mod:
style: |
ha-card {
--chip-margin-top: 0px;
--chip-border-radius: 0px;
--chip-font-size: 0.4em;
--chip-padding: 0 0.3em;
--chip-spacing: 0px;
--chip-icon-size: 0.6em;
--chip-box-shadow: none;
--chip-background: none
--chip-text-color:#F1F1F2;
:host([dark-mode]) {
--text-color: #F1F1F2;
}
alignment: start
- type: entity
entity: light.wohnzimmer
icon: none
card_mod:
style: |
ha-card {
--chip-margin-top: 0px;
--chip-border-radius: 0px;
--chip-font-size: 0.4em;
--chip-padding: 0 0.3em;
--chip-spacing: 0px;
--chip-icon-size: 0.6em;
--chip-box-shadow: none;
--chip-background: none
--chip-text-color:#F1F1F2;
:host([dark-mode]) {
--text-color: #F1F1F2;
}
alignment: end
view_layout:
grid-column: 1
grid-row: 2
card_mod:
style: |
ha-card {
color: ;
border-radius: 0px 0px 15px 15px;
height: 35px;
margin-top: -13px;
outline-color: red;
--chip-spacing: 0px;
--ha-card-background: #A57C65;
}
2 Likes
Ok never mind, I found the solution.
I am using lovelace-collapsable-cards to hide Groups of custom:mushroom-cover-card
- type: custom:collapsable-cards
title: Group control
cards:
- type: entities
entities:
- type: custom:mushroom-cover-card
name: Group control
entity: cover.sonoff_1xxxx
show_position_control: true
show_buttons_control: true
- type: custom:mushroom-cover-card
name: Left
entity: cover.sonoff_1xxxx
show_position_control: true
show_buttons_control: true
- type: custom:mushroom-cover-card
name: Right
entity: cover.sonoff_1xxxx
show_position_control: true
show_buttons_control: true
show_header_toggle: false
Hi, I would like to put a gradient outline around the template card icon, I have tried with the following code but it is not what I wanted, is it possible to do it?
type: custom:mushroom-template-card
primary: ''
secondary: |-
{% if is_state('alarm_control_panel.allarme', 'armed_away')%}
Attivo
{% else %}
Fuori casa
{% endif %}
icon: |
{% if is_state('alarm_control_panel.allarme', 'armed_away')%}
mdi:shield-home
{% elif is_state('alarm_control_panel.allarme', 'disarmed')%}
mdi:shield-home-outline
{% endif %}
entity: alarm_control_panel.allarme
layout: vertical
picture: ''
icon_color: |-
{% if is_state('alarm_control_panel.allarme', 'armed_away')%}
green
{% elif is_state('alarm_control_panel.allarme', 'disarmed')%}
white
{% endif %}
badge_color: ''
badge_icon: ''
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
--ha-card-box-shadow: {{ "0px 0px 20px red" if is_state('binary_sensor.lumi_lumi_sensor_magnet_c2049c03_on_off', 'on') }};
}
Has anyone got a nice format for setting their heating duration using input_select? This is as far as I’ve gotten but it looks crap. I’d prefer the boost button to be longer and the time buttons to be as narrow as possible.
columns: 5
type: grid
cards:
- type: custom:mushroom-entity-card
entity: switch.test_boost_living_room
tap_action:
action: toggle
icon_type: none
name: Boost
layout: vertical
- type: custom:mushroom-entity-card
entity: input_select.time_select
tap_action:
action: call-service
service: input_select.select_option
data:
option: '00:20:00'
target:
entity_id:
- input_select.time_select
icon_type: none
name: '15'
secondary_info: none
fill_container: true
- type: custom:mushroom-entity-card
entity: input_select.time_select
tap_action:
action: call-service
service: input_select.select_option
data:
option: '00:35:00'
target:
entity_id:
- input_select.time_select
icon_type: none
name: '30'
fill_container: true
secondary_info: none
- type: custom:mushroom-entity-card
entity: input_select.time_select
tap_action:
action: call-service
service: input_select.select_option
data:
option: '00:50:00'
target:
entity_id:
- input_select.time_select
icon_type: none
name: '45'
secondary_info: none
fill_container: true
- type: custom:mushroom-entity-card
entity: input_select.time_select
tap_action:
action: call-service
service: input_select.select_option
data:
option: '01:05:00'
target:
entity_id:
- input_select.time_select
icon_type: none
secondary_info: none
fill_container: true
name: '60'
Anybody any idea how to use the animation on the icon instead of the background?
Thanks
- type: custom:mushroom-template-card
primary: test
secondary: >-
{% set state=states(entity) %} {% if state=='off' %}Safe{% elif
state=='on' %} Trip {% else %} Fault {% endif %}
entity: switch.bar_projector_socket_1
layout: vertical
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
card:
box-shadow: 0 0 0.65rem 0.1rem red
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:motion-sensor-off
{% elif state=='on' %}
mdi:motion-sensor
{% else %}
mdi:screwdriver
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='off' %}
green
{% elif state=='on' %}
red
{% else %}
yellow
{% endif %}
style: |
ha-card {
{% if states('switch.bar_projector_socket_1') == 'on' %}
animation: blink 1.5s linear infinite;
box-shadow: 0px 0px 50px red;
}
@keyframes blink {
0% {paper-item-icon-color: yellow;}
50% {background-color: red;}
}
{%- else -%}
box-shadow: 0px 0px;
{%- endif %}
badge_icon: ''
badge_color: ''
multiline_secondary: false
fill_container: false
Hi,
Is it possible to add a border to a picture?
Thanks
I started to use the climte card with homematic thermostats and have some questions.
1.) The card shows a badge icon, but what are the meanings of the differnt badges. The color of the icon reflects the different HVAC modes
2.) Is ist intended that the first tap switches the thermontat off and the second switches to heat even if i only select auto and off as options.
@piitaya QQ: would it be difficult or run counter to your vision to allow templates in the content: section of template chips? Lots of words there, sorry Maybe an example:
type: custom:auto-entities
filter:
include:
- group: binary_sensor.all_door_sensors
options:
type: template
entity: this.entity_id
content: {{ state_attr({entity}, 'friendly_name') }}
icon: mdi:door
exclude: []
card:
type: custom:mushroom-chips-card
show_empty: true
card_param: chips
Note this does not work but is an example of a use for templating content. I believe by using auto-entities, I can populate a bunch of chips dynamically and apply a card_mod/style to them for effects such as glowing based on state, etc. But I’d like to be able to see the actual name of the entity. I’ll go look at the code in a bit to see if it’s straightforward, but wanted to check to see whether I was missing something or there’s a better approach.
I’ve also tried to replace content with a few different variations, e.g.
content: {{ state_attr(this.entity_id, 'friendly_name') }}
Few visual examples of what I’d like to accomplish:
obviously with real names en route to this which is currently done with manual entries for each chip:
Another option would be to use a slider?
1 Like
Yeh I guess I could. Doesn’t fit in with the rest of my mushroom cards lol.
Can you use a chips card then put the template card inside it? The template card will allow you to use templates inside.
This is what I do:
- type: custom:mushroom-chips-card
alignment: end
chips:
- type: template
entity: light.living_room_lamp
icon: mdi:floor-lamp-torchiere
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle