Hello, I use this code, but sometimes volume controls doesnât show. It depends on media player entity. Do you know why?
thank you
Have you checked if the volume controls for those entities are displayed if you use the standard Home Assistant media card?
This code:
type: custom:vertical-stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.lms
fill_container: true
icon: mdi:music
use_media_info: true
show_volume_level: true
media_controls:
- next
- play_pause_stop
- on_off
- type: custom:mushroom-media-player-card
entity: media_player.lms
show_volume_level: false
volume_controls:
- volume_set
icon_type: none
primary_info: none
secondary_info: none
media_controls: []
fill_container: true
use_media_info: false
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: script.top_liedjes
content_info: name
tap_action:
action: toggle
icon: mdi:music
Results in this:
How can I remove the outline of 'Top Liedjes", so the card will be seamless?
1 Like
thank you.
this is home assistant media player:
there isnât volume control
Using card mod:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: script.top_liedjes
content_info: name
tap_action:
action: toggle
icon: mdi:music
card_mod:
style: |
ha-card {
margin: 0px 0px 0px 8px;
--chip-box-shadow: none;
--ha-card-box-shadow: none;
}
Either --chip-box-shadow: none; or --ha-card-box-shadow: none; does the job, not sure which one after all the recent updates. But adding both should do the job as well.
You can also add a margin like I did above so the chip is more in line with the rest of the card.
hello very first very nice dashboard I have a few questions?
1 . how did you make the person card want to share the code here?
2. the media panel under the time does this work if you click on harmony you get harmony panel and spotify gets spotify can you also share the code for this?
thanks in advance !
Thank you, but the result stays the same. Only the chip card is more alligned to the right.
Weird, it works for me. And with --chip-border-width: 0; ?
Hi,
1- this is my person card code:
type: horizontal-stack
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-person-card
entity: person.andrea
use_entity_picture: true
primary_info: none
# secondary_info: none
layout: vertical
badge_icon: >-
{% if is_state('binary_sensor.cellulare_andrea_is_charging_2', 'on')
-%}
mdi:power-plug
{%- elif is_state('binary_sensor.cellulare_andrea_is_charging_2',
'off') -%}
mdi:power-plug-off
{%- else -%}
mdi:power-plug-off
{%- endif %}
badge_color: >-
{% if is_state('binary_sensor.cellulare_andrea_is_charging_2', 'on')
-%}
red
{%- endif %}
card_mod:
style: |
mushroom-shape-avatar {
{{ 'filter: grayscale(100%);' if not is_state('person.andrea', 'home') }}
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('binary_sensor.cellulare_andrea_is_charging_2') %}
{% if state=='on' %}
amber
{% else %}
grey
{% endif %}
entity: binary_sensor.cellulare_andrea_is_charging_2
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
icon_color: |2-
{% set state=states('sensor.cellulare_andrea_wifi_connection_2') %}
{% if state=='<not connected>' %}
#6f6f6f
{% else %}
amber
{% endif %}
entity: sensor.cellulare_andrea_wifi_connection_2
icon: mdi:wifi
tap_action:
action: more-info
- type: template
entity: sensor.cellulare_andrea_battery_level_2
content: '{{ states(entity) }} %'
icon: |2-
{% set bl = states('sensor.cellulare_andrea_battery_level_2') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.cellulare_andrea_battery_level_2') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: ;
--chip-spacing: 0;
}
alignment: center
2- Harmony card and Spotify card show what is playing. If I click on Harmony, gets a script to power off activity and if I click on Spotify, I navigate to Spotify page:
- type: 'custom:button-card'
entity: sensor.current_activity
icon: 'mdi:television'
name: Harmony
label: '[[[ return entity.state; ]]]'
show_label: true
show_state: false
show_name: true
styles:
card:
- height: 100px
grid:
- grid-template-areas: '"n" "i" "l"'
- grid-template-columns: 1fr
- grid-template-rows: min-content 1fr min-content
name:
- color: var(--secondary-text-color)
- font-size: 80%
- font-weight: bold
label:
- color: var(--disabled-text-color)
icon:
- height: 70%
- width: 70%
- color: var(--disabled-text-color)
state:
- value: PowerOff
operator: '!='
styles:
label:
- font-weight: bold
- color: var(--primary-text-color)
icon:
- color: var(--paper-item-icon-active-color)
- value: PowerOff
styles: null
label: ' '
tap_action:
action: call-service
service: script.harmony_turn_off
- type: 'custom:button-card'
entity: media_player.spotify
icon: 'mdi:spotify'
name: Spotify
label: '[[[ return states["sensor.spotify_room"].state; ]]]'
show_label: true
show_state: false
show_name: true
styles:
card:
- height: 100px
grid:
- grid-template-areas: '"n" "i" "l"'
- grid-template-columns: 1fr
- grid-template-rows: min-content 1fr min-content
name:
- color: var(--secondary-text-color)
- font-size: 80%
label:
- color: var(--disabled-text-color)
icon:
- height: 70%
- width: 70%
- color: var(--disabled-text-color)
state:
- value: playing
styles:
label:
- font-weight: bold
- color: var(--primary-text-color)
icon:
- color: var(--paper-item-icon-active-color)
- value: playing
operator: '!='
label: ' '
tap_action:
action: call-service
service: |
[[[
if (entity.state === 'playing')
{
return 'media_player.media_pause';
} else {
return 'media_player.media_play';
}
]]]
service_data:
entity_id: media_player.spotify
3 Likes
thanks man & happy holidays
That did the trick! Thank you!
Hey, Iâm a silent reader and I need your support! I despair of the climate card. I have created a climate card that changes the icon when the window is open, now the current temperature of a sensor should also be in the secondary status. how do I get it WITHOUT a template card? Thanks in advance! and Merry Christmas!
the first code is my climate card which changes the icon, the second the one with the sensor status, if i put the code in the first card it doesnât work!
type: custom:mushroom-climate-card
entity: climate.bad_heizung
icon: mdi:thermometer
layout: vertical
primary_info: none
secondary_info: state
card_mod:
style: |
ha-card {
--card-secondary-font-size:10px;
}
mushroom-shape-icon {
{% if is_state('binary_sensor.badfenster_contact','on') %}
--card-mod-icon: mdi:window-open-variant;
--shape-color: rgb(var(--rgb-blue)) !important;
--icon-color: rgb(var(--rgb-white)) !important;
{% else %}
--card-mod-icon: mdi:thermometer;
{% endif %}
type: custom:mushroom-climate-card
entity: climate.bad_heizung
icon: mdi:thermometer
layout: vertical
primary_info: none
secondary_info: 0
card_mod:
style:
mushroom-state-info$: |
.primary:before {
content: "{{ states('sensor.bad_heizung_temperature') | round(1) }} °C";
font-size: 10px;
}
Can some one tell me why this wonât animate. Iâm looking for a light card such as the mushroom light card with a simple flashing or pulse animation.
type: tile
entity: light.master_bedroom_main_lights
features:
- type: light-brightness
icon: mdi:lightbulb-on
card_mod:
style:
ha-tile-icon$: |
ha-svg-icon {
animation: illumination 2s infinite;
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
I recommend creating sensors with the template code for counting. Than using a conditional card to show the chip when not zero.
- type: conditional
conditions:
- entity: sensor.windows_open
state_not: '0'
chip:
type: template
icon: mdi:window-open-variant
icon_color: yellow
tap_action:
action: navigate
navigation_path: /lovelace-details/fenster
card_mod:
style: |
ha-card:after {
content: "{{ (states.sensor.windows_open.state | int) }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(105,105,105);
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
2 Likes
Can you share your code for this ? thank you
Try with this my friend.
type: custom:mushroom-entity-card
entity: light.living_room
layout: horizontal
style: |
{% set state=states('light.living_room') %}
{% if state == 'on' %}
mushroom-shape-icon {
animation: blink 1s ease-in infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
{% endif %}
You should get this 
- How can I remove the borders around the chips at the bottom?
- How can I align the light bulbs icon to the right bottom (so temp/hum left bottom and the light at the right bottom)?
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Woonkamer
icon: mdi:sofa
layout: horizontal
icon_color: blue
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:thermometer
icon_color: yellow
content: >-
{{ states('sensor.woonkamer_temperatuur_4') | replace (".",",") }} °C
- type: template
icon: mdi:water-percent
icon_color: blue
content: >-
{{ states('sensor.woonkamer_luchtvochtigheid') | replace (".",",") }}
%
- type: template
entity: light.woonkamer_lampen
icon: mdi:lightbulb-group
icon_color: |
{% if is_state('light.woonkamer_lampen', 'on') %}
yellow
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
Hmm. Iâd forgotten that the standard card itself doesnât have volume control, so that doesnât help us. I tried to check the Spotify integration myself, but it doesnât work with my Sonos set up.
Can you see volume attributes for the Spotify media player in Developer Tools/States? If not, youâll need to combine two media cards, one for playback control for Spotify and the other for the output source to control volume.
Using card mod:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Woonkamer
icon: mdi:sofa
layout: horizontal
icon_color: blue
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:thermometer
icon_color: yellow
content: >-
{{ states('sensor.woonkamer_temperatuur_4') | replace (".",",") }}
°C
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
- type: template
icon: mdi:water-percent
icon_color: blue
content: >-
{{ states('sensor.woonkamer_luchtvochtigheid') | replace (".",",") }}
%
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
alignment: start
card_mod:
style: |
ha-card {
margin: 0px 0px 6px 4px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.woonkamer_lampen
icon: mdi:lightbulb-group
icon_color: |
{% if is_state('light.woonkamer_lampen', 'on') %}
yellow
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
alignment: end
card_mod:
style: |
ha-card {
margin: 0px 8px 6px 0px;
}
I use 3 different lines of code per chip to remove the chip borders, but only one should be sufficient for you.
1 Like